不得不说cocos2d-js的文档实在是少,骨骼动画的载入和C++版本的好像还有些不同不能直接依样画葫芦。

一个由cocos studio编辑生成的骨骼动画一般会包含如下几个文件:

  • .ExportJson文件
  • .plist文件
  • .png文件

ExportJson文件包含了骨骼动画的动作和所要用到的资源的名称,plist文件负责切分png图片的各个区域形成逻辑上的一张张图片,其实是把要用的图片打包的单个png文件中,然后把原来的文件名称和区域信息记录到plist中。ExportJson中包含了对plist文件的名称的描述体现在其config_file_path字段。那么照理来说导入骨骼动画只要显式加载一个ExportJson文件就行了剩下的让引擎去做吧?可惜不是这样,如果不在resource中指定骨骼动画配套的plist那么在加载骨骼动画的时候就会报错。下面记录一个骨骼动画使用的过程:

0. 修改项目配置文件添加extension模块

"modules" : ["cocos2d", "extensions"],

使用cocos studio工具生成的资源大部分都要把extensions模块也加入到项目中来,这些模块处于ccs命名空间中

1. 向resource.js文件添加骨骼动画资源描述

    wolf_animation: "res/monster/wolf/wolf.ExportJson",
wolf_plist: "res/monster/wolf/wolf0.plist"

注意ExportJson和对应plist文件都要在这里写出

2. 加载骨骼动画资源

        var size = cc.winSize;
var scale = 0.5; ccs.armatureDataManager.addArmatureFileInfo(res.wolf_animation); var wolfAnimation = new ccs.Armature("wolf");
wolfAnimation.setScale(scale);
wolfAnimation.setPosition(size.width / 2 + 150, size.height / 2);
wolfAnimation.animation.play("Animation1");
this.addChild(wolfAnimation);

这里addArmatureFileInfo是一个同步过程有对应的异步版本,要用骨骼动画前需要执行一次这个方法,它会读入骨骼动画数据并把要用到的资源缓存起来。这样执行多次

new ccs.Armature("wolf");

其实不要再执行addArmatureFileInfo了。new ccs.Armature()中的参数要和骨骼动画项目中ExportJson指定的名称一致即其armature_data.name

Cocos2d-js 开发记录:骨骼动画载入的更多相关文章

  1. three.js之初探骨骼动画

    今后的几篇郭先生主要说说three.js骨骼动画.three.js骨骼动画十分有意思,但是对于初学者来说,学起来要稍微困难一些,官方文档比较少,网上除了用圆柱体的例子就是引用外部模型的,想要熟练使用骨 ...

  2. Cocos2d-js 开发记录:Loading载入界面自定义

    Loading界面是一个cc.Scene具体请看: http://blog.csdn.net/jonahzheng/article/details/38348255 如果仅仅是想把图片(cocos l ...

  3. 基于babylon3D模型研究3D骨骼动画(1)

    3D骨骼动画是实现较为复杂3D场景的重要技术,Babylon.js引擎内置了对骨骼动画的支持,但Babylon.js使用的骨骼动画的模型多是从3DsMax.Blender等3D建模工具转换而来,骨骼动 ...

  4. cocos2d-x开发记录:二,基本概念(骨骼动画)

    九,骨骼动画 1.骨骼动画vs Sprite sheets 你能使用sprite sheets 创建动画,它很快又容易.直到你意识到你的游戏需要大量的动画并且内存消耗越来越高,并且需要时间载入全部数据 ...

  5. 基于Babylon.js编写简单的骨骼动画生成器

    使用骨骼动画技术可以将网格的顶点分配给若干骨头,通过给骨头设定关键帧和父子关系,可以赋予网格高度动态并具有传递性的变形 效果.这里结合之前的相关研究在网页端使用JavaScript实现了一个简单的骨骼 ...

  6. 记录 Spine骨骼动画导入unity 步骤[unity3d 4.6.6版本 2d动画]

    1:准备好unity使用Spine所需要的运行库,可到如下地址 https://github.com/EsotericSoftware/spine-runtimes/tree/master/spine ...

  7. three.js 自制骨骼动画(二)

    上一篇说了一下自制骨骼动画,这一篇郭先生使用帧动画让骨骼动画动起来.帧动画是一套比较完善的动画剪辑方法,详细我的api我们就不多说了,网上有很多例子,自行查找学习.在线案例请点击博客原文.话不多说先上 ...

  8. 关于Cocos Creator用js脚本代码播放骨骼动画的步骤和注意事项

    步骤: 1.用cc.find()方法找到相应的骨骼动画节点,并把这个对象赋值给一个var出来的新对象. 具体代码:var spineboy_anim = cc.find("UI_Root/a ...

  9. three.js 自制骨骼动画(一)

    上一篇郭先生解析了一下官方的骨骼动画案例,这篇郭先生就要做一个稍微复杂一点的骨骼动画了,就拿一个小人下手吧.在线案例请点击博客原文.话不多说先上大图 骨骼动画在GUI上面都有体现.制作骨骼动画的步骤在 ...

随机推荐

  1. Jmeter Grafana Influxdb 环境搭建

    1.软件安装 1.Grafana安装 本文仅涉及Centos环境 新建Grafana yum源文件 /etc/yum.repos.d/grafana.repo [grafana] name=grafa ...

  2. Java非静态代码块和静态代码块

    类中存在两种特殊的代码块,即非静态代码块和静态代码块,前者是直接由 { } 括起来的代码,而后者是由 static{ } 括起来的代码. 非静态代码块在类初始化创建实例时,将会被提取到类的构造器中执行 ...

  3. 牛客 Wannafly挑战赛27 D 绿魔法师

    传送门 \(\color{green}{solution}\) 分析下,在\(1e5+1\)内,一个数的约数个数最多为\(2^{6}\)个,所以我们可以考虑枚举约数 复杂度\(O(N^{2^{6 \t ...

  4. 移动APP的用户体验测试

    经常被问到用户体验测试,什么是用户体验测试,用户体验测试要关注的都有哪些呢,现在为大家来罗列一下: 1.横竖屏测试 在移动设备上做用户体验测试,最容易想到的就是对APP做横竖屏的测试来观察APP的显示 ...

  5. CDH集群安装配置(七)--CDH组件的安装和配置

    1. Clouder Manger页面的配置 访问主节点IP:(cdh1)192.168.80.81:7180 默认用户名和密码:admin,admin 选择一个版本 选择集群的服务器(agent), ...

  6. 码云+jenkins+自动回复邮件

    码云和jenkins的配置流程在Gitee Jenkins Plugin上介绍的很仔细. 附上码云官方Gitee Jenkins Plugin的介绍: https://gitee.com/help/a ...

  7. myEclipse卡顿解决

    1 .关闭MyEclipse的自动validation windows > perferences > myeclipse > validation 将Build下全部勾取消 如果你 ...

  8. oracle--块信息深入解析

    一,创建 Data Block是数据库中最小的I/O单元 01,建立一个新的表空间 查看默认表空间位置 select TABLESPACE_NAME,FILE_NAME from dba_data_f ...

  9. intellij idea NoClassDefFoundError javax.swing.UIManager

    今天启动idea报 NoClassDefFoundError javax.swing.UIManager 可是明明配置好了java 环境 ,后来仔细想了一下只配置了java的bin目录在PATH里 随 ...

  10. CSS的margin属性:详解margin属性

    在网上看到的一篇文章,说的比较全面.原文地址:http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗? 你知道margin有什么特性吗 ...