HTML5 Game Development with JavaScript Phaser2

jDataLab

3 minute read

Phaser.js is a desktop and mobile framework for HTML5 game development. This tutorial will briefly cover basics on building a Phaser game which runs in a Web browser. Phaser 2.11.0 is used in this tutorial. Phaser is an open source project and available to download for free.

A sample Phaser game

Here is a sample Phaser game.

Life cycle of HTML5 game

A Phaser game often consists of at least the following four scenarios:

  • Set up the game area
  • Preload game resources including images, audio and data files
  • Create the game
  • Update the game

Importing the Phaser framework

A Phaser2 game can be written in a single HTML file with embedded JavaScript code. In the front matter of the HTML file, <script> tag imports the Phaser framework. The Phaser script can either be imported locally or from a remote server.

The following code shows the script tag that imports the Phaser2 framework from a URL. The script block in Lines 9 through 11 is the place where the game code goes.

 1<!DOCTYPE html>
 2<head>
 3<meta charset="UTF-8" />
 4<title>Phaser game</title>
 5<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.11.0/phaser.min.js"></script>
 6</head>
 7<body style="padding:0;margin:0;">
 8
 9// game code 
10 
11</body>
12</html>

Phaser names are case-sensitive

Before writing game code, be aware that all names in Phaser are case-sensitive. ‘Game’ is not the same name as ‘game’.

Creating a game container

Before creating a game, a game container is needed, which simply can be an HTML div element. The following shows Line 8 creates a container in a div element, having an id value being test.

 1<!DOCTYPE html>
 2<head>
 3<meta charset="UTF-8" />
 4<title>Phaser game</title>
 5<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.11.0/phaser.min.js"></script>
 6</head>
 7<body style="padding:0;margin:0;">
 8<div id="test"></div> 
 9<script>
10// game code 
11</script>
12 
13</body>
14</html>

The Game object: Creating a new game

Game is a Phaser object that constructs a new game with a few necessary specifics. This is where the magic happens.

var game = new Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig);

  • width: A string for the percentage or a number in pixels. The default is 800 pixels.

  • height: A string for the percentage or a number in pixels.

  • renderer: Phaser.CANVAS for mobile games

  • parent: a page element which contains the game

  • state: an object, e.g., {preload: preload, create: create, update: update}

  • transparent: Use a transparent canvas background or not. The default is false.

  • antialias: Draw all image textures anti-aliased or not. The default is for smooth textures, but disable if your game features pixel art.

  • physicsConfig: A physics configuration object to pass to the Physics world on creation.

Example

The following shows an example of creating a Game, storing it in a variable named game.

var game = new Phaser.Game(800, 400, Phaser.CANVAS, "test", {preload: preload, create: create, update: update});

Also, we can make the game dynamically being size of the current window.

var width = window.innerWidth;
var height = window.innerHeight;
var game = new Phaser.Game(width, height, Phaser.CANVAS, "test", { preload: preload, create: create, update: update });

Write three game functions: preload, create and update

A Phaser2 game has at least three functions: preload, create and update. Continue to Part 2