请选择 进入手机版 | 继续访问电脑版
查看: 3138|回复: 14

[交流] [技术公布]在UI中使用序列帧控件,实现动态效果

[复制链接]

22

主题

317

回帖

174

积分

Lv.4 怪物猎人

UID
373726
小麦
3
金锭
607
下界之星
0

开发者认证勋章

发表于 2020-8-8 01:34:58 | 显示全部楼层 |阅读模式 IP:山西
本帖最后由 sevenstars 于 2020-8-8 01:53 编辑

@雾都漫游者 希望将此内容加入网易ui教程中,以便更多开发者学习。序列帧控件,特点是可以播放动态的序列帧
提醒:你必须开发过带ui的功能玩法,否则你很难理解此教程
用这个控件可以实现很多优秀的效果,并节省内存
第一步,制作序列帧,需参考网易教程,注意最后生成的序列帧应该是从左到右的一行。
第二步,把序列帧的png放在textures里面的任意一处,我自己的mod放在了textures/ui/SweepingEdge。
第三步,在相同目录增加一个和png同名的json文件,并在里面输入以下内容(记得删注释)
  1. {
  2.     "base_size": [306,7]    //序列帧图片的宽度与高度,鼠标右键点击序列帧图片,在属性的详细信息里面可查看
  3. }
复制代码
第四步,在ui的json文件里配置序列帧控件
  1. "sword_animation": {    //sword_animation是我这个控件的名字,你们自己起名
  2.     "anim_type": "flip_book",    //表示动画类型是flip_book,可能还有其他选项,期待官方给出
  3.     "initial_uv": [ 0, 0 ],    //uv起始位置,如果你不是把多个序列帧塞一个图片里,就0,0
  4.     "frame_count": 18,    //帧数,比如我的序列帧由18个小图拼合而成。
  5.     "frame_step": 17,    //帧步,序列帧播放时,每次uv的横坐标前进的像素。比如我的序列帧图片每帧宽度17px,所以就填17
  6.     "fps": 30,    //帧率
  7.     "reversible": true,    //true则正放倒放循环,否则正放循环
  8.     "easing": "linear"    //不清楚,期待官方给出
  9. },
复制代码
第五步,在ui中加入图片控件,其中uv_size要和序列帧中的一帧大小相同(单位:像素),然后进入游戏试试效果吧。
  1. "full" : {    //full是我这个控件的名字,你们可以自己随意起英文名
  2.     "anchor_from" : "center",
  3.     "anchor_to" : "top_middle",
  4.     "layer" : 31,
  5.     "offset" : [ -0.5, 8 ],
  6.     "size" : [ 17, 7 ],
  7.     "texture" : "textures/ui/SweepingEdge/sword_anim",     //填写序列帧图片的路径
  8.     "type" : "image",
  9.     "uv": "@sword_animation",     //对应上面的序列帧控件
  10.     "uv_size" : [ 17, 7 ],     //uv_size要和序列帧中的一帧大小相同,比如我的一帧宽度17px,高度7px
  11.     "visible" : true
  12. }
复制代码



22

主题

317

回帖

174

积分

Lv.4 怪物猎人

UID
373726
小麦
3
金锭
607
下界之星
0

开发者认证勋章

 楼主| 发表于 2020-8-8 02:02:45 | 显示全部楼层 IP:山西
ui还有很多功能,比如在玩家受伤时关闭screen,根据界面是经典还是pocket决定screen的显示,这些都能在json里直接配置。还有就是我注意到原版的熔炉UI,铁砧UI等,也绑定了很多数据,官方既然有源码,能否让我们知道微软是怎么传入这些绑定数据的,这样想自定义熔炉时就不用自己构建界面了,直接用官方的就好。

8

主题

58

回帖

27

积分

Lv.2 石器学徒

UID
7100732
小麦
1
金锭
255
下界之星
0
发表于 2020-8-8 11:28:43 | 显示全部楼层 IP:湖南
本帖最后由 MI4C_163 于 2020-8-8 22:38 编辑

图片切片:在图片同级目录下添加同名的json文件。使用该文件会让图片被切片为9个部分,拉伸时只拉伸中间部分其中nineslice为四周不被拉伸的像素宽度
当然如果你想四边不等宽也是可以的,可以去看看原版的json里面是怎么写的
  1. {
  2.   "nineslice_size": 2,
  3.   "base_size": [14, 14]
  4. }
复制代码
效果:

当然如果你想四边不等宽也是可以的,可以去看看原版的json里面是怎么写的,例如这是一个原版的文件arrow_dark_left_stretch.json
  1. {
  2.   "nineslice_size": [7, 0, 1, 0],
  3.   "base_size": [16, 13]
  4. }
复制代码



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

40

主题

137

回帖

91

积分

Lv.3 矿物能手

UID
203814
小麦
4
金锭
459
下界之星
0
发表于 2020-8-8 13:06:18 | 显示全部楼层 IP:湖南
顶一个

40

主题

137

回帖

91

积分

Lv.3 矿物能手

UID
203814
小麦
4
金锭
459
下界之星
0
发表于 2020-8-8 13:14:36 | 显示全部楼层 IP:湖南
可否来个demo

21

主题

89

回帖

50

积分

Lv.3 矿物能手

UID
256209
小麦
1
金锭
374
下界之星
0
发表于 2020-8-11 03:24:47 来自手机 | 显示全部楼层 IP:浙江

22

主题

317

回帖

174

积分

Lv.4 怪物猎人

UID
373726
小麦
3
金锭
607
下界之星
0

开发者认证勋章

 楼主| 发表于 2020-8-18 17:56:29 | 显示全部楼层 IP:山西
dd

3

主题

138

回帖

65

积分

Lv.3 矿物能手

UID
6472670
小麦
3
金锭
422
下界之星
0
发表于 2020-8-18 18:09:11 | 显示全部楼层 IP:美国
问过官方了,modsdk的ui统一实现在一个screen里,全部的自定义ui只是那个screen里的控件,因此那个screen并没有设置close_on_player_hurt的字段,那个功能暂时没法做

3

主题

138

回帖

65

积分

Lv.3 矿物能手

UID
6472670
小麦
3
金锭
422
下界之星
0
发表于 2020-8-18 18:10:00 | 显示全部楼层 IP:美国
去年10月份我就已经提交动画ui的原版接口需求给官方了,就等等吧

0

主题

10

回帖

3

积分

Lv.1 新手木匠

UID
53088
小麦
0
金锭
127
下界之星
0
发表于 2020-8-22 23:23:22 来自手机 | 显示全部楼层 IP:浙江
牛的 我一直忽略了这个json的作用

4

主题

1093

回帖

345

积分

Lv.2 石器学徒

UID
3409745
小麦
4
金锭
1241
下界之星
0
发表于 2020-9-2 19:20:39 | 显示全部楼层 IP:广东
谢谢反馈,后续我们加入到文档中

3

主题

11

回帖

7

积分

Lv.1 新手木匠

UID
273750
小麦
0
金锭
111
下界之星
0
发表于 2020-12-3 14:40:04 | 显示全部楼层 IP:广东
easing看名字应该是插帧,线性插帧的样子
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部