您当前的位置: 首页 > 解决方案

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

  • 作者: admin
  • 发布于 2018-07-30 13:56:42
  • 来源:  
  • 栏目:解决方案

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

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

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

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

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

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

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

13.jpg

ios 的截图如下:

14.jpg

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

不过,灵机一动!!!

15.jpg

如果前端接触 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 } 

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

 



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部