Phaser 3 “Hello, World!” with Node.js

Phaser 3 “Hello, World!” with Node.js

Hello, World!

A phrase that practically every programmer knows. So it’s no surprise that even a game framework like Phaser has a ‘Hello, World!’ example.

The Phaser website has a tutorial for getting started here.

If Phaser already has a tutorial, then why bother with this one?

Good question guy! Here’s my answer:

The Phaser getting started tutorial has too much information. Having a lot of information is great, but when you’re a newbie just trying to get a ‘Hello, World!’ example up and running, you would probably want it to be as simple as possible. So that’s what all this is.

Things you will need

To get the Phaser ‘Hello, World!’ example up and running, you’re going to need

  1. A server
  2. A copy of the Phaser3 code
  3. A text editor

Now, text editors come pre-packaged with all popular operating systems so I won’t waste your time talking about them (personally, I use VIM for simple text editing).

As for the server, since I’m comfortable with Node.js, I’m going to choose to go with http-server. Besides being one of Phaser’s recommended servers to use, I’m choosing http-server because it is so EASY to use. I kid you not. All you have to do is install it, and it works.

For the copy of Phaser3, we’re going to include it from a CDN because that is the easiest thing to do.

Other things you will need:

  1. Node.js
  2. npm

Wait up! I thought I only needed a server, a copy of the Phaser3 code and a text editor!

Well yeah, but you’re going to need Node.js and npm to get http-server running.

So lets get started!

Even if we’re doing this the easy way, it will still require a couple of steps to get everything done. So I’ve broken it down into the

  • Creating the project directory
  • Creating the start script
  • Creating the HTML file

Creating the project directory

First, create a directory for your project. Once you’ve created one, go into it. Now that you’re in the correct directory, open a terminal.

In your terminal, type in:

npm init

npm will then walk you through the creation of a package.json file by prompting you for some input. The image below gives an example of what this looks like.

If everything goes well, you should be able to see a file named `package.json` in your folder.

Now, we can install http-server!

Still in your terminal, type in the following:

npm install http-server --save-dev

You should see some text output during the installation just like the image below:

Now that http-server is installed, the next step is to update our package.json start script to use http-server.

Creating the start script

Using your text editor, open your package.json file. Once you have it opened, look for the line that says “scripts”.

Before the line that says “test”, add the following code:

"start": "./node_modules/http-server/bin/http-server"

Your package.json file should now look like this.

You can test it by typing `npm start` into the terminal. Some messages should pop out on the terminal telling you that the server is being started and that it is available on http://127.0.0.1:8080 . IF you see that, then that means that everything is going according to plan. To stop the server, just hold CTRL and C at the same time. You should see a message on the terminal telling you that the server has been stopped.

Creating the HTML file

The next thing you should do, is to use your text editor to create a file called index.html in the same directory as your package.json file.

In this file, paste the following code:

<!DOCTYPE html>
<html>
<head>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.0.0/dist/phaser.min.js"></script>
</head>
<body>

    <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>

</body>
</html>

And save the file.

Once you have saved the file, go back to your terminal and type `npm-start`. This will start the server again. This time however, once the server has started, open up a browser and paste this into the address bar:

http://127.0.0.1:8080

You should see the Phaser logo, bouncing around the screen all the while trailing red particles. This means that your Phaser3 ‘Hello, World!’ tutorial is complete!

Congratulations!

You did it! not so hard now was it?

 

All the code in this tutorial can be found on my github.

Leave a Reply

Your email address will not be published. Required fields are marked *