javascript - 如何使用 Phaser 将 CocoonJS Canvas+ 中的 Canvas 居中

Question

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

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

下图是 S3 的屏幕截图(也在 iPad 上复制)，显示 Canvas 正确贴合，但未居中。有谁知道如何将 Canvas 居中，以便两侧都有黑条？我在 cocoon 启动器应用程序上更改的唯一设置是允许不是 2 的幂的图像。

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;