BattleCity game using Phaser.IO, part 4 – simple collision.

In the last part we created moving player tank in our city, but it can move anywhere through the walls without any collision. So in this part we will investigate hwo to enable collision detection between our player tank and city walls. Also we will enable and outputt some debugging information to better understand what exactly happens on our map.

To enable collision between our tank and walls/city  we have to enable collision for tiles ( now we will just enable collision for all tiles of our tile set ). In  create function, after add tileset, add:

map.setCollisionBetween(1, 10000);
Also we have to enable player tank physics, in create function, after game add sprite, we add:
game.physics.enable(player_tank);
player_tank.body.collideWorldBounds = true;
In update function we add collision check of player vs layer:
game.physics.arcade.collide(player_tank, layer);
One note: after doing all this, collision still was not working. I found that it was realated to scaling. You should change layer.scale.set(2); to layer.setScale(); and it is fixed.

Debugging collision. To see collision rectangles you could add

layer.debug = true;

after layer creation and also add a render callback function (in new Phaser.Game you should add

function render() {

    //  Useful debug things you can turn on to see what's happening

    // game.debug.spriteBounds(sprite);
    // game.debug.cameraInfo(game.camera, 32, 32);
    // game.debug.body(sprite);
    game.debug.bodyInfo(player_tank, 10, 10);

    game.debug.body(player_tank);

}
Also, after enabling debugging, you can see that tank image is smaller than sprite itself but collision happens on sprite size. To deal with it we could change player tank body size on each key press like that:
    if (cursors.left.isDown)
    {
        //if left cursor is down - play left animation, add velocity
        player_tank.animations.play('left');
        player_tank.body.velocity.x = -100;
        player_tank.body.setSize(13,13,2,1);
        
    }
So after all, your index.html should look something like this:
<!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, render: render });


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');
    // load spritesheet for our player and enemies, all of them use same spritesheet
    game.load.spritesheet('tanks', 'assets/tilemaps/tiles/battlecity_general.png', 16, 16);
}

var map;
var layer;
var player_tank;
var cursors; 

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

    map = game.add.tilemap('tilemap');
    map.addTilesetImage('battlecity','tiles16x16');
    map.setCollisionBetween(1, 10000);
    

    layer = map.createLayer('Ground');
    layer.setScale(2);
    layer.debug = true;
    layer.resizeWorld();

    //create cursor key handler
    cursors = game.input.keyboard.createCursorKeys();
   
    //create our player tank, position it at x,y and use sprite sheet 'tanks'
    player_tank = this.game.add.sprite(135, 448, 'tanks');
    game.physics.enable(player_tank);
    player_tank.body.collideWorldBounds = true; 
    player_tank.frame = 0;
    player_tank.scale.set(2);
    player_tank.animations.add('left', [2,3], 10, true);
    player_tank.animations.add('right', [6,7], 10, true);
    player_tank.animations.add('up', [0,1], 10, true);
    player_tank.animations.add('down', [4,5], 10, true);
    
}

function update() {
    game.physics.arcade.collide(player_tank, layer);
    
    if (cursors.left.isDown)
    {
        //if left cursor is down - play left animation, add velocity
        player_tank.animations.play('left');
        player_tank.body.velocity.x = -100;
        player_tank.body.setSize(13,13,2,1);
        
    }
    else if (cursors.right.isDown)
    {
        player_tank.animations.play('right');
        player_tank.body.velocity.x = 100;
        player_tank.body.setSize(13,13,1,1);
    }
    else if (cursors.up.isDown)
    {
        player_tank.animations.play('up');
        player_tank.body.velocity.y = -100;
        player_tank.body.setSize(13,13,1,2);
    }
    else if (cursors.down.isDown)
    {
        player_tank.animations.play('down');
        player_tank.body.velocity.y = 100;
        player_tank.body.setSize(13,13,1,1);
    } 
    else 
    {
        player_tank.animations.stop();
        player_tank.body.velocity.set(0);
    }
}

function render() {

    //  Useful debug things you can turn on to see what's happening

    // game.debug.spriteBounds(sprite);
    // game.debug.cameraInfo(game.camera, 32, 32);
    // game.debug.body(sprite);
    game.debug.bodyInfo(player_tank, 10, 10);

    game.debug.body(player_tank);

}

</script>

</body>
</html>

So, with enabled collision and moving player tank, that is what we have at this moment:

BattleCity game using Phaser.IO, part 3 – using Visual Studio Code.

This will be a little go back to setting up development environment. I have noticed that in some networks c9users.io is blocked by network providers firewall, that complicates developing using Cloud9 – you will net be able to preview your project.

Another good tool you could use is Visual Studio Code.

Download the tool, install it. As we already have our project in github, just select Clone Git repository, enter your repository url and credentials and that is it.

To have a quick way of previewing of our project without moving to server you can go to Extensions, search for Live Server Extension.

Visual Studio Code - live server install
Visual Studio Code – live server install

By pressing Go Live you will be able to quickly host your files and preview locally.

Visual Studio Code - go live
Visual Studio Code – go live

Visual Studio Code has nice source control integration so you will be able to view your changes and commit and push them from UI.

Visual Studio Code - source control
Visual Studio Code – source control

 

BattleCity game using Phaser.IO, part 2 – move it!

In this part we will create our player tank, add animation of our moving tank (moving left, right etc) and perform actual tank movement on pressing of corresponding cursor keys.

In preload function we should load our spritesheet. Actually it is the same image as we used for tilesheet and same spritesheet will be used for our player and enemy tank sprites and animations.

// load spritesheet for our player and enemies, all of them use same spritesheet
game.load.spritesheet('tanks', 'assets/tilemaps/tiles/battlecity_general.png', 16, 16);

Next we should declare some new variables, one for our player tanks and one for cursor keys.

var player_tank;
var cursors;

In a create function we will create our player tank, define animations for our player tank movements.

Also here we will create object responsible for reading cursor keys. Enable our player tank physics, set scale of our player tank sprites.

//create cursor key handler
cursors = game.input.keyboard.createCursorKeys();

//create our player tank, position it at x,y and use sprite sheet 'tanks'
player_tank = this.game.add.sprite(128, 448, 'tanks');
//enable physics for our player sprite so we could move it etc
game.physics.arcade.enable(player_tank);
//set initial frame for our player sprite
player_tank.frame = 0;
//scale our player sprite as all our world is scaled by 2
player_tank.scale.set(2);
//define movement animations for our player - up, down etc, provide sprite numbers, timing,
player_tank.animations.add('left', [2,3], 10, true);
player_tank.animations.add('right', [6,7], 10, true);
player_tank.animations.add('up', [0,1], 10, true);
player_tank.animations.add('down', [4,5], 10, true);

In the update function we will perform checking if any of the cursor keys is pressed, and if it is, we will start corresponding animation and player tank movement.

if (cursors.left.isDown)
{
//if left cursor is down - play left animation, add velocity
player_tank.animations.play('left');
player_tank.body.velocity.x = -100;
}
else if (cursors.right.isDown)
{
player_tank.animations.play('right');
player_tank.body.velocity.x = 100;
}
else if (cursors.up.isDown)
{
player_tank.animations.play('up');
player_tank.body.velocity.y = -100;
}
else if (cursors.down.isDown)
{
player_tank.animations.play('down');
player_tank.body.velocity.y = 100;
}
else
{
player_tank.animations.stop();
player_tank.body.velocity.x = 0;
player_tank.body.velocity.y = 0;
}
}

That`s it, if everything done correctly, then by pressing cursor keys you should be able to move your tank and this movement should be animated.

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.