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

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

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

实战微信JS SDK开发：贺卡制作与播放（1)
前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...
微信JS SDK开发共享问题小结
首先,我要吐槽一下这个SDK,看了第一遍,完全不知所云,一会获取这个,一会获取那个,也没确切的告诉怎么获取. 和腾讯客服(拿钱不干事的好工作)讨教,人家不懂技术,不知道怎么解决,也没有相关技术人员对应 ...
微信JS SDK开放，前端开发者“鸡冻”了！
HTML5又一次逆袭了,其实之前微信也是有一些JS API的,比如分享.但这次一股脑开放了拍摄.录音.语音识别.二维码.地图.支付.分享.卡券等几十个API,这条消息不需宣传,瞬间就占满了HTML5从 ...
使用微信js sdk关于选择及上传图片至腾讯云COS
使用微信js sdk关于选择及上传图片至腾讯云COS 使用微信js sdk关于选择及上传图片至腾讯云COS 背景名词参考效果图展示开发步骤 1:概要步骤 2:上代码结束: 使用微信js sd ...
微信-js sdk invalid signature签名错误问题解决
微信-js sdk invalid signature签名错误问题解决参考文章: (1)微信-js sdk invalid signature签名错误问题解决 (2)https://www.cn ...
微信js sdk 分享失败有时候好有时候坏
微信js sdk 分享失败有时候好有时候坏用了一个www开头的域名和一个xx.com的域名两个在解析上有问题. 实践是www.xx.com的比较稳定转载于:https://www.c ...
微信js sdk 授权上传头像下载代码片段和注意事项
/* * 描述:当前页授权 * @param url 例:index.html / 如果有参数,需加密index.html?id=1 */ 1.对需要运用js sdk的页面授权 get ...
基于Arduino Uno开发板制作音乐播放器
基于Arduino Uno开发板制作音乐播放器本文将基于Arduino开发板实现一个音乐播放器. 利用Arduino Uno读取sd卡模块中内存卡的音乐,传输信号到扬声器进行播放. 一.项目软硬件简 ...
php转发朋友圈缩略图片,解释最全的，手把手教的微信JS sdk分享设置教程-微信分享插件PHP源码JS-SDK接口，分享到朋友圈转发好友带缩略图...
亲们,此文是我上传的有关微信分享插件PHP源码JS-SDK接口的.rar和.zip的说明使用文件许多朋友都面临自己编写的网站通过微信转发时,无论是分享微信好友或是微信朋友圈时,出现无缩略图显示的问题 ...

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

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

最新文章

热门文章