Emanuele Feronato

Talking about Game development, HTML5, Javascript, Monetize and Phaser.

It’s time to seriously learn HTML5 game development and in order for you to get the most knlowledge, I am going to give you some awesome tools, something you won’t find elsewhere.

I got some interesting revenue with my Flash Globez game which has also been ported to iOS, so I decided to sell the AS3 source code. A lot of readers got the source code and published their own games, but most of all learned how to create a full commercial Flash game.

Now, in HTML5 days, my Globez game got a new life with Sea Life Vs Mines which is being published by FGL and Christmas Quest, my Christmas 2014 game with 100 levels.

As you can see, it’s a game concept which you can easily turn into a more complex puzzle game rather than a quick drag and match arcade.

Today’s good news is I made a special HTML5 version of Globez game made with Phaser where every single line is completely commented in order for you to master HTML5 game development learning on an actual full game made with one of the best frameworks.

This is the game you are going to create, playable from your mobile device from this link:

If you are a long term reader of the blog, you should know I comment every single line of the code I publish, but just to give you an idea, this is an excerpt:

addTile: function(row, col){

     /*
     
     We have to generate a random number to decide which color to assign to
     the newly created globe
     
     Phaser has a nice way to generate random integer numbers. Just use
     
     game.rnd.between(0, game.global.tileTypes - 1)
     
     and you will have an integer number between 0 and game.global.tileTypes-1
     
     To achieve the same result with pure JavaScript, you would have to write
     
     Math.floor(Math.random()*game.global.tileTypes)
     
     */
     
	var randomTile = game.rnd.between(0, game.global.tileTypes - 1);
	
	/*
	
	determining globe x and y position according to tile size and offset
	
	*/
	
	var tileXPos = game.global.offsetX + col*game.global.tileSize + game.global.tileSize / 2;
	var tileYPos = game.global.offsetY + row*game.global.tileSize + game.global.tileSize / 2;
	
	/*
	
	adding the globe itself. Look. This is not an image. It's a sprite.
	
	What's the difference between an image and a sprite?
	
	The difference between an image and a sprite is that you cannot animate
	or add a physics body to an image
	
	Actually, this game could be done using images only, but I wanted you
	to know there are also sprites, and in more complex situations you may
	want to use sprites rather than images
	
	I would suggest to use images for logos, menus and screens, and sprites
	for the game itself
			
	*/
	
	var theTile = game.add.sprite(tileXPos, tileYPos, "tiles");
	
	/*
	
	assigning the randomly chosen frame to the sprite
	
	*/
	
	theTile.frame = randomTile;
	
	/*
	
	we don't want all globes to look the same, so we are rotating it a bit
	by a random angle. This will improve how the game looks
	
	*/
	
	theTile.angle = game.rnd.between(-20, 20);
	
	/*
	
	placing the anchor point in the center of the sprite. Notice everything you
	learned about images applies to sprites too
	
	*/
	
	theTile.anchor.setTo(0.5);
	
	/*
	
	placing the globe in tile array
	
	*/
	
	tileArray[row][col] = theTile;
	
	/*
	
	and finally adding it to tileGroup group
	
	*/
	
     tileGroup.add(theTile);
}

Did you find this code clear enough? The whole game is explained this way, and you will learn, among other things, how to:

* create and manage game states
* preload graphic assets, fonts and sounds
* show a loading bar
* create particle cascades and explosions
* add images and sprites
* manage group of images and sprites
* create animation tweens
* handle sprite sheets, also known as texture atlases
* create and trigger buttons
* handle click and finger inputs
* manage timed events
* play sounds
* scale the game to fit on any device
* cross-platform: create once, play everywhere
* pass variables through states
* use bitmap fonts
* and above all… create a complete game, from boot scene to game over scene

The game works with the latest version of Phaser, 2.5.0 at the moment, and will be updated to be up and running with each future version of Phaser.

This is an awesome opportunity for you to learn from an actual complete game, which comes in three tiers. Thanks to the experience made selling the AS3 version of the game, I am able to give you the best offer according to your needs.

If you are an experienced developer and simply want a game source code to edit and adapt it to fit your needs, you can have the uncommented source code at $9.99 only.

If you want the fully explained source code, as I recommend, you can have the full commented code at $19.99 only.

Finally, since I receive a lot of emails from people asking me to have a look at their source codes, I made another offer: while I really can’t look at someone else code, I can assist you in the making of a game if you start from my source code. With the top tier of the game, at $149.99, you get the fully commented source code and I will assist you through the creation of your game, with priority emails or by other means which we will define. I will dedicate up to five hours to your project, and since it’s an experimental offer, I may be ending it soon if I see there are too much requests, since my priority is to give you the proper support as quickly as possible – I know you want your game published FAST.

Anyway, no matter which tier will you choose, you will enormously support the blog by purchasing this source code, so here it s a recap of the offers:

[pricing_table columns=”3″] [pricing_table_column title=”Uncommented source code” currency=”$” price=”9.99″][icon_list][icon_list_item type=”check”]Full source code[/icon_list_item][icon_list_item type=”times” style=”color: red;”]Comments to explain the code line by line[/icon_list_item][icon_list_item type=”times” style=”color: red;”]Up to 5 hours of support to create your game[/icon_list_item][/icon_list]

[/pricing_table_column] [pricing_table_column featured=”true” featured_sub=”Featured” title=”Commented source code” currency=”$” price=”19.99″][icon_list][icon_list_item type=”check”]Full source code[/icon_list_item][icon_list_item type=”check”]Comments to explain the code line by line[/icon_list_item][icon_list_item type=”times” style=”color: red;”]Up to 5 hours of support to create your game[/icon_list_item][/icon_list]

[/pricing_table_column] [pricing_table_column title=”Supported source code” currency=”$” price=”149.99″][icon_list][icon_list_item type=”check”]Full source code[/icon_list_item][icon_list_item type=”check”]Comments to explain the code line by line[/icon_list_item][icon_list_item type=”check”]Up to 5 hours of support to create your game[/icon_list_item][/icon_list]

[/pricing_table_column] [/pricing_table]

Now there’s no excuse for you not to learn how to create HTML5 games. Moreover, everyone buying any of these packages will have a lifetime 10% discount on every future source code I will release.