obsidian/笔记文件/2.笔记/技能编辑器_第四章.md
2025-03-26 00:02:56 +08:00

4.7 KiB
Raw Permalink Blame History

还有一个动画片段,也是一个子物体

!Pasted image 20240307153008.png

父物体是一个label文本然后子物体是两个显示要素VisualElement

!Pasted image 20240307153142.png

动画片段的抽象父类,设置根节点,背景颜色,宽度,位置

!Pasted image 20240307153401.png

其中,背景颜色,就是有选中,和消选,两个调用

!Pasted image 20240307153530.png

表现:

!Pasted image 20240307153603.png

动画片段,对应的具体逻辑: 加载对应的uxml配置设置一下主拖曳区域和动画帧结束点线条 设置标题的接口; 传参tracStyle是一个VisualElement会新增该动画片段root节点

!Pasted image 20240307153633.png

传参tracStyle是这个

!Pasted image 20240307154242.png

也就是回到,前面两个基础轨道类,是动画片段的显示父节点; 初始化函数,设置一下,自身的显示父节点 menuParent 和 contentParent 然后加载俩配套的轨道uxml文件

!Pasted image 20240307154305.png

是继承自SkillTrackStyleBase主要逻辑就是往自身根节点通过代码的形式添加子节点

!Pasted image 20240307154417.png

继续动画轨道AnimationTrack是继承自SkillTrackBase技能基类

!Pasted image 20240307154804.png

初始化,实例化基础轨道类相关,设置标题,然后注册回调函数,拖曳相关

!Pasted image 20240307154822.png

表现:

!Pasted image 20240307154946.png

在技能编辑器页面会有一个统统一管理所有轨道的list列表

!Pasted image 20240307155018.png

在初始化动画轨道的时候,会加上这个; 后续还会加上,特效和音效轨道

!Pasted image 20240307155047.png

动画片段,是可以点击,修改颜色等逻辑操作; 相关抽象基类: 选择、消选,重置帧宽度

!Pasted image 20240307155408.png

继承子类; 选择的时候unity属性面板显示对应轨道信息选中和消选颜色设置

!Pasted image 20240307155512.png

面板显示相关

!Pasted image 20240307155734.png

设置,选择当前轨道; 这个是技能编辑器本身的CustomEditor属性面板逻辑 调用当前轨道的OnSelect选中函数

!Pasted image 20240307155744.png

Instance在创建面板中有设置为this调用的Show函数是用来显示动画相关数据

!Pasted image 20240307155858.png

!Pasted image 20240307160040.png

!Pasted image 20240307160051.png

选中的,表现

!Pasted image 20240307160110.png

动画片段的交互逻辑; SkillAnimationTrackItemStyle的实例化已经调用了对应的uxml显示文件也设置了默认颜色和选中颜色

!Pasted image 20240307160203.png

!Pasted image 20240307160255.png

绑定对应的鼠标事件:点击,抬起,移出,移动; 重置动画帧宽度

!Pasted image 20240307160344.png

重置函数,除了自身根据,动画帧的位置信息设定,还有动画终结线的显示属性,和位置设置

!Pasted image 20240307160441.png

鼠标交互里面,点击,抬起,移出,这三个的逻辑,都还是比较简单的; 点击,就是触发选中函数,抬起和移出,都会调用,拖曳动画片段,本体的函数

!Pasted image 20240307160656.png

选中的业务逻辑,会跳转到面板显示,还有选择和消选,调用了对应的,设置背景函数

!Pasted image 20240307161006.png

拖曳,就是设置帧索引相关了

!Pasted image 20240307161106.png

对应动画数据,字典存储的修改,删除旧的,增加新的,而且会自动保存配置文件

!Pasted image 20240307161132.png

鼠标移动逻辑,会相对复杂一点; 需要计算开始坐标,和鼠标位置之间的偏移; 而且可能考虑到,整个轨道,边界的情况;

举例说明,表现上,有可能出现,两者之间,没有冗余空间,进行左边拖曳

!Pasted image 20240307161447.png

!Pasted image 20240307161250.png

这是配合,遍历,轨道整体动画数据的,帧索引,判断是否会出现,重叠的情况

!Pasted image 20240307161402.png

检测,不能超过最大边界

!Pasted image 20240307161822.png

以上,就是动画片段本身,相关的交互逻辑; 回到轨道逻辑,这是初始化最后需要做的,重置数据 先销毁,再重新绘制

!Pasted image 20240307161910.png

这里遍历的,是配置信息数据

!Pasted image 20240307162027.png

销毁是这里的,显示要素销毁

!Pasted image 20240307162058.png

创建,就是根据帧索引,创建前面提及的,动画片段了; 然后加到对应的trackItemDic字典

!Pasted image 20240307162116.png