HTML使用Phaser 引擎显示的图片很模糊

如我
  • 4
新手上路,请多包涵

在使用Phaser游戏引擎之后,原本很高清的图片在渲染之后都会变得很模糊,有谁遇到过这种问题吗?下面是创建实例的代码:
//创建游戏实例
const game = new Phaser.Game(width, height, Phaser.AUTO, '#game');
//加载图片
game.load.image('publisher','../images/publisher.png');
麻烦有经验的大佬指导一下。。。。

回复
阅读 1.9k
2 个回答
如我
  • 4
新手上路,请多包涵
✓ 已被采纳

原来是设置了Phaser的分辨率问题
如果在手机端,建议改成1080 * 1920的分辨率。
const game = new Phaser.Game(1080, 1920, Phaser.AUTO, '#game');
改变分辨率之后图片就变得清晰多了。

这个问题其实和canvas模糊是一回事

最简单有效的解决办法是你在设置phaser画布宽高的时候乘以设备的devicePixelRatio
然后phaser初始化时候是可以设置css样式和父级的,将parent设置为你需要展示的大小。canvasStyle设置为width:100%;height:100%即可
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏