步骤:

1.用cc.find()方法找到相应的骨骼动画节点,并把这个对象赋值给一个var出来的新对象。

 具体代码:var spineboy_anim = cc.find("UI_Root/anchor_lb/spineboy");

2.用getComponent()方法找到相应骨骼动画节点的骨骼动画组件,并把这个对象赋值给一个var出来的新对象。

 具体代码:var ske_anim_comp = spineboy_anim.getComponent(sp.Skeleton);

3.把第二点的新对象通过赋值给一个新的全局对象this.ske_comp,这个对象可以在其他的函数里面使用。

 不像C和C++语言,要先声明和定义才能使用函数,JavaScript里面的函数定义的位置都是随便放的,函数里面要用其他函数的时候,用一个全局的this对象指向要用的目标函数就行了。

 当然也可以把变量赋值给全局this对象的一个属性,这个属性可以自己定义,这个属性在其他函数里面也可以用。但是JavaScript里面的对象和变量都用var来定义,所以有时候如果不清楚得到的结果的类型会分不清赋值的是对象还是变量。

 具体代码: this.ske_comp = ske_anim_comp;

4.创建一个 play_spineboy_walk的函数

5.在play_spineboy_walk函数里面实现动画的清零和播放,这个方法是Cocos Creator提供的,可以在官方api找到。

 this.ske_comp.clearTrack(0);      //队列中的指定的动画将被清除,这里清除0号位置的动画。
 this.ske_comp.setAnimation(0,"walk",true);   //设置播放第几个骨骼动画,0是把它放在要播放动画的队列中的第0个的位置,“walk”是骨骼动画动作的名字,true是是否循环播放。

6.在onload方法里面写一下这个代码,来调度一个只运行一次的回调函数。

 this.scheduleOnce(this.play_spineboy_walk.bind(this));

注意:

1.如果在动画子节点里面设置播放的动画动作为None,而在UI_Root节点上的脚本代码却在onLoad方法里面用this.paly_spineboy_walk()方法来设置播放的动画是播不了的,因为creator会先处理UI_Root节点的脚本,再处理子节点的脚本,相当于用代码设置好的要播的动画,被动画子节点的设置给清除了。而我们用回调函数且只调用一次,使它调用完UI_Root节点上的脚本后就不在理会子节点的脚本,这样就可以播放我们想要播放的指定动作了。

2.在使用this.scheduleOnce(this.play_spineboy_walk.bind(this))的时候一定要注意加一个bind(this),这是JavaScript最难的地方,这里如果不加bind(this),play_spineboy_walk函数里面的this就不是全局的this,我是这样理解的,因为在JavaScript里面,函数名:function()这样写的函数也算是一个对象,这时候如果使用两次this.第一次this.play_spineboy_walk指定了play_spineboy_walk这个函数对象,而下一次的this,也就是play_spineboy_walk内部的this指的就是它自己这个函数对象,this.ske_comp就不存在,所以要用bind(this)来让play_spineboy_walk方法里面的this和调用play_spineboy_walk的this的性质一样,都是指向全局对象的this。

完整代码:

cc.Class({
extends: cc.Component,   properties: {
    // foo: {
    // default: null,
    // url: cc.Texture2D, // optional, default is typeof default
    // serializable: true, // optional, default is true
    // visible: true, // optional, default is true
    // displayName: 'Foo', // optional
    // readonly: false, // optional, default is false
    // },
    // ...
  },   // use this for initialization
  onLoad: function () {
    var spineboy_anim = cc.find("UI_Root/anchor_lb/spineboy");
    var ske_anim_comp = spineboy_anim.getComponent(sp.Skeleton);     this.ske_comp = ske_anim_comp;     this.scheduleOnce(this.play_spineboy_walk.bind(this));     //this.paly_spineboy_walk();
    //console.log(ske_anim_comp);
  },   play_spineboy_walk: function(){
    this.ske_comp.clearTrack(0);             //队列中的指定的动画将被清除,这里清除0号位置的动画。
    this.ske_comp.setAnimation(0,"walk",true);     //设置播放第几个骨骼动画,0是把它放在要播放动画的队列中的第0个的位置,“walk”是骨骼动画动作的名字,true是是否循环播放。
  },   // called every frame, uncomment this function to activate update callback
  // update: function (dt) {   // },   on_home_start: function(){ //切换到开始的场景
    cc.director.loadScene("startscene");
  },
});

关于Cocos Creator用js脚本代码播放骨骼动画的步骤和注意事项的更多相关文章

  1. 引用第三方高德地图接口---使用js脚本进行开发地图定位的步骤

    ①在高德地图开发平台注册一个账号,获取key ②添加新的key ③引入map插件 ④复制过来map的脚本代码和编写搜索框 <script type="text/javascript&q ...

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

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

  3. .net 用户控件ascx.cs注册js脚本代码无效果

    在.net web项目中碰到一个比较奇怪的问题,网上没找到解决方案,先自己mark一下 问题描述: 添加一个用户控件ascx,在后端.cs添加js注册脚本,执行后没有弹出框 注册脚本为: this.P ...

  4. ASP.NET后台输出js脚本代码

    利用asp.net输出js我们大多数都会直接使用Respone.Write()然后根js格式的代码,再在页面调用时我们直接这样是完全可以实现的,下面我来给大家介绍另一种方法 我是我最初的想法以下是代码 ...

  5. php使用正则过滤js脚本代码实例

    匹配的规则不能用 "/<script.*<\/script>/i",因为它不能匹配到换行符,那么多行js就匹配不掉了. 要用 "/<script[ ...

  6. js脚本代码调试小技巧

    以前写js代码调试代码查看数据是否正确的时候不知道F12(开发者工具),都是alert(xxx)或者console.log(xxx), 现在知道还可以用document.write或者try...ca ...

  7. 总结ASP.NET C#中经常用到的13个JS脚本代码

    1.按钮前后台事件 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click ...

  8. 【XP-IE8】XP系统的IE8无法正常访问图片,按钮无反应,不执行JS脚本代码

    环境: Windows XP ,自带的是IE6,另外安装的 IE8 . 状况: 使用IE8浏览内网网站,点击登录按钮,没有反应.滚动图片新闻不显示.但使用Chrome浏览器,一切正常,说明是IE8某处 ...

  9. rem布局js脚本代码

    目前代码在750屏幕分辨率下是十倍 基本上使用iphone是375宽度 所以就是20倍 图片背景可以使用二倍图 (function (doc, win) { var docEl = doc.docum ...

随机推荐

  1. Python3 列表 copy() 方法

    描述 Python3 列表 copy() 方法用于复制(浅拷贝)列表(父不变,子变),类似于 a[:]. 语法 copy() 方法语法: L.copy() 参数 无. 返回值 返回复制(浅拷贝)后的新 ...

  2. Asp.net 用户控件和自定义控件注册

    在ASPX页中注册用户控件的方法 <%@ Register Src="ListPicker.ascx" TagName="ListPicker"  Tag ...

  3. Git 基本分支规范

    基本代码分支应该分为两类,一类是主要分支,包括线上主分支 Master 和开发主分支Develop:另一类是辅助分支,包括测试分支 Release,线上紧急修复分支 Hotfix,以及功能开发分支 F ...

  4. 安装composer slim(php web api micro services)

    1. 安装php7 2. 下载 https://getcomposer.org/composer.phar 3. 开启ssh, 在 php.ini中.extension=C:\Program File ...

  5. Spring Boot 2.0官方文档之 Actuator(转)

    执行器(Actuator)的定义 执行器是一个制造业术语,指的是用于移动或控制东西的一个机械装置,一个很小的改变就能让执行器产生大量的运动. An actuator is a manufacturin ...

  6. 《Effective Java》读书笔记三(类和接口)

    No13 使类和成员的可访问性最小化 要区别设计良好的模块与设计不好的模块,最重要的因素在于,这个模块对于外部的其他模块而言,是否隐藏其内部数据和其他实现细节.模块之间只通过它们的API进行通信,一个 ...

  7. C++防止头文件反复包括

    两种方法: (1)#pragma once. (2)ifndef/define/endif 差别: (1)#pragma once是编译器相关的.有的编译器支持,有的编译器不支持: (2)#ifnde ...

  8. [Jobdu] 题目1499:项目安排

    题目描述: 小明每天都在开源社区上做项目,假设每天他都有很多项目可以选,其中每个项目都有一个开始时间和截止时间,假设做完每个项目后,拿到报酬都是不同的.由于小明马上就要硕士毕业了,面临着买房.买车.给 ...

  9. node.js 使用ejs模板引擎时后缀换成.html

    这是一个小技巧,看着.ejs的后缀总觉得不爽,使用如下方法,可以将模板文件的后缀换成我们习惯的.html. 1.在app.js的头上定义ejs: 代码如下: var ejs = require('ej ...

  10. 将Java项目从maven迁移到gradle

    将Java项目从maven迁移到gradle 如何将一个java项目从maven迁移到gradle呢?gradle集成了一个很方便的插件:Build Init Plugin,使用这个插件可以很方便地创 ...