1. spine骨骼动画工具

骨骼动画: 把动画打散, 通过工具,调骨骼的运动等来形成动画
spine是一个非常流行的2D骨骼动画制作工具
spine 动画美术人员导出3个文件:
    (1) .png文件:动画的”骨骼”的图片集;
    (2).atlas文件: 每个骨骼在图片集里面位置,大小;
    (3).json文件: 骨骼动画的anim控制文件,以及骨骼位置等信息;
骨骼动画导入: 直接把三个文件拷贝到项目的资源目录下即可;
使用骨骼动画 2种方式:
    (1) 直接拖动到场景;
    (2) 创建一个节点来添加sp.Skeleton组件;

2. sp.Skeleton

sp.Skeleton: 控制面板属性:
    Skeleton Data: 骨骼的控制文件.json文件;
    Default Skin: 默认皮肤;
    Animation:  正在播放的动画;
    Loop: 是否循环播放;
    Premuliplied Alpha 是否使用贴图预乘;
   TimeScale: 播放动画的时间比例系数;
    Debug Slots: 是否显示 Slots的调试信息;
    Debug Bone: 是否显示Bone的调试信息;
sp.Skeleton重要的方法: Skeleton是以管道的模式来播放动画,管道用整数编号,管道可以独立播放动画,Track;
    (1)clearTrack(trackIndex): 清理对应Track的动画
    (2)clearTracks(); 清楚所有Track动画
    (3)setAnimation(trackIndex, “anim_name”,  is_loop)清楚管道所有动画后,再从新播放
    (4)addAnimation(trackIndex, “anim_name”,  is_loop);往管道里面添加一个动画;

3. 动画事件监听

setStartListener: 设置动画开始播放的事件;
setEndListener : 设置动画播放完成后的事件;
setCompleteListener: 设置动画一次播放完成后的事件;

代码示例: game_scene.js

// Learn cc.Class:
// - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html
// - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html
// Learn Attribute:
// - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
// - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
// - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
extends: cc.Component,

properties: {
// foo: {
// // ATTRIBUTES:
// default: null, // The default value will be used only when the component attaching
// // to a node for the first time
// type: cc.SpriteFrame, // optional, default is typeof default
// serializable: true, // optional, default is true
// },
// bar: {
// get () {
// return this._bar;
// },
// set (value) {
// this._bar = value;
// }
// },

//编辑器绑定
ske_anim: {
type: sp.Skeleton,
default: null,
},

},

// LIFE-CYCLE CALLBACKS:

onLoad () {

//代码获取
var spine = this.node.getChildByName("spine");
this.ske_comp = spine.getComponent(sp.Skeleton);

//事件
this.ske_comp.setStartListener(function() {
console.log("play start !!!!!!!!!!");
});
this.ske_comp.setCompleteListener(function() {
console.log("play once !!!!!!!!!!");
});

},

enter_click() {

//清理动画播放管道
// this.ske_comp.clearTracks();
this.ske_comp.clearTracks(0);//指定管道的索引
//end

//step1 播放入场动画
this.ske_comp.setAnimation(0, "in", false); //将管道清空,再加入
this.ske_comp.addAnimation(0, "idle_1", true); //直接加入管道队列
//end

//step 播放我们的idle

},

start () {

},

// update (dt) {},
});
---------------------

spine骨骼动画组件使用详解的更多相关文章

  1. 使用spine骨骼动画制作的libgdx游戏

    (官网:www.libgdx.cn) Super Spineboy是一个使用Spine和libgdx开发的跨平台游戏(Windows,Mac,Linux),Spine是一个2D游戏动画工具.Super ...

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

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

  3. [安卓基础] 009.组件Activity详解

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  4. 第15.10节 PyQt(Python+Qt)入门学习:Qt Designer可视化设计界面组件与QWidget类相关的组件属性详解

    PyQt学习有阵子了,对章节的骨架基本考虑好了,准备本节就写组件的属性的,结果一是日常工作繁忙,经常晚上还要加班,二是Qt的组件属性很多,只能逐一学习.研究和整理,花的时间有点长,不过终于将可视化设计 ...

  5. 转 Android Activity之间动画完整版详解

    标签:Android Activity动画详解 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://mzh3344258.blog.5 ...

  6. 【转】android四大组件--ContentProvider详解

    一.相关ContentProvider概念解析: 1.ContentProvider简介在Android官方指出的Android的数据存储方式总共有五种,分别是:Shared Preferences. ...

  7. 第15.12节PyQt(Python+Qt)入门学习:可视化设计界面组件布局详解

    一.引言 在Qt Designer中,在左边部件栏的提供了界面布局相关部件,如图: 可以看到共包含有四种布局部件,分别是垂直布局(Vertical Layout).水平布局(Horizontal La ...

  8. 如何给spine骨骼动画挂载粒子特效

    目的是要把粒子挂载到骨骼动画的某个一个部件上,其实最主要是找对位置. 预览效果,左手红火,右手蓝火,很炫吧:) //init bool HelloWorld::init() { /////////// ...

  9. 在libGDX中使用Spine骨骼动画

    首先,github是个宝库,实践流的读者可以直接看例子进行学习 1.这是Spine官方给出的例子 https://github.com/EsotericSoftware/spine-superspin ...

随机推荐

  1. MYSQL利用Navicat对含有Bold字段表进行导入导出

    MYSQL中含有Blob字段是一件挺麻烦的事情,导出导入不方便.我介绍我是怎么做的. 1.在MYSQL的my.ini最后中加入一行配置max_allowed_packet = 100M,重新启动MYS ...

  2. border-image 和 border-color 不能同时使用问题

    遇到如下问题: UI 给的设计,某部分,上边框为 图片,下边框为灰色横线. 看到这个的第一反应是,上边框用 border-image ,为了只让上边框显示图片,所以只给上边框宽度为所需宽度,我的图是 ...

  3. css高级:font-size

    body{ font:62.5%/1.6em "Lucida Grande",Verdana,Geneva,Helvetica,Arial,sansserif; }//font-s ...

  4. 2014年最简单、快捷的美股Scottrade开户攻略

    [开篇重点提示] 1.scottrade是国内用户用得最多的美股证券交易平台. 2.不用邮寄纸质资料,网上开户全搞定. 3.申请表格填写优惠代码,获取免费3次交易费用,鄙人的推荐优惠代码是 87195 ...

  5. BNU 13064 Dice (I) 前缀和优化DP

    Dice (I)   You have N dices; each of them has K faces numbered from 1 to K. Now you have arranged th ...

  6. js 实现二叉排序树

    二叉排序树或者是一棵空树,或者是具有下列性质的二叉树: (1)若左子树不空,则左子树上所有结点的值均小于或等于它的根结点的值: (2)若右子树不空,则右子树上所有结点的值均大于或等于它的根结点的值: ...

  7. bzoj 1022 小约翰的游戏John

    题目大意: n堆石子,两个人轮流取石子,每个人取的时候,可以随意选择一堆石子 在这堆石子中取走任意多的石子,但不能一粒石子也不取,取到最后一粒石子的人算输 思路: 首先当每堆石子数都为1时,偶数为先手 ...

  8. AD9850驱动程序--MSP430版本

    前段时间忙着画板子搞运放搞滤波了,程序更新的少,发现MSP430不是太好用,尤其Timer,不过也与我使用内部晶振有关,产生正玄波之前用MSP430发出PWM,再进行滤波变为正弦波太麻烦了,这次改用D ...

  9. MySQL 1366错误解决办法

    MySQL 1366错误大致描述如下 SQL Error: 1366: Incorrect string value: "xE8xAFxA6xE7xBBx86-" for colu ...

  10. vue中时间控件绑定多个输入框

    首先去下载laydate时间控件,引入到相应的模板中 <input type="text" val-required="" value="&qu ...