實戰微信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>

好了，骨骼動畫的問題就搞定了。