Creating a BattleCity game using Phaser.IO, part 1

I was never a huge fan of JavaScript and I am no way front-end developer, but I like some ideas from that technology and now with dying Flash – it is definitely the future.

So in this post series, I will be making famous Nintendo (NES) Battlecity game clone using Phaser.IO, just for fun, to see how it works. To make it I decided to use some online development environment, Github for source control and .. yes that is basically all that one will need.

Setting up a development environment.

For a development environment, i have decided to code everything online using Cloud9 and Github.

First login or create your Github account. Then create a new repository.

Then you have to register for the Coud9 account and create workspace there. When creating workspace select Html5 and provide your Github repository URL in “Clone from Git..” field.

Also, go to Cloud9 settings, select SSH Keys, copy your key and then go to Github->Settings->SSH and…, press New SSH key, name it something like C9 and then paste your key and press Add SSH key.

Setting up project workspace.

In Cloud9 workspace of your project create folders:

  • assets->tilemaps->maps
  • assets->tilemaps->tiles
  • js

Create empty index.html in your main folder.

Go to phaser.io and download phaser.js then move it to js folder.

Creating tiles map.

Go to sprites resource and download Battlecity sprites (or download them here):

Download Tiled map editor, its the tool we will use to make our maps.

Start Tiled and select File->New tilest. As source select your downloaded sprites file ( i have named it /battlecity_general.png ). Set 16px for tile width and tile height.

Then select File->New map. Width 16 tiles, Height 15 tiles. Tile size 16 px.

Using your tileset draw your map ( I have used Battlecity level 1 as reference ).

Important: press embed tileset button in your map editor. That way your tilesets will be embedded to your exported JSON file.

Next, after you finish creating your map, select File->Export as and select JSON format.

Then you have to move your resources to your project workspace in Cloud9.

  • Move JSON file to maps folder.
  • Move general tiles png file to tiles folder.

Your files now should look something like that:

Loading tile map.

Now let’s populate your index.html with some HTML and JavaScript code:



<!doctype html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8" />
	<title>Battlecity</title>
	<script type="text/javascript" src="js/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

var game = new Phaser.Game(512, 480, Phaser.AUTO, '', { preload: preload, create: create, update: update });


function preload() {
    game.load.tilemap('tilemap', 'assets/tilemaps/maps/battlecity_map1.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('tiles16x16', 'assets/tilemaps/tiles/battlecity_general.png');
}

var map;
var layer;


function create() {
    game.stage.backgroundColor = '#787878';

    map = game.add.tilemap('tilemap');
    map.addTilesetImage('battlecity','tiles16x16');
    
    layer = map.createLayer('Ground');
    layer.scale.set(2);
}

function update() {
}

</script>

</body>
</html>

My json file:

{ "height":15,
"layers":[
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 0, 17, 0, 18, 17, 0, 17, 20, 0, 0, 17, 0, 17, 0, 0, 17, 0, 17, 0, 18, 17, 0, 17, 20, 0, 0, 17, 0, 17, 0, 0, 17, 0, 17, 0, 18, 17, 0, 17, 20, 0, 0, 17, 0, 17, 0, 0, 17, 0, 17, 0, 18, 17, 42, 17, 20, 0, 0, 17, 0, 17, 0, 0, 17, 0, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 0, 17, 0, 0, 0, 0, 0, 0, 18, 20, 0, 18, 20, 0, 0, 0, 0, 0, 0, 19, 0, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 0, 19, 46, 0, 0, 0, 0, 18, 17, 19, 17, 20, 0, 0, 0, 0, 0, 46, 0, 0, 0, 0, 0, 18, 17, 17, 17, 20, 0, 0, 0, 0, 0, 0, 0, 17, 0, 17, 0, 18, 17, 0, 17, 20, 0, 0, 17, 0, 17, 0, 0, 17, 0, 17, 0, 18, 17, 0, 17, 20, 0, 0, 17, 0, 17, 0, 0, 17, 0, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 0, 17, 0, 0, 17, 0, 17, 0, 0, 18, 17, 20, 0, 0, 0, 17, 0, 17, 0, 0, 0, 0, 0, 26, 0, 18, 70, 20, 0, 0, 0, 0, 0, 0, 0],
"height":15,
"name":"Ground",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":16,
"x":0,
"y":0
}],
"nextobjectid":1,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"1.0.3",
"tileheight":16,
"tilesets":[
{
"columns":25,
"firstgid":1,
"image":"battlecity_general.png",
"imageheight":256,
"imagewidth":400,
"margin":0,
"name":"battlecity",
"spacing":0,
"tilecount":400,
"tileheight":16,
"tilewidth":16
}],
"tilewidth":16,
"type":"map",
"version":1,
"width":16
}

If you did everything correctly, then after pressing Run and preview you should get something like that:

If it does not work check paths in load.tilemap and load.image functions.

Also in map.addTilesetImage(‘battlecity’,’tiles16x16′);

tiles16x16 is image name used in load.image.

battlecity is tileset name in json file, check it also.

At the end, let’s push everything to our GIT repository. In bash tab execute these commands:

  • git init
  • git add .
  • git commit -m “first commit”
  • git push

After git push you probably will be prompted to enter your GitHub username and password, so do that.

That all for this time, next time we will make something to move.

Leave a Reply

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