HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画

Spine做骨骼动画是比较流行的,使用起来可能相对复杂,但功能毕竟强大,所以市场占有率较大。

在unity、cocos2d、starling中使用spine已经很成熟了,而HTML5这一块可能刚刚起步,暂时spine对这一块也没有做得非常完善。

整理了一下,找了一些比较好的方法,分享一下。

createjs

这是HTML5动画引擎比较好用,也比较小的一个,如果项目纯碎为了播放骨骼动画,而不是一个游戏,强烈推荐用这个。缺点是对webgl支持不好,官方也没什么动作去做好webgl的支持。

代码比较复杂,是我从github找到的一个项目,还没有把功能封装起来,不过还好,功能不算太复杂,可以自行看看源代码,做点封装,可以参考下边即将讲的min2d。

步骤大概是:

  1. 引入spine官方的spine.js
  2. 读取纹理atlas,根据atlas部件数量,建立相应的createjs图元和从属关系
  3. 读取动画json,新建spine.Skeleton、spine.AnimationState等
  4. 调用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动画会相对简单一些。

  1. 引入min2d.min.js
  2. 引入spine.js
  3. 引入spine-min2d插件
  4. 新建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两个团队的人走得比较近吧。

使用步骤:

  1. 引入pixi、pixi-spine
  2. load json
  3. new PIXI.spine.Spine
  4. state.addAnimationByName播放动画
  5. 逐帧重绘(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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

全响应式web前端开发

本文作者:IMWeb Terrance 原文出处:IMWeb社区 未经同意,禁止转载 ? Responsive web design (RWD) i...

2867
来自专栏无原型不设计

UI设计规范:单选按钮 vs 复选框,没那么简单

无论是网页设计,还是移动app设计,都经常用到单选按钮和复选框这两个组件。这两个组件看似意义明确,很好区分,但在实际设计中却很容易用错,带来不好的用户体验。 ...

2893
来自专栏程序员的知识天地

一个Mac系统,能让程序员编程效率提升30%

Mac 系统一向以提供高效的工作环境著称,iOS、Android和服务端程序员都可以轻松的在Mac上搭建舒适的开发环境。

2182
来自专栏姬小光

姬小光前端小讲堂【第001期】

如果你还不知道前端开发是干嘛的,那美工你一定听说过;如果连美工也没听说过,那姑且就当我是个做网页的好啦~

873
来自专栏星流全栈

2016 JavaScript 技术栈展望

1634
来自专栏FreeBuf

Chrome XSS审计之SVG标签绕过

在一年前,在我的私人Twitter账户 brutal secret ,我分享了一个有趣的方法来通过审计绕过chrome 的xss过滤器。我们将从黑盒测试的角度...

3325
来自专栏互联网杂技

react+redux+webpack教程1

经历了EXT、YUI时代,又经历了Angular时代,我们正在步入React时代。 前端开发框架凭借JS极其灵活强大的特性模样越来越“怪异”,正是这怪异让我们对...

3445
来自专栏原创

基于AngularJS的个推前端云组件探秘

AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发。AngularJS是为了克服HTML在构建应用上的不足而设计...

5178
来自专栏腾讯云商业智能分析团队的专栏

制作地图及常见问题

地图在制作报表中很常见,主要功能是展示区域信息,如展示区域销售信息,用户区域分布情况等。本文介绍一下地图的制作步骤及常见的问题。

1591
来自专栏Coding迪斯尼

寿司快卖,创建一个运行在电脑,手机及Pad上的多屏游戏

本节开始,我们将设计一个养成类游戏。游戏主题是创建一家寿司店,你是主厨,当客户点餐后,你根据菜单配置寿司。我们会先把游戏设计成页面游戏,然后通过不断的调试,将游...

1022

扫码关注云+社区

领取腾讯云代金券