网易我的世界论坛

标题: [技术公布]在UI中使用序列帧控件，实现动态效果 [打印本页]
作者: sevenstars    时间: 2020-8-8 01:34
标题: [技术公布]在UI中使用序列帧控件，实现动态效果
本帖最后由 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. }
复制代码



作者: sevenstars    时间: 2020-8-8 02:02
ui还有很多功能，比如在玩家受伤时关闭screen，根据界面是经典还是pocket决定screen的显示，这些都能在json里直接配置。还有就是我注意到原版的熔炉UI，铁砧UI等，也绑定了很多数据，官方既然有源码，能否让我们知道微软是怎么传入这些绑定数据的，这样想自定义熔炉时就不用自己构建界面了，直接用官方的就好。
作者: MI4C_163    时间: 2020-8-8 11:28
本帖最后由 MI4C_163 于 2020-8-8 22:38 编辑

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



作者: 耿耿星河    时间: 2020-8-8 13:06
顶一个
作者: 耿耿星河    时间: 2020-8-8 13:14
可否来个demo
作者: jxl井桢    时间: 2020-8-11 03:24
顶
作者: sevenstars    时间: 2020-8-18 17:56
dd
作者: Minehero-境界    时间: 2020-8-18 18:09
问过官方了，modsdk的ui统一实现在一个screen里，全部的自定义ui只是那个screen里的控件，因此那个screen并没有设置close_on_player_hurt的字段，那个功能暂时没法做
作者: Minehero-境界    时间: 2020-8-18 18:10
去年10月份我就已经提交动画ui的原版接口需求给官方了，就等等吧
作者: 斯文禽兽    时间: 2020-8-22 23:23
牛的 我一直忽略了这个json的作用
作者: 雾都漫游者    时间: 2020-9-2 19:20
谢谢反馈，后续我们加入到文档中
作者: reezhu    时间: 2020-12-3 14:40
easing看名字应该是插帧，线性插帧的样子



欢迎光临 网易我的世界论坛 (http://mc.netease.com/) Powered by Discuz! X3.3