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

Phaser 3
1

hi,

i am trying to center my phaser 3 game. I had to comment out my scale code because everytime i uncomment it the page will turn white. If i comment it the game will show on the left side of the screen but uncenterd. I even tried to add a parent above the autocenter code and called it “myGame”. Then on my html page i added a div in the body and named the id “myGame”. Also didn’t work is there a way i can fix this enter code here?

var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: ‘arcade’
},
//SET BACKGROUND COLOR
backgroundColor: 0x27ae60,
//CENTER PAGE.
// scale: {
// parent: “myGame”
// autoCenter: Phaser.Scale.CENTER_BOTH
// },
//set scenes
scene:[GameScene1,GameScene2, GameScene3, GameScene4, GameScene5]

};

var game = new Phaser.Game(config);

html code:
<!doctype html>

Menu body { margin: 0; }
2

Open the browser console and look for errors.

3

So, I tried to center my game in the browser (well basically you want to center canvas element). And I was able to center my game just by using css (in my case I used SCSS, but it really doesnt matter).
My config file looks like this
obrázok
My html looks like this:
obrázok
My DIV with the ID of “game” is the parent for the canvas.
Then the centering part using SCSS:
obrázok
And finally here is the result:

obrázok
obrázok1923×1007 45.5 KB

I’m not sure if you were trying to achieve this, but it worked for me. My game (or canvas) is in the center of the browser. But if you are going to place more elements in HTML (like some header or footer) than you need to optimize whole CSS thing. Also small tip if your game was working and than after some changes in the code the whole page is white than hit F12 to open browser console, usually there will be some errors. Usually if the error is caused by variable/function there will also be the line on which the error is. If you have more questions, I might be able to help you. Hopefully I solved your problem. Good luck :slight_smile:

4

Seems a bit much.
All you need:

canvas {
    display: block;
    margin: auto;
}
1 Like
5

Oh I see, but when I try this canvas is only centered in horizontal way. In my case canvas is centered both horizontal and vertical :thinking: but I like your solution, it is simple, looks like I need to step up my CSS game :smiley:

6

i solved it thank you for your time tho

7

thanks for your help i really appreciate it it worked!

2021-01-07 (4)
2021-01-07 (4)1920×1080 148 KB
2021-01-07 (3)
2021-01-07 (3)1920×1080 193 KB
2021-01-07 (2)
2021-01-07 (2)1920×1080 179 KB
2021-01-07
2021-01-071920×1080 108 KB

8

A better solution without hardcoding width and height.

#phaser-example {
    display:flex;
    width:100vw;
    height:100vh;
}

canvas {
    margin: auto;
}
1 Like
9

Assuming, that you are running a portrait game :
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
},
These, settings will work just fine.
Also, you must also, add :
parent: “className”, as a part of the configurations.

The “className” will be the class_name of the HTML element where you want to inject your Phaser 3 game.

Now, it’s just simple CSS, you can apply to the that

element. :blush:

10

A simpler way to do this is basically just doing this

const config = {
    //any settings
    scale: {autoCenter: Phaser.Scale.CENTER_BOTH}
};
const game = new Game(config);
1 Like