实战微信JS SDK开发：贺卡制作与播放（2)

最近同事用CanTK开发了一个基于微信的贺卡制作APP，我虽然没有参与开发，但是提供CanTK和GameBuilder的技术支持，觉得有些东西比较有意思，写几篇博客和大家分享吧。这个贺卡APP完全开源，有需要的朋友可以随意修改和发布。

CanTK(Canvas ToolKit)是一个开源的游戏引擎和APP框架，是开发HTML5游戏和APP的利器，如果你喜欢它，请在github上给它加星，您的支持是我们努力的动力：https://github.com/drawapp8/cantk
0.先Show一下最终成果:

在线运行：http://gamebuilder.duapp.com/apprun.php?appid=osgames1-821423377846894

在线编辑：http://gamebuilder.duapp.com/gamebuilder.php?appid=osgames1-821423377846894

微信扫码：

今天我们介绍一下骨骼动画：

为了支持骨骼动画，CanTK里集成了DragonBones，通过Gamebuilder添加骨骼动画非常简单，只要两步可以实现：

第一步，从左边的工具栏中拖一个骨骼动画到场景中。

第二步，设置骨骼动画的参数，也就是从dragonebones制作工具中导出的三个文件。

制作贺卡的APP有点特别：拜年的几个卡通人物是骨骼动画，我们允许用户用自己的头像替换这些卡通人物的头像。所以特地在UISkeletonAnimation中加了两个函数（下列代码可以CanTK的github仓库中找到）：

UISkeletonAnimation.prototype.getSlotRect = function(name) {
    if(!this.armature) {
        return null;
    }

    var slotList = this.armature._slotList;
    for(var i = 0; i < slotList.length; i++) {
        var iter = slotList[i];
        if(iter.name === name) {
            var display = iter.getDisplay();
            return display.textureAtlasRect;
        }
    }

    return null;
}

UISkeletonAnimation.prototype.replaceSlotImage = function(name, image, imageRect) {
    if(!this.armature) {
        return this;
    }

    var slotList = this.armature._slotList;
    for(var i = 0; i < slotList.length; i++) {
        var iter = slotList[i];
        if(iter.name === name) {
            iter.image = image;
            iter.imageRect = imageRect;
        }
    }

    return;
}

我们还需要在DragonBones的绘制函数里Hack一下：

<span style="color:#444444;">        function slotDraw(slot, ctx) {
            var display = slot._displayBridge.getDisplay();
            var texture = slot.getDisplay().textureAtlas;

            if(!texture) {
                var armatureDisplay = slot.getDisplay();
                var armature = armatureDisplay.armature;

                if(armature.draw) {
                    armature.draw(ctx);
                }

                return;
            }
            var image = texture.image;
            var r = display.textureAtlasRect;
  
</span><span style="color:#ff0000;">            if(slot.image && slot.imageRect) {
                image = slot.image;
                r = slot.imageRect;
            }</span><span style="color:#444444;">

            ctx.save();
            m.identity();
            m.appendTransform(display.x, display.y, display.scaleX, display.scaleY, 0,
                display.skewX, display.skewY, display.anchorX, display.anchorY);
            ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
            ctx.drawImage(image, r.x, r.y, r.width, r.height, 0, 0, r.width, r.height);
            ctx.restore();
        }
</span>

好了，骨骼动画的问题就搞定了。