如何使用 Phaser 在 CocoonJS Canvas+ 中居中画布

Question

我正在尝试使用Phaser 和CocoonJS 创建游戏。除了在使用canvas+ 渲染器在茧上部署游戏时使画布居中之外，一切正常。下面是实现我在网络浏览器中寻找的效果的三行代码，但不是 canvas+。

        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.scale.pageAlignHorizontally = true;
        this.scale.pageAlignVertically = true;

下图是 S3 的屏幕截图（也在 iPad 上复制），显示画布正确贴合，但未居中。有没有人知道如何使画布居中，所以两边甚至都有黑条？我在茧启动器应用程序上更改的唯一设置是允许不是二的幂的图像。

Small project reproducing the problem

Answer 1

我总是在使用 Phaser+Cocoon 的游戏中使用 EXACT_FIT。我认为你应该使用 EXACT_FIT 模式。

将以下代码放入您的启动状态（“roundPixels”不是必需的）：

game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.renderer.renderSession.roundPixels = true;