实战微信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>

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