如何将 Phaser.Game 移动到浏览器的中心？

Question

我是 JS/phaser 的新手，刚用

创建了一个 Phaser.Game

var game = new Phaser.Game(600, 490);

游戏是在左上角创建的，但我想将它放在浏览器的中央。

我检查了 API，但没有相关内容：

new Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)

有人能告诉我该怎么做吗？

Answer 1

感谢@FedericoklezCulloca 提供的this link。

添加

game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.scale.refresh();

函数 update 并且 Phaser.Game 将在中间。

Answer 2

在此示例中，游戏将居中但徽标位于 0,0

var game = new Phaser.Game(640, 480, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });

        function preload() {

            game.load.crossOrigin = "Anonymous";
            game.load.image('logo', 'https://cdn.rawgit.com/photonstorm/phaser-examples/master/examples/assets/sprites/phaser2.png');

        }

        function create() {
            game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
            game.scale.pageAlignHorizontally = true;
            game.scale.pageAlignVertically = true;
            var logo = game.add.sprite(0, 0, 'logo');

        }

    * {
    margin: 0;
    padding: 0;
  }

<meta name="viewport" content="initial-scale=1 user-scalable=no" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.11.0/phaser.js"></script>

Answer 3

使用Laravel 8和phaser@3.24.1

找到的解决方案 here 对我有用。此线程中提供的其他答案没有（但确实为我指明了正确的方向）。

canvas {
display : block;   
margin : auto;
}

如何将 Phaser.Game 移动到浏览器的中心？

How do I move Phaser.Game to the center of a browser?

javascript

phaser-framework