Phaser 3 Initialization Tutorial
Below is a quick walkthrough on how to initialize a web browser game using Phaser 3. We will be producing the following “Hello World” scene.
Step 1: Download Node.js
We need Node.js to be able to use http-server which serves our resources to the browser.
Download Node.js from the official website and follow the instructions there. Check that you have Node.js by running the following on your command line.
$ node --version
Node package manager (npm) should come installed with Node.js.
Step 2: Download http-server
After downloading Node.js and npm, download http-server using npm.
With this, you are able to launch your own web server and serve up the game. Check the you have http-server by running the following command.
Your terminal should display the following message.
If you see this, that means that your folder is being correctly served. You can check this by visiting localhost:8080 through your fave browser. You can abort your server by hitting Ctrl+C in terminal.
Step 3: Initial HTML file
Create a folder. Inside it, create a file called index.html.
This is the main page that will be served by your server.
Here, we import
phaser.js script from online to enable Phaser.js functionalities, and import a file called
main.js (which we’ll edit in a while).
Using main.js, you can initialize a Phaser game with your very own scenes and configurations.
My scene names are
Game, but you can replace yours with a different set of names.
Don’t forget to replace
game.js too with the different files you’d use for your game.
Step 5: Initialize scene
In StartGame.js and your other scene files, make each scene extend Phaser.Scene, and inherit two functions,
Make sure to replace StartGame with your scene name, and replace “startGame” with any scene key to identify the scene. Do the same for Game.js or whatever scene your game has.
Step 6: Add components
Now, you can add components, such as rectangles, images, interaction, sounds, etc to your game.
Here, we add the text “Hello World!” in the center of our game, and set the anchor point of the text to the middle.
Here is a cheat sheet for the various components you can add to make your game.
Step 7: Launch Game
Now, open your terminal
Activate your game to see if it works.
What you should see
When you open up localhost:8080, or whatever port in your browser, here is what you should see.
We’ve just intialized a generic Phaser Scene. We can further build on this by adding components and logic.