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

sevenstars

@雾都漫游者 希望将此内容加入网易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. }

复制代码

sevenstars

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

MI4C_163

图片切片：在图片同级目录下添加同名的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. }

复制代码

耿耿星河

顶一个

耿耿星河

可否来个demo

jxl井桢

顶

sevenstars

dd

Minehero-境界

问过官方了，modsdk的ui统一实现在一个screen里，全部的自定义ui只是那个screen里的控件，因此那个screen并没有设置close_on_player_hurt的字段，那个功能暂时没法做

Minehero-境界

去年10月份我就已经提交动画ui的原版接口需求给官方了，就等等吧

斯文禽兽

牛的 我一直忽略了这个json的作用

雾都漫游者

谢谢反馈，后续我们加入到文档中

reezhu

easing看名字应该是插帧，线性插帧的样子