cocos Creator使用骨骼动画和物理引擎制作摩天轮动画(入门级)

随便找一组摩天轮素材,结构如下:


cocos Creator使用骨骼动画和物理引擎制作摩天轮动画(入门级)_第1张图片
摩天轮素材

新建一个cocos项目,并把素材拖拽进场景编辑器当中:


cocos Creator使用骨骼动画和物理引擎制作摩天轮动画(入门级)_第2张图片
拖拽并定位

第一步,首先要使轮盘转起来:


cocos Creator使用骨骼动画和物理引擎制作摩天轮动画(入门级)_第3张图片
添加clip动画

添加一个clip文件,设置关键帧,我这里设置的是7m旋转360度,循环方式改为loop,属性检查器里面设置为入场自动播放:

cocos Creator使用骨骼动画和物理引擎制作摩天轮动画(入门级)_第4张图片
设置参数


效果

第二步:要想让轮盘和小篮子拥有物理属性,需要给这两个元素添加刚体组件,其中轮盘设为静态Static,小篮子设为动态Dynamic。


cocos Creator使用骨骼动画和物理引擎制作摩天轮动画(入门级)_第5张图片
添加物理组件

第三步:给小篮子添加物理组件中的骨骼动画的关节组件,将小篮子素材“c”于“b”绑定,并调整衔接的杆,如图中标注:


cocos Creator使用骨骼动画和物理引擎制作摩天轮动画(入门级)_第6张图片
调节衔接处

到这一步,发现,小篮子并没有跟随轮盘转起来,是由于没有开启小篮子的物理引擎,这时候我们需要写一段js。

效果图

新建一个main.js,在onLoad生命周期函数中,开启物理引擎

onLoad () {

        cc.director.getPhysicsManager().enabled = true;

        cc.director.getCollisionManager().enabled = true;

    },

并挂载到小篮子的节点的属性上:

cocos Creator使用骨骼动画和物理引擎制作摩天轮动画(入门级)_第7张图片
main

效果如图所示:发现,小篮子走到了一点不走了。

cocos Creator使用骨骼动画和物理引擎制作摩天轮动画(入门级)_第8张图片
效果图

修改bug:小篮子不走了需要去掉这个勾选,但是会导致cpu占用提高。


cocos Creator使用骨骼动画和物理引擎制作摩天轮动画(入门级)_第9张图片
去掉勾选


一个篮子效果图

上面的步骤基本完成,为了节约开支,我们将小篮子拖拽到预制资源,避免了多个小篮子的重复生成


cocos Creator使用骨骼动画和物理引擎制作摩天轮动画(入门级)_第10张图片
预制资源

然后我们在场景中添加多个小篮子,但是每一个小篮子跟“另一端刚体”的锚点需要分别配置一下,运行,大功告成:

效果图

demo地址:https://download.csdn.net/download/qq_41076441/12001114

cocosCreator版本号:2.1.1

你可能感兴趣的:(cocos Creator使用骨骼动画和物理引擎制作摩天轮动画(入门级))