Center phaser game

Phaser 3
1

Hi I am trying to center the basic phaser tutorial in a website (the tutorial is the one you set up after downloading with the phaser logo bouncing off the screen). I have googled this and found many results but none of them seem to work for me, everyone of them I try the game window no longer shows up. Could someone help me out with another way to do this.

The code I have is below, and it is all contained in the body

 <section id="game">
    <script>

    var config = {
        type: Phaser.AUTO,
        
        width: 800,
        height: 600,
        physics:
        {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene:
        {
            preload: preload,
            create: create
        },
       
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.setBaseURL('http://labs.phaser.io');

        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    }

    function create ()
    {
        
        this.add.image(400, 300, 'sky');

        var particles = this.add.particles('red');

        var emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

        var logo = this.physics.add.image(400, 100, 'logo');

        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        emitter.startFollow(logo);
    }
    </script>
</section>
2

Try to put the script tag outside of the section tag. Maybe this is already the solution.

<body>
    <section>...</section>
    <script>...</script>
</body>

You can also add scale.autoCenter to the game config:

var config = {
    ...
    scale: {
        autoCenter: Phaser.Scale.CENTER_BOTH,
    }
    ...
}
3

Show the whole HTML doc?

4

Hey, I have tried each of the solutions given, but none seem to work. I had tried the .Scale.CENTRE_BOTH before as I found that from google, and it just makes the game not show on the page at all. It when I try and move the script tag to outside, I end up with many errors.

The entire code for this page is

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
    <link rel="stylesheet" href="game.css">
</head>
<body>

    
    <div style="height: 8px; background-color: rgb(228, 100, 255)"></div>

    
    <section id="game">
    <script>

    var config = {
        type: Phaser.AUTO,
        
        width: 800,
        height: 600,
        physics:
        {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene:
        {
            preload: preload,
            create: create
        },
       
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.setBaseURL('http://labs.phaser.io');

        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    }

    function create ()
    {
        
        this.add.image(400, 300, 'sky');

        var particles = this.add.particles('red');

        var emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

        var logo = this.physics.add.image(400, 100, 'logo');

        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        emitter.startFollow(logo);
    }
    </script>
</section>
</body>
</html>
5

Hi,
To center the game horizontally, you can also apply the following properties to your canvas in CSS:

canvas {
  display: block;
  margin: 0 auto;
}
6

Thank you, that worked :smiley:

1 Like