CocosCreator骨骼动画之龙骨DragonBones
CocosCreator版本2.3.4
龙骨动画
将龙骨动画放到cocos的assets下。我这里龙骨动画是Dragonbones导出的二进制动画。
【CocosCreator骨骼动画之龙骨DragonBones】
文章图片
直接拖拽龙骨动画(骨头图标)到舞台
文章图片
设置骨骼动画的属性,DragonAltasAsset图片,Animation动作,PlayTime循环播放等
文章图片
文章图片
代码生成龙骨动画
龙骨资源路径是assets/resources/dragonbones,loadResDir只需要填dragonbones就行了。
//根据路径加载资源cc.loader.loadResDir("dragonbones",cc.Asset,null,(err, resource)=>{console.log("资源:",resource); //生成骨骼动画let node:cc.Node = new cc.Node(); let armatureDisplay:dragonBones.ArmatureDisplay = node.addComponent(dragonBones.ArmatureDisplay); armatureDisplay.dragonAsset = resource[0]; armatureDisplay.dragonAtlasAsset = resource[3]; armatureDisplay.armatureName = "role3"; armatureDisplay.playAnimation("move",0); node.x = 100; node.y = 100; this.node.addChild(node); });
替换皮肤
//加载资源 cc.loader.loadResDir("dragonbones",cc.Asset,null,(err, resource)=>{console.log("资源:",resource); //生成动画1let node:cc.Node = new cc.Node(); let armatureDisplay:dragonBones.ArmatureDisplay = node.addComponent(dragonBones.ArmatureDisplay); armatureDisplay.dragonAsset = resource[0]; armatureDisplay.dragonAtlasAsset = resource[3]; armatureDisplay.armatureName = "role3"; armatureDisplay.playAnimation("move",0); node.x = 100; node.y = 100; this.node.addChild(node); //生成动画2let node2:cc.Node = new cc.Node(); let armatureDisplay2:dragonBones.ArmatureDisplay = node2.addComponent(dragonBones.ArmatureDisplay); armatureDisplay2.dragonAsset = resource[4]; armatureDisplay2.dragonAtlasAsset = resource[7]; armatureDisplay2.armatureName = "role4"; armatureDisplay2.playAnimation("move",0); node2.x = 150; node2.y = 150; this.node.addChild(node2); //动画2的皮肤应用到动画1上let factory = dragonBones.CCFactory.getInstance(); factory.replaceSkin(armatureDisplay.armature(), (armatureDisplay2.armature() as dragonBones.Armature).armatureData.defaultSkin, true); });
以上就是CocosCreator骨骼动画之龙骨DragonBones的详细内容,更多关于CocosCreator骨骼DragonBones的资料请关注脚本之家其它相关文章!
推荐阅读
- 技术·教程|Javascript中遇到的问题: 缓动动画函数的封装
- 案例|动画之匀速加速减速缓冲运动(加轮播图)
- javaScript---js动画
- javascript|JS动画封装
- 计算机大赛获奖作品动画,全国xx杯说课大赛计算机类一等奖作品(《遮罩动画》说课课件...)
- 移动开发|自定义控件及效果
- 摘录|皮克斯创始人之一约翰·拉塞特今年底将正式离职,他对于动画世界的贡献无法被磨灭
- css样式|css动画----loading加载动画
- 历史上的今天|【历史上的今天】3 月 29 日(“机器人三定律”问世;电脑动画首次获得奥斯卡;Caldera Linux 沉浮史)
- Vue中使用js制作进度条式数据对比动画