These days I have been playing around with tilemaps a lot in phaser ce. When doing so for some projects I will want to set collision detection for some tiles. In this post I will be covering doing just that with a method that woulds by setting collision tile index values by giving what index values I do not want to result in collision. This can be done with a helpful little method in the tilemap class called Tilemap.setCollisionByExclusion
So there are a few ways to set up collision detection with a tile map, most if not all will involve setting an array of tile index values in an instance of a tile map. This could be done manually, but why bother with that if one of the tile map instance methods will work just fine? One such method is map.setCollisionByExclusion. This method works by just calling it and passing an array of tile index values in the map data that should be excluded from collision detection.
In this example I will be using map.setCollisionByExclusion to set the collision index values of a tile map, and have a little guy sprite run around in the map.
I start off my main.js file with some helpers, this helps to break my code down and make it more fine grain which helps to make debugging easier when I run into problems, and I also find it helps to make code more readable for examples like this.
Anyway the first helper is my createStage helper that will be used to create a layer for a map that I will create before calling this, more on that later. In any case once I have a least one layer in the map, and that map is the current layer of the map, I just need to call map.setCollisionByExclusion and pass the frame index values that I do not want collision to happen for.
This helper will of course be used in conjunction with many others, but for the most part the main subject matter of this post happens here.
Here I have the create map method, that when called will create an instance of a tile map and appedn a reference to it in a object that I appedn to the Phaser.Game instance. This method will of course be called before I call createStage, but after I load all the assets that I need including the external json file that will contain the frame index data for each tile.
Next I have a helper that will create a sprite of a little guy character that I put together in a flash for the sake of these demos. The method creates the sprite using the key of a sprite sheet that I load before calling this. Once I have the instance of the sprite I enable physics for the sprite, and set some additional settings including the start location from the json data.
In order to confirm that collision is working the little guy sprite is necessary, in a real project there would be much more to do with this, but for now he should serve this example well.
So here I have the JSON file that I will be using that will contain the frame index data along with many other things. As of this writing I have not yet wrote a post in which I get into this json file standard, but there is the official documentation on it at the tiled website.
Now to get the project up and running by bringing everything together with a Phaser.Game instance and a single state object with a preload, create, and update methods. In the preload method I load all my assets, such as the sprite sheets for the tile map, and the little guy, along with the json data with to load.tilemap.
In the create method I resize the world, create the map, create the stage, and enable physics. Then I create the little guy sprite that will end up at a start location define in the json file. I also set up some keyboard cursors to use to move the little guy around to confirm that collision is working, event though the little guy would fall through the blocks if it wasn’t. Still I like to make these demos at least a little interesting, have to move him around at least.
There is also the update method as well there I am just updating the little guys position based on keyboard input.
So if all goes well when this project starts up the little guy sprite will start at the starting location that I have defined in the json data, and collision detection does indeed seem to work. He does not fall threw the tiles, and the example seems to work as expected. Of course this is not everything there is to cover with collision detection and tile maps in phaser. I might still need to write more content event attachment, and have some other things going on such as enemies, and death traps. However just getting to this point is a major step forward in making a nice little platform game.