Building a platformer game with Phaser and HTML 5: Tutorial 1

In this tutorial we will explore the basics of getting your phaser environment setup in order for you to start developing your games.

So what is Phaser?

Phaser is a javascript frame work which allows you to do high level game development straight within your browser using javascript and html5. Phaser is mainly built to deal with 2D games and can be ported to mobile with ease. Some examples of genres which can be built with phaser is infinite runners/scrollers, platformers, board games and isometric style games which use projections to make games look 3D while being a completely 2D game.

A little about us

Software labs being one of the premium html5 game development companies in South Africa, we would like to present this tutorial to new developers which want to get into the gaming industry and also show what sort of work we are doing here at software labs.

Enough about us, lets get to the tutorial.

Setting up your first phaser project

First thing is first you will need to get your copy of Phaser. We suggest using CDN’s (Content Delivery Network) for this process as it will make it easier for you to bring into your projects time after time for quick prototyping if your aim is to deploy on devices such as android or ios then you will be encouraged to bundle phaser with your project.

So lets get started:

 The code

 

First of all create a index.html file in your project folder. The below code simply includes the phaser frame work and your own defined main.js file which will contain phaser game states.


<html>
 <head>
 <script type="text/javascript" src="js/phaser.min.js"></script>
 <script type="text/javascript" src="js/main.js"></script>
 </head>
 <body>

 </body>
</html>

The below piece of code does a few things so let me explain:

First we initialise our game object, the first two parameters is the size in pixels of the game screen 640 pixels wide by 480 pixels high. The third parameter determines the rendering type there are a few WEBGL which uses a form of opengl.  CANVAS which renders the view in a html canvas element, then HEADLESS which does no rendering. We have set ours to AUTO because then Phaser will determine the best rendering mode for the device we are trying to run our game on. The next parameter is usually used for binding your game canvas to a specific element in your html file. This is especially useful if you want to make your game inline to a home page.

Then we go on to defining our state. Phaser can work with multiple states in practice Phaser may have a number of states some of which are as per below:

  1. Bootloader – This generally is to load low expense assets, such as loading bars, small logos, splash screens etc. The bootloader is included to do a quick load of element for a LoadingState.
  2. LoadState – Usually this is used to display a loading bar while loading your main game assets.
  3. Main Game State or Menu State – This usually is to show some type of menu to your player.
  4. LevelState – These are usually multiple states which are defined for having multiple levels within your game.

States have a few methods such as create, update, preload.

Preload is used to preload any game assets.
Create is to basically create any game assets on screen or initialise them.
Update is a function which runs repeatedly in a loop many times per second, we use this method generally to do updates to the game.

The next two game methods basically add the state to the game state object and then we simply start the game state to run it.

var game = new Phaser.Game(640,480,Phaser.AUTO,'');

var mainState = {
 create:function() {

 }
};

game.state.add('mainState',mainState);

game.state.start('mainState')

 

Continue to Tutorial 2

Or is this all rocket science? To order a game development project visit our web site.

Comments 2

Leave a Reply

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