spine骨骼动画组件使用详解
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骨骼动画组件使用详解的更多相关文章
- 使用spine骨骼动画制作的libgdx游戏
(官网:www.libgdx.cn) Super Spineboy是一个使用Spine和libgdx开发的跨平台游戏(Windows,Mac,Linux),Spine是一个2D游戏动画工具.Super ...
- 记录 Spine骨骼动画导入unity 步骤[unity3d 4.6.6版本 2d动画]
1:准备好unity使用Spine所需要的运行库,可到如下地址 https://github.com/EsotericSoftware/spine-runtimes/tree/master/spine ...
- [安卓基础] 009.组件Activity详解
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- 第15.10节 PyQt(Python+Qt)入门学习:Qt Designer可视化设计界面组件与QWidget类相关的组件属性详解
PyQt学习有阵子了,对章节的骨架基本考虑好了,准备本节就写组件的属性的,结果一是日常工作繁忙,经常晚上还要加班,二是Qt的组件属性很多,只能逐一学习.研究和整理,花的时间有点长,不过终于将可视化设计 ...
- 转 Android Activity之间动画完整版详解
标签:Android Activity动画详解 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://mzh3344258.blog.5 ...
- 【转】android四大组件--ContentProvider详解
一.相关ContentProvider概念解析: 1.ContentProvider简介在Android官方指出的Android的数据存储方式总共有五种,分别是:Shared Preferences. ...
- 第15.12节PyQt(Python+Qt)入门学习:可视化设计界面组件布局详解
一.引言 在Qt Designer中,在左边部件栏的提供了界面布局相关部件,如图: 可以看到共包含有四种布局部件,分别是垂直布局(Vertical Layout).水平布局(Horizontal La ...
- 如何给spine骨骼动画挂载粒子特效
目的是要把粒子挂载到骨骼动画的某个一个部件上,其实最主要是找对位置. 预览效果,左手红火,右手蓝火,很炫吧:) //init bool HelloWorld::init() { /////////// ...
- 在libGDX中使用Spine骨骼动画
首先,github是个宝库,实践流的读者可以直接看例子进行学习 1.这是Spine官方给出的例子 https://github.com/EsotericSoftware/spine-superspin ...
随机推荐
- MYSQL利用Navicat对含有Bold字段表进行导入导出
MYSQL中含有Blob字段是一件挺麻烦的事情,导出导入不方便.我介绍我是怎么做的. 1.在MYSQL的my.ini最后中加入一行配置max_allowed_packet = 100M,重新启动MYS ...
- border-image 和 border-color 不能同时使用问题
遇到如下问题: UI 给的设计,某部分,上边框为 图片,下边框为灰色横线. 看到这个的第一反应是,上边框用 border-image ,为了只让上边框显示图片,所以只给上边框宽度为所需宽度,我的图是 ...
- css高级:font-size
body{ font:62.5%/1.6em "Lucida Grande",Verdana,Geneva,Helvetica,Arial,sansserif; }//font-s ...
- 2014年最简单、快捷的美股Scottrade开户攻略
[开篇重点提示] 1.scottrade是国内用户用得最多的美股证券交易平台. 2.不用邮寄纸质资料,网上开户全搞定. 3.申请表格填写优惠代码,获取免费3次交易费用,鄙人的推荐优惠代码是 87195 ...
- 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 ...
- js 实现二叉排序树
二叉排序树或者是一棵空树,或者是具有下列性质的二叉树: (1)若左子树不空,则左子树上所有结点的值均小于或等于它的根结点的值: (2)若右子树不空,则右子树上所有结点的值均大于或等于它的根结点的值: ...
- bzoj 1022 小约翰的游戏John
题目大意: n堆石子,两个人轮流取石子,每个人取的时候,可以随意选择一堆石子 在这堆石子中取走任意多的石子,但不能一粒石子也不取,取到最后一粒石子的人算输 思路: 首先当每堆石子数都为1时,偶数为先手 ...
- AD9850驱动程序--MSP430版本
前段时间忙着画板子搞运放搞滤波了,程序更新的少,发现MSP430不是太好用,尤其Timer,不过也与我使用内部晶振有关,产生正玄波之前用MSP430发出PWM,再进行滤波变为正弦波太麻烦了,这次改用D ...
- MySQL 1366错误解决办法
MySQL 1366错误大致描述如下 SQL Error: 1366: Incorrect string value: "xE8xAFxA6xE7xBBx86-" for colu ...
- vue中时间控件绑定多个输入框
首先去下载laydate时间控件,引入到相应的模板中 <input type="text" val-required="" value="&qu ...