首页 > 手游开发 > Cocos2d-x > cocos creator 如何制作帧动画
2020
10-26

cocos creator 如何制作帧动画

帧动画

整体流程

帧动画,就是通过一系列图片定义动画表现的动画形式,首先我们需要动画运行所需的所有帧。

这些帧通常以一张大图的形式(如下)给出,并不附带任何位置信息。

cocos creator 如何制作帧动画 - 第1张  | 逗分享开发经验
image

所以我们首先要将图片处理成带位置信息的大图形式,以便能够被cocos creator所用。

其次要创建一个承载动画的节点,并绑定Animation组件。

编辑动画,包括运行速度,帧事件,运行模式(顺序、循环...)。

预览。

动画资源制作

分离图片

  • 使用shoeBox将素材图中的各个元素扣出来,分离成一个个单独的图片。将源图片直接拖入如下位置即可,shoeBox默认的输出目录跟源文件目录相同。
cocos creator 如何制作帧动画 - 第2张  | 逗分享开发经验
image

打包整合图片

  • 使用TexturePacker将分离的图片合成一张大的雪碧图,附带.plist文件。将Texture的输出路径直接放在cocos creator工程目录下的/assets/texture
cocos creator 如何制作帧动画 - 第3张  | 逗分享开发经验
image
  • 将打包出来的plist和雪碧图资源导入到cocos creator编辑器中,如下图所示
cocos creator 如何制作帧动画 - 第4张  | 逗分享开发经验
image

节点/组件

新建用于承载动画的节点

  • 在节点中添加sprite组件,用于放置节点默认显示的一帧画面。将第一帧图拖进去。因为我们的一帧图是从图集中扣出来的(前面我们用TexturePacker合成了一张大图),所以这里Sprite的Altas属性就是我们的图集。
cocos creator 如何制作帧动画 - 第5张  | 逗分享开发经验
image
  • 在节点中添加animation组件,用于定义动画的具体行为
    • 在animation组件中一个Default Clip属性,这代表这个节点默认展示的动画。类型为cc.AnimationClip,每个cc.AnimationClip都有个name属性,用于区分不同的动画。
    • 还有一个clips属性,是个数组。也就是Animation组件可以使这个节点拥有多个动画。比如说角色的跑、跳、蹲等动作。有多少个动作,这个数组就有多长。可以认为cc.Animationcc.AninationClip的合集。
    cocos creator 如何制作帧动画 - 第6张  | 逗分享开发经验
    image

创建/编辑动画

新建动画资源

动画资源就对应于之前animation组件的cc.AnimationClip类型的属性。在资源管理器中新建Animation资源。定义好动画资源后,就可以直接把这个资源拖到对应的属性Default clip上去。(如上图)

编辑动画

在层级管理器中选中动画节点,在动画编辑器中就可以对动画进行编辑了。

在动画编辑器中点击编辑按钮。在下面的属性列表中新建动画需要改变的属性。因为我们是帧动画,所以自然要改变的就是cc.Sprite.SpriteFrame属性了。

选中动画所需的帧拖到该属性的右边去。点击播放按钮,即可看到动画效果。

可以在动画编辑器的右下角修改动画的采样率和速度,以改变动画的帧变化速度。

保存动画。

cocos creator 如何制作帧动画 - 第7张  | 逗分享开发经验
image

选中选中节点,Animation组件下的Play on Load属性,即可在浏览器或者模拟器中查看动画效果。

脚本控制

onLoad () {
    var animation = this.getComponent(cc.Animation)
    animation.play('name-of-animationClip') // 直接播放动画
    // 动态加载动画
    cc.loader.loadRes('animation/name-of-animation-resource-file', cc.AnimationClip, function (err, dynamicAnimationClip) {
        // 先将动态加载的clip放入animation中
        animation.addClip(dynamicAnimationClip)
        animation.run('dynamic-animation-clip-name')
    })
}
最后编辑:
作者:搬运工
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。