Creating a simple game using Phaser.JS

23 Jun Creating a simple game using Phaser.JS

Intro

One of our favourite libraries is Phaser.JS (http://phaser.io). It is quite convenient to use, quite fast
(it uses the Pixi.JS drawing engine), and offers most of the functionality a game development framework should offer.

Baby steps

Let’s start with the bare minimum. A simple sprite in the middle of the screen.

This is the code that allows to create that fantastic piece of animation.

  (function(divName) {
	let character = null;
	// Create a game instance (width 200, height 150):
	let game = new Phaser.Game(200, 150, Phaser.AUTO, divName, {
		
		preload: () => {
			game.load.image('hero', 'https://arcadigital.co/wp-content/scripts/HeroFront.png');
		},
		
		create: () => {
			character = game.add.sprite(game.width/2, game.height/2, 'hero');
			character.anchor.set(0.5, 0.5);
		},
		
		update: () => {
			character.angle += 1;
		}
	});
	}("BabySteps"));
	

There are four main stages in a Phaser.JS game. The first is «preload», here you specify all of the initial assets you require for your game. For simpler games this is where you load all of the assets. For more complex games, there are other techniques that will allow the game to start earlier, without having to finish downloading all of your assets.
The second stage is «create», which handles game initialization. Notice it happens only after preload has finished, saving you from having to check whether your assets are ready or not. Here you can create sprites, prepare the scenery, etc.
The third stage is «update». This part of your program will get called again and again for every single cycle of your game. Make sure it executes as fast as possible, as any delay here will impact the smoothness of your game.
There is a fourth stage called «render», which normally should only be used for debugging purposes. It’s called for every rendering cycle of the game.

Controlling your hero

Now we need to be able to control our hero. This can be done by adding keys to the game.input object in Phaser during the Create phase. During the Update phase, we need to take actions according to which key(s) got pressed.

Smooth scrolling

Let’s add a series of different Phaser technologies. First, we can use the default four-way cursor keys. This can be done using cursors = game.input.keyboard.createCursorKeys();. Also, let’s add a doodad to the scene, so that it is more obvious how our hero is moving around the world. If you want to look at the source code (smoothmove.js), you will be able to see that we’re creating about 20 mushrooms.
Let’s also use layers. Since we want all of our mushrooms to appear behind the hero, let’s create a special layer for them. This is done using groups. This will create a new group: sceneryLayer = game.add.group(); After creating it, we can add sprites to the group instead of adding them directly to the game. let mushroom = sceneryLayer.create(Math.random()*worldWidth, Math.random()*worldHeight, 'mushroom');
We will also tell Phaser’s main camera to follow our hero. Use the following code to do that: game.camera.follow(hero);