如何将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;
}