javascript - How do I move Phaser.Game to the center of a browser? - Stack Overflow

admin管理员组

文章数量:1353150

I'm new to JS/phaser and just create a Phaser.Game with

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

The game is created top left but I would like to have it placed in the center of a browser.

I checked the API and nothing looks relevant:

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

Could someone tell me how do I do so?

I'm new to JS/phaser and just create a Phaser.Game with

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

The game is created top left but I would like to have it placed in the center of a browser.

I checked the API and nothing looks relevant:

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

Could someone tell me how do I do so?

• javascript
• phaser-framework

Share Improve this question Follow asked Jul 12, 2018 at 15:23 RahnRahn 5,42544 gold badges3636 silver badges7272 bronze badges 3

• 2 Probably something along the lines of <canvas style="margin:auto;"></canvas>. It's a CSS issue, not really a Phaser issue. – zero298 Commented Jul 12, 2018 at 15:25
• have you checked this. Does it help? – Federico klez Culloca Commented Jul 12, 2018 at 15:25
• @FedericoklezCulloca Ahh! It helps! – Rahn Commented Jul 12, 2018 at 15:30

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Using Laravel 8 and [email protected]

The solution found here worked for me. The other answers provided in this thread did not (but did point me in the correct direction).

canvas {
display : block;   
margin : auto;
}

Thanks to this link provided by @FedericoklezCulloca.

add

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

to function update and the Phaser.Game will be in the middle.

In this example the game will be centered but the logo is at 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./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./ajax/libs/phaser-ce/2.11.0/phaser.js"></script>

Use game config options to work with size and scale

const gameConfig: Phaser.Types.Core.GameConfig = {
    parent: 'game',
    scale: {
        mode: Phaser.Scale.RESIZE, // you can find another types in Phaser.Scale.ScaleModeType: RESIZE | FIT | ENVELOP ...
        autoCenter: Phaser.Scale.CENTER_BOTH,
    },
    ...yourRest
}

Also I remend to add css to your :

#id {
  width: 100vw; // you can skip it
  height: 100vh; // you can skip it
  display: flex;
  align-items: center;
  justify-content: center;

  canvas {
    padding: 0 !important;
    margin: 0 !important;
  }
}

本文标签： javascriptHow do I move PhaserGame to the center of a browserStack Overflow