ribbon image search rewind fast-forward speech-bubble pie-graph star

解决微信小游戏排行榜 Android 模糊问题

最近用 Cocos Creator (cc) 开发微信小游戏。由于 微信小游戏存在 主域和子域的隔离;

  • 主域,你的主要游戏场景,和一些交互按钮等内容;

  • 子域,主要用于获取用户数据和排行榜的显示;

微信这样分开也是为了更好地保护用户数据,防止数据泄露。因此一定要合理的设计自己的主域和子域;

凡是设计从微信里获取数据的比如用户头像,游戏成绩等;一定需要在子域的canvas 完成绘制;

实际在完成排行榜的功能时候遇到了一点兼容性的问题,Android 的部分机型(自己这边全部复现)和 iOS 设备上存在画布模糊的问题:

ios 的截图如下:

搜索了一下,发现没有多少人提出这样的问题,但是看别的游戏也存在同样的问题;

不过,灵机一动!!!

如果前端接触 canvas 的话,才开始都会遇到一个问题,就是再 PC 上看着挺好的,但是在移移动端就模糊了,因为这里存在一个 设备上物理像素和设备独立像素(device-independent pixels (dips))的比例 因此你的 canvas 设置的像素要比实际多出一些比如会有:

canvas.width = window.innerWidth * window.devicePixelRatio  

于是照着这个思路,输出了 主域的 canvas 宽度 和 子域的 canvas 宽度,发现 子域的 sharedCanvas 并不是你预期的宽度,因此这个时候你需要手动的将它设置成你在 cocos creator 设置的画布大小比如 750 * 1662 等;

if (typeof sharedCanvas !== 'undefined') {  
  sharedCanvas.width = 750
  sharedCanvas.height = 1662
}

大概完成后就不会有模糊的感觉了~

You Can Speak "Hi" to Me in Those Ways