评论

使用webgl开发微信小游戏绘制开放域解决方案

使用webgl开发微信小游戏绘制开放域解决方案

写在前面的话

在开发微信小游戏时,如果使用 webgl 的绘图方式,在绘制开放域画布 sharedCanvas 时,由于开放域只能绘制到上屏 canvas 中且主域无法得知开放域状态的限制,通常的做法是将 sharedCanvas 转成 texImage2D 绘制到上屏 canvas 中然后不停的绘制,然而 texImage2D 转换是通过CPU提交数据交由GPU进行计算,不停的提交会导致CPU过高,对于经验不足的人来说,性能会很差。

思路

我的做法是反其道而行,上屏 canvas 还是使用 2d 的方式进行绘制,游戏场景则使用离屏 canvas 绘制,这个离屏 canvas 使用 webgl 的方式,然后将这个离屏 canvas 绘制到上屏 canvas 中,canvas 2ddrawImage 方法可以直接将一个 canvas 当成图片进行绘制sharedCanvas 也可以通过 drawImage 方法绘制到上屏 canvas 中去了。

这样可以免去很多复杂的转换,轻松的将开放域画布 sharedCanvas 绘制到上屏 canvas 中去了,还可以绘制游戏中用到的其他的 2d 元素。

小提示:目前这种做法在 Android 中存在BUG,无法正确的绘制,微信小游戏团队正在修复这个问题,目前已经内测通过,下一个 Android 版微信将会修复。


2019年2月20日更新

Android 版微信7.0.3客户端中已经修复了无法正确绘制的BUG,可以尽情玩耍了。

最后一次编辑于  02-20  
点赞 2
收藏
评论