Phaser 3: Hello World!

  • Requirement: Web server, Text editor, Web browser, Phaser 3
  • Language: HTML, Javascript
  • Difficulty: Easy
  • Written By: Lee Zhi Eng
  • Last update: 9 Mar 2019

Introduction

In this tutorial, we will learn how to create an empty canvas using Phaser 3.

To develop Phaser 3 games, you must first install a web server on your computer. This is because modern web browser does not allow loading resources locally (file:// prefix instead of http://) and thus your game may not work when run directly on your browser without a web server.

There are many different ways to install a web server on your computer. Please proceed to the web tutorials page (coming soon) if you have no idea how to install one.

If you already have a web server running on your computer, let’s proceed to the next section and get started!

External Javascript File

1. The first thing we need to do is to download Phaser 3 from their website by clicking on the min.js option:

Download the min.js option

You can download other options if you want. However, if you’re just starting to learn HTML and Javascript, the min.js package will do just fine, as it is the tiniest download (only 1 file) compare to the other packages, which may contain the entire development source code in it.

2. After downloaded Phaser 3’s javascript file, place it to your project’s directory or any of its sub-directories. Your project’s directory must be placed within your web server’s htdoc, www or whichever folder that can be accessed by the web browser.

Setting Up HTML

1. Next, we’ll create a new text file in the project directory and save it as index.html.

2. Then, we add the following code to our HTML file:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

An empty HTML file always contain a DOCTYPE declaration to inform the web browser that this web page is written in HTML 4.01 and above (including HTML 5). It will also contain the html, head and body elements.

3. After that, we’ll add the title tags between <head> and </head>:

<!DOCTYPE html>
<html>
    <head>
        <title>My Game</title>
    </head>
    <body>
    </body>
</html>

The text written within the title tags will be displayed as the web page’s title. The text will appear as the browser’s window title or tab name.

4. Then, we’ll link the javascript file we downloaded from Phaser 3’s website:

<head>
    <title>My Game</title>
    <script src="js/phaser.min.js"></script>
</head>

Using Phaser 3

1. Next, add another script element within the <head> tags and insert the following code to it:

<script>
var config = {
	type: Phaser.AUTO,
	scale: {
		width: 640,
		height: 480
	},
	scene: {
		preload: preload,
		create: create,
		update: update
	}
};

var game = new Phaser.Game(config);

function preload() {}
function create() {}
function update() {}
</script>

2. Phew! The code above is really long! Let’s take a look at the code part by part. First, we declare the configurations for Phaser 3. The config options are explained below:

  • type – The type of renderer, can be AUTO, CANVAS or WEBGL
  • scale – The size of the render output. In this case, 640×480
  • scene – We link the preload(), create() and update() functions to our game scene’s preload, create and update states. We will talk more about this in future tutorial

3. After that, we make use the config settings when initializing Phaser. The 3 functions at the bottom are the functions we linked to the render states. The functions are being explained below:

  • preload() – Will be called by Phaser once before the scene is being initialized. This is usually for loading image or audio files so that we can make use of these resources in other states.
  • create() – This function will be called once after Phaser has been initialized. This function is used to set up the game and create game objects such as sprites and particles.
  • update() – This will be called repeatedly in loops as long as the scene exist and active. This function is used for game logic and other features that need to be updated repeatedly.

If we run the HTML file using web browser now, we’ll see a black rectangle appearing on the browser screen. Congratulations! You have successfully created an empty render window using Phaser 3 that runs on either canvas or WebGL. The black frame looks really boring, let’s add something to it!

4. Let’s add the following code to the preload() function to load an image file:

function preload()
{
	this.load.image('logo', 'img/phaser.png');
}

5. Then, we create the image object in the create() function:

function create()
{
	this.add.image(320, 210, 'logo');
}

Refresh the game page now and you should be able to see the following result:

Phaser 3 logo displaying on the screen

Please make sure that the image file exist, otherwise Phaser will not be able to load it. That’s it, you have successfully rendered an image in your game scene using Phaser 3!

Source Code

<!DOCTYPE html>
<html>
	<head>
		<title>My Game</title>
		<script src="js/phaser.min.js"></script>
        	<script>
        	var config = {
		        type: Phaser.AUTO,
		        scale: {
			        width: 640,
			        height: 480
	        	},
	        	scene: {
		        	preload: preload,
		        	create: create,
		        	update: update
	        	}
        	};

        	var game = new Phaser.Game(config);

		function preload()
		{
			this.load.image('logo', 'img/phaser.png');
		}
        	function create()
		{
			this.add.image(320, 210, 'logo');
		}
        	function update() {}
		</script>
	</head>
	<body>
	</body>
</html>

In the next tutorial (coming soon), we will learn how to move game objects around using built-in physics. Please click on the link below to proceed.

Leave a Reply