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

最近开始用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/