还不会cocos实现截图?快点进来看看吧
前言
在之前,用CocosCreator制作的游戏,截图功能的实现是一个比较麻烦的地方,之前的官方文档也没有相关资料,只有论坛大神给出的一些解决方案。后来cocos更新了2.0版本,camera组件大改,截图功能也有了官方的解决方案,详情请见这里。不过本文讨论的不是h5或是原生平台,以上平台可以参考上面官方文档。
开始
微信小游戏其实已经给开发者准备了相关的截图api–Canvas.toTempFilePath,你们可以先进去看看文档关于各个参数的解释。这个函数的作用是,在当前的Canvas指定一个区域(没有参数情况下则截取整个Canvas)来截图,最后返回一个图片临时路径。根据不同的需求来使用函数返回的路径图片。
需求Ⅰ 预览所截的图,并保存图片
这里需要配合微信api的另一个函数wx.previewImage,同理可先进去看看文档怎么解释的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| wechat_download() { let canvas = cc.game.canvas; let rate = this.wechat_canvas.parent.width / canvas.width; let width = this.wechat_canvas.width / rate; let height = this.wechat_canvas.height / rate;
canvas.toTempFilePathSync({ x: canvas.width / 2 - this.wechat_canvas.width / rate / 2, y: canvas.height / 2 - (this.wechat_canvas.height / 2 + this.wechat_canvas.y) / rate, width: width, height: height, destWidth: width, destHeight: height, success : (res)=> { wx.previewImage({ current: res.tempFilePath, urls: [res.tempFilePath] }) } }) },
|
上面是我调用的过程,其中要注意的是,不同设备适配的时候会将canvas拉伸,所以不可以直接用我们在cocos里的尺寸,这里我先计算放缩的比例rate,再根据rate调整截图位置和截图区域大小。
需求 Ⅱ 根据截图分享小游戏给好友
相关函数wx.shareAppMessage
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| shareFriend() { let canvas = cc.game.canvas; let rate = this.wechat_canvas.parent.width / canvas.width; let width = this.wechat_canvas.width / rate; let height = this.wechat_canvas.height / rate;
canvas.toTempFilePathSync({ x: canvas.width / 2 - this.wechat_canvas.width / rate / 2, y: canvas.height / 2 - (this.wechat_canvas.height / 2 + this.wechat_canvas.y) / rate, width: width, height: height, destWidth: 500, destHeight: 400, success: (res) => { wx.shareAppMessage({ imageUrl: res.tempFilePath }) } }) },
|
使用方法其实和上面差不多,注意目标尺寸最好是5:4吧
总结
调用微信api的话截图比较简单,但需要注意位置的定位和canvas的转换,还有一点,上述转发图片功能我测试的时候,用游客appid是不能用的,所以需要自己去申请一个appid才能使用shareAppMessage函数。