集成骨骼动画Spine的几点经验

来源：互联网发布：阿里妈妈知乎编辑：程序博客网时间：2024/06/09 16:53

最近开始用cantk做些复杂的游戏，其中一个游戏的DragonBones骨骼动画的JSON文件就达600K，导出之后显示各种不正常，可能是太复杂了，有些方面达到了DragonBones的极限。拿到官方的补丁仍然还有些问题，不爽的是新版本有一万多行代码，是老版本的三倍之多。据说骨骼动画Spine做得更好，而且Spine.js只有两千多行代码，决定为cantk加上Spine的支持。

为cantk写一个插件支持Spine是非常简单的，只要增加一个ShapeCreator就行了：

function UISpineCreator() {    var args = ["ui-spine", "ui-spine", null, true];    ShapeCreator.apply(this, args);    this.createShape = function(createReason) {        var g = new UISpine();        return g.initUISpine(this.type, 200, 200);    }    return;}ShapeFactoryGet().addShapeCreator(new UISpineCreator());

在集成过程中，下面几点比较有意思：

一、使用TexturePacker打包图片。缺省例子的图片是分离的，有好几十张小图片，这并非好的做法。我决定像DragonBones一样把它们打包成一张大图。Spine.js写得非常好，这个改动很轻松:

   var rootPath = this.textureJsonURL +'#';    var json = new spine.SkeletonJson({        newRegionAttachment: function (skin, name, path) {            var src = rootPath + path + ".png";            var attachment = new spine.RegionAttachment(name);            attachment.rendererObject = WImage.create(src);            return attachment;        },        newBoundingBoxAttachment: function (skin, name) {            return new spine.BoundingBoxAttachment(name);        }    });

WImage是对HTML Image的包装，支持TexturePacker打包的图片和几种自动切图的方式。

二、播放完成时的回调函数。游戏通常需要在播放一个动作之后做些处理，比如播放声音或发射武器之类的东西。官方例子里并没有这种用法，看了一下实现的代码，里面已经提供相应的机制：

UISpine.prototype.gotoAndPlay = function(animationName, repeatTimes, onDone, onOneCycle) {    var me = this;    this.animationName = animationName;    if(this.spineState) {        var track = this.spineState.setAnimationByName(0, animationName, true, 0);        track.repeatTimes = repeatTimes ? repeatTimes : 0xffffffff;        track.onComplete = function(i, count) {            this.repeatTimes--;            if(this.repeatTimes <= 0) {                this.loop = false;                if(onOneCycle) {                    onOneCycle.call(me);                }                if(onDone) {                    onDone.call(me);                }            }            else {                if(onOneCycle) {                    onOneCycle.call(me);                }            }        }    }    return this;}

三. 缩放的处理。我发现只有在加载时才能指定scale，不太灵活，所以决定在绘制时自己缩放吧：

    var ay = this.h;    var ax = this.w >> 1;    var scale = this.animationScale;    this.update(canvas);    canvas.translate(ax, ay);    canvas.scale(scale, scale);    ...

参考：

CanTK: https://github.com/drawapp8/cantk

Spine Runtimes: https://github.com/EsotericSoftware/spine-runtimes/

0 0