服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - CocosCreator骨骼动画之龙骨DragonBones

CocosCreator骨骼动画之龙骨DragonBones

2022-03-03 16:58gamedaybyday js教程

这篇文章主要介绍了怎么在CocosCreator中使用骨骼动画龙骨DragonBones,对骨骼动画感兴趣的同学,可以试一下

CocosCreator版本2.3.4

龙骨动画

将龙骨动画放到cocos的assets下。我这里龙骨动画是Dragonbones导出的二进制动画。

CocosCreator骨骼动画之龙骨DragonBones

直接拖拽龙骨动画(骨头图标)到舞台

CocosCreator骨骼动画之龙骨DragonBones

设置骨骼动画的属性,DragonAltasAsset图片,Animation动作,PlayTime循环播放等

CocosCreator骨骼动画之龙骨DragonBones

CocosCreator骨骼动画之龙骨DragonBones

代码生成龙骨动画

龙骨资源路径是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);
 
    //生成动画1
    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);
 
    //生成动画2
    let 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的资料请关注服务器之家其它相关文章!

原文链接:https://www.cnblogs.com/gamedaybyday/p/13021916.html

延伸 · 阅读

精彩推荐
  • js教程js事件模型与自定义事件实例解析

    js事件模型与自定义事件实例解析

    JavaScript一个最简单的事件模型,需要有事件绑定与触发,还有事件删除。本文将对其具体实现代码进行解析,需要的朋友一起来看下吧...

    caihg5682021-12-15
  • js教程js实现贪吃蛇游戏含注释

    js实现贪吃蛇游戏含注释

    这篇文章主要为大家详细介绍了js实现贪吃蛇游戏含注释,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    越学越害怕5842022-02-16
  • js教程前端组件化基础知识详细讲解

    前端组件化基础知识详细讲解

    这篇文章主要介绍了前端组件化基础知识,我们一起来学习前端组件化的知识,组件化在前端架构里面是最重要的部分,了解什么是组件化和一个组件的基...

    三钻9762022-02-24
  • js教程一起深入理解js中的事件对象

    一起深入理解js中的事件对象

    这篇文章主要给大家介绍了关于js中事件对象的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋...

    皮卡丘和羊宝贝8192022-01-19
  • js教程javascript实现简单留言板案例

    javascript实现简单留言板案例

    这篇文章主要为大家详细介绍了javascript实现简单留言板案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    爱前端的茂茂8072022-01-20
  • js教程10分钟彻底搞懂微信小程序单页面应用路由

    10分钟彻底搞懂微信小程序单页面应用路由

    这篇文章主要给大家介绍了光宇微信小程序单页面应用路由的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价...

    百度智能小程序技术6402022-02-15
  • js教程JavaScript逐点突破系列之this是什么

    JavaScript逐点突破系列之this是什么

    本章将专门介绍与执行上下文创建阶段直接相关的最后一个细节——this是什么?以及它的指向到底是什么,感兴趣的朋友跟随小编一起看看吧...

    蛋黄酥要不要来一口阿7302022-03-03
  • js教程原生js实现下拉框选择组件

    原生js实现下拉框选择组件

    这篇文章主要为大家详细介绍了原生js实现下拉框选择组件的开发,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    蒲公英芽4462022-01-05