Spine做骨骼动画是比较流行的,使用起来可能相对复杂,但功能毕竟强大,所以市场占有率较大。
在unity、cocos2d、starling中使用spine已经很成熟了,而HTML5这一块可能刚刚起步,暂时spine对这一块也没有做得非常完善。
整理了一下,找了一些比较好的方法,分享一下。
createjs
这是HTML5动画引擎比较好用,也比较小的一个,如果项目纯碎为了播放骨骼动画,而不是一个游戏,强烈推荐用这个。缺点是对webgl支持不好,官方也没什么动作去做好webgl的支持。
代码比较复杂,是我从github找到的一个项目,还没有把功能封装起来,不过还好,功能不算太复杂,可以自行看看源代码,做点封装,可以参考下边即将讲的min2d。
步骤大概是:
- 引入spine官方的spine.js
- 读取纹理atlas,根据atlas部件数量,建立相应的createjs图元和从属关系
- 读取动画json,新建spine.Skeleton、spine.AnimationState等
- 调用state.addAnimationByName,播放某个动作序列
代码较长,就不贴了。
DEMO:http://kenkozheng.github.io/spine/easeljs.html
源代码:https://github.com/kenkozheng/HTML5_research/tree/master/spine-min2d-createjs-pixi
min2d
这。。。这不是一个出名流行的动画库或者游戏引擎。。。暂时没有人认识这货。
因为这是我暂时自娱自乐做的动画/游戏引擎,目标是做极简的webgl/canvas2d图形库,抛弃一切纷繁复杂的功能,只保留最核心的动画播放。
相对市面支持webgl的动画库中,min2d暂时应该是非常非常小的,是不是最小不清楚。混淆后只有13KB,而createjs达到100+KB,PIXI是287KB,更不用说白鹭引擎和cocos2d-js了,相对而言,他们就是巨无霸。
当然,这个项目,主要目的是为了今年即将迎来的移动webgl浪潮,为普通H5页面做高效动画做准备的,并不是针对游戏。
暂时还在开发中,所以暂时还没开放源码。相信未来会像Fanvas(flash转H5动画http://code.tencent.com/fanvas.html)一样,走腾讯官方开源,敬请期待。
整个思路跟createjs类似,但我做了一层封装,所以播放spine动画会相对简单一些。
- 引入min2d.min.js
- 引入spine.js
- 引入spine-min2d插件
- 新建min2d.Spine,添加到舞台,增加动作,即可播放
var stage = this.stage = new min2d.Stage(this.canvas, 30);
var dancer = this.dancer = new min2d.Spine(this.atlas, this.xhr.response, this.image);
stage.addChild(dancer); dancer.state.addAnimationByName(0, ‘move’, true, 0);
DEMO:http://kenkozheng.github.io/spine/min2d.html
源代码:https://github.com/kenkozheng/HTML5_research/tree/master/spine-min2d-createjs-pixi
补充一句:createjs和min2d都只支持region类型的attachment,不支持skinnedmesh。可以理解为,只支持最简单的零件式spine动画,不支持spine蒙皮骨骼动画。
PIXI
这个也是一个流行的2d动画/游戏引擎,体积不算太大,功能还算齐全,支持canvas2d和webgl。
https://github.com/pixijs/pixi.js
https://github.com/pixijs/pixi-spine
相对上述两个方案来说,PIXI就能全面支持spine,这也是2015年年中才加入的支持。这归功于pixi和spine两个团队的人走得比较近吧。
使用步骤:
- 引入pixi、pixi-spine
- load json
- new PIXI.spine.Spine
- state.addAnimationByName播放动画
- 逐帧重绘(pixi没有提供现成的定时器,有点奇怪)
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1">
<meta charset="UTF-8">
<title>spine-js</title>
<script src="js/pixi/pixi.js"></script>
<script src="js/pixi/pixi-spine.js"></script>
</head>
<body onLoad="init()">
<div id="wrapper">
</div>
<script>
function init() {
var renderer = new PIXI.CanvasRenderer(400, 600);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
PIXI.loader.add('spineCharacter', 'data/Boy_ShortsShirt_Angry.json')
// PIXI.loader.add('spineCharacter', 'data/skeleton.json')
.load(function (loader, resources) {
var animation = new PIXI.spine.Spine(resources.spineCharacter.spineData);
stage.addChild(animation);
// animation.state.addAnimationByName(0, 'hiphop02', true, 0);
animation.state.addAnimationByName(0, 'angry_sender_0', true, 0);
// animation.state.addAnimationByName(0, 'angry_recipient_1', true, 0);
animation.x = 100;
animation.y = 300;
animation.scale.x = 0.5;
animation.scale.y = 0.5;
animate(); function animate() {
requestAnimationFrame(animate);
renderer.render(stage);
}
}); }
</script>
</body>
</html>
DEMO:http://kenkozheng.github.io/spine/pixi.html
源代码:https://github.com/kenkozheng/HTML5_research/tree/master/spine-min2d-createjs-pixi