Navigation

Part 5 - Hello World!

Published on 22nd September 2023

With your editor set-up, web server installed and Phaser downloaded it's time to create something and check everything is working.

You need to discover where your 'web root' is on your machine. This is the folder in which the server looks for files. If you are using WAMP on Windows you can locate it by clicking the WAMP icon in your system-tray and select "www directory" from the pop-up menu. Other servers will have other methods of determining the location, but from this point on we'll refer to it as the 'webroot'.

Create a file called index.html inside of the webroot and paste the following code into it:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>

    <script>
    class Example extends Phaser.Scene
    {
        preload ()
        {
            this.load.setBaseURL('https://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');
        }

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

            const particles = this.add.particles(0, 0, 'red', {
                speed: 100,
                scale: { start: 1, end: 0 },
                blendMode: 'ADD'
            });

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

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

            particles.startFollow(logo);
        }
    }

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

    const game = new Phaser.Game(config);
    </script>

</body>
</html>

Testing, testing ...

Open your web browser and load the index.html page up. This may be as simple as typing in localhost/ or 127.0.0.1/ into your browser. Or you may need to specify a port number as well, it depends entirely on which server set-up method you used.

If everything goes right it will display the following demo in your browser:

Phaser 3 Demo

If it doesn't for whatever reason you need to bring up the debug console and see what errors are output. In most browsers you can do this by pressing F12. This works in Chrome, Firefox and Internet Explorer 11. Check to see what the error is, hopefully it's a simple one like a file being missing, in which case check your folder names and refresh the page.

If it's something more complex, please join us in the Phaser Discord and talk in our Beginners channel. We'll try our best to help.

It's just a tiny example, and we've hundreds more for you to explore, but hopefully it shows how expressive and quick Phaser is to use. With just a few easily readable lines of code we've got something pretty impressive up on screen!