Adding Enemies to my Phaser Platformer

So far, my 8-bit style platformer has been nothing but a frog walking around. It was too safe. There was nothing bad for the frog to hit. To make a proper platformer, there must be some enemies. In response to this problem, I added some toads.

To accomplish this, I first added an Object Layer to my game map in Tiled. On this layer, I placed some tiles that were pictures of the toad. You don't actually have to use tiles here - the objects are only placeholders for Sprites that will be added in the game. You could just use rectangles or whatever, but I think it's nice to be able to see the enemies in the map editor.

In my example, as seen below, I called my Object Layer "others." The name will be important later.

Before changing the game code to utilize this new layer, I also had to add the toad spritesheet to my assets pack. The key name is "toad." Here is that part of the pack.json file:

    {
        "type": "spritesheet",
        "key": "toad",
        "url": "assets/sprites/toad.png",
        "frameWidth": 64,
        "frameHeight": 64
    }

Now it's time to make the toad appear in the game. This is made (almost) easy by Phaser's map.createFromObjects function. It takes objects from an Object Layer in your map and turns them into Sprites. I added the following lines to my game's create function:

enemies = game.add.group();
enemies.enableBody = true;

map.createFromObjects('others', 6571, 'toad', 0, true, false, enemies);

You should be asking, "What do those parameters mean? Especially that 6571." The first parameter is simply the name of the object layer. Remember, I named mine "others". The second parameter is tricky - it is the gid of the objects that should be converted to Sprites. Where is the gid set, or even displayed, in Tiled? I have no idea. The only way I could find it was to look in the JSON after I saved the map. Basically, if you use a tile as your object all of them that use the same tile will have the same gid. You just have to figure out that that gid is. The following snippet from the map JSON shows the gid:

     "objects":[
            {
             "gid":6571,
             "height":64,
             "id":14,
             "name":"toad1",
             "properties":
                {
                },
             "rotation":0,
             "type":"toad",
             "visible":true,
             "width":64,
             "x":1056,
             "y":704
            }] 

The third parameter is the name of the spritesheet from the asset pack, and the fourth parameter is the frame to use as a start. My toad sprite only has one frame right now, so I just set that one to 0. The next parameter is if the new Sprite should exist. I don't know why this would ever be set to false, so I set it to true. The sixth parameter selects for auto-culling. Auto-culled sprites are culled from the camera if not in range. The final parameter that I use is the group in which all these new sprites should be placed. I put them all in an enemies group so that it's easy to check for collisions later.

With these simple steps, I was able to add some evil toads to my game - and adding more is just as simple as editing the map. Phaser makes it very convenient for you to do stuff like this. If you want to see the game in action, it is playable at http://amphibian.com/eight-bit/. And make sure you read today's comic as well!

Amphibian.com comic for 18 November 2015