How to Make Android Games With Html5 and Phaser

In this tutorial I’m gonna make a farm animal slider game  for Android* using the HTML5 Phaser library.

image-01-cow-arrows-text

Tutorial Source Code and Asset Files

You can grab the tutorial source code and game assets in a ZIP file from here. You can also clone theGithub repo. If you want to see the finished product go here to see it live.

 

Learning Objectives

In this tutorial we will make a cross-platform toddlers game with Phaser and we’ll export it to Android using Apache Cordova* and the Intel® XDK.

Some of the concepts we’ll cover:

  • Working with sprites: anchor point, rotation, flipping, scaling.
  • Handling user input.
  • Screen scaling to adjust the game to different screen sizes.
  • Working with groups in Phaser.
  • Tweening and sprite animations.
  • Adding text.
  • Adding audio.
  • Exporting a HTML5 game as a native Android application.
  • Putting it all together to make a toddlers game.

No prior experience with Phaser, Cordova, Android or game development in general is required to follow this tutorial.

Games built with Phaser can’t be ran by just double clicking on the index.html file. They need to be run using a web server. For a Phaser game that doesn’t include any Cordova API usage you are good to go with the usual web server alternatives such as WAMP for Windows , MAMP on the Mac , Python’s simple HTTP server or Node.js http-server package.

Also, some code editors such as the Intel XDK and Brackets come with in-built web servers so you don’t have to install any external ones.

The skeleton of our Phaser project will be an index.html file that includes the Phaser library and our custom script. These files will look like so:

index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<title>Learn Game Development at ZENVA.com</title>
		<script type="text/javascript" src="js/phaser.js"></script>		
		<style>
		  body {
		    padding: 0px;
		    margin: 0px;
		    background: black;
		  }
		  </style>
	</head>

	<body>  
		<!-- include the main game file -->
		<script src="js/main.js"></script>
	</body>
</html>

And main.js:
//this game will have only 1 state
var GameState = {
  //initiate game settings
  init: function() {
  },

  //load the game assets before the game starts
  preload: function() {    
  },

  //executed once after everything is loaded
  create: function() {
  },

  //this is executed multiple times per second
  update: function() {    
  } 

};

//initiate the Phaser framework
var game = new Phaser.Game(640, 360, Phaser.AUTO);

//add the state to the game object
game.state.add('GameState', GameState);

//launch the state
game.state.start('GameState');

Sprites

Images or “sprites” are the bread and butter of 2D games. Phaser uses sprites to represent backgrounds, game characters and pretty much all images in a game. Before we dive into creating our farm animals game let’s look at some examples of what you can do with sprites.

Preloading textures

Before you can use a sprite you always have to preload the image file. Loading an image from the disk takes time, whereas loading an image from the device RAM memory is super fast. The preloading of the game assets is nothing but loading everything from the disk and putting it into the RAM memory, so that when the image or asset is needed, it can be displayed instantly.

Have you noticed how sometimes a website is partially loaded and you can see most of the content except for some images? That is because those images are being loaded from the server. This is all right for a website but on a game it would be unacceptable! (just try to imagine your favorite game but with a black square instead of the main character, as it hasn’t been loaded yet).

So what we do is preload the images and other game assets such as sound files in the preload()method of our GameState object, like so:

1 preload: function() {
2     this.load.image('background', 'assets/images/background.png');
3     this.load.image('chicken', 'assets/images/chicken.png');
4 }

this.load is accessing an object called the Loader which is initiated by Phaser. This object has different methods to load different types of game assets. You can learn more about it in the documentation. The first parameter is the key of our asset, you can type there anything you want as long as you don’t call two assets by the same key. We will use the key later in the code to refer to that particular asset.

Showing a sprite

To show these two sprites we’ll add some code to the create() method of GameState, which is executed once after the preloading phase has finished.

1 //executed once after everything is loaded
2   create: function() {
3       this.background = this.game.add.sprite(0, 0, 'background');     
4       this.chicken = this.game.add.sprite(100, 100, 'chicken');
5   },

The sprites are located in the specified coordinates X and Y. The coordinate system starts on the top-left corner of the game world. Y is positive downwards and X is positive to right.

(Visited 72 times, 1 visits today)
How to Make Flappy Bird in HTML5 With Phaser - Part 2

Comments

comments

Leave a Reply

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