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