前言:
- 我是根据b站上的视频进行学习,并且总结写下笔记,然后做此分享。笔记非常详细以至于你可以通过查看文章进行快速学习并且制作出游戏出来。当然视频学习的链接我也放在下面了:
- 视频学习:www.bilibili.com/video/BV1Nd…
- 音频/美术资源包下载: pan.baidu.com/s/1mY05SbG3…
完成目标
成功为草丛添加了“自然摇摆”的动画效果。
具体实现了:
- 不使用帧动画(因为草是一张静态图)
- 给草丛根节点添加脚本
- 使用 Tween(补间动画) 来做属性动画
- 通过代码设置:起始值、结束值、持续时间
- 对两个 Sprite 节点分别添加摇摆动画
- 添加缓动(Easing),让动画更自然流畅
- 调整后层草丛位置(上移 20px,Y 偏移 4px)
- 让前后草丛看起来有空间层次差异
最终效果:
草丛会轻微来回摆动,前后层草丛摇摆略有区别,看起来更自然、更有生机,场景从“静态图片”升级为“有动态氛围的环境”。
-
实现过程:
- 为草丛添加摇摆动画,这次我们不会使用帧序列,因为草地只是一张静态图。我们将sprite节点的属性进行动画处理。我们使用代码脚本进行实现
- 我们来到草丛场景点击根节点点击卷轴图标创建脚本代码,并且保存在代码文件夹中,然后模版取消勾选就好了
- 要为草的属性添加动画效果,我们需要一个特殊的工具叫做tween,所以我们创建一个变量,这个属性的类型是补间动画。补间动画是一个工具,可以在脚本中为我们实现属性动画,我们只需要给它起始值、结束值和动画持续时间。它会在中间进行插值计算并更新属性
- 然后我们把我们的2个精灵节点,按ctrl键之后拖拽到代码中
- 然后我们来先搞定第一个草丛的补间动画也就是摇摆动画,我们利用引擎自带的初始化运行函数,然后来设置生成草丛摇摆的弧度,然后进行播放调整。具体的可以看看注释
- 然后在第二个草丛也是这样子写
- 然后我们为了让这个摇摆的动画更加流畅,我们加一下缓动
- 然后我们来给2个草丛做一点区别,让前草丛和后草丛看起来像是具有不同y轴排序的不同物体。我们修改后面那个草丛把它的节点坐标往上移动20px,然后偏移量为y轴的4px