When working with Phaser ce some projects might require the use of a time map. A tile map is a way of creating a an scene with a gird the contains a frame index for eac grid position, and each index refers to a standard texture in a sprite sheet. There is a lot to cover with tile maps, so this post will just be a quick overview of how to get started with them in phaser ce.
For a basic example of using a tile map, I made an example that is just a single layer, and will cycle throw all possible index values for a tile when it is clicked. The basic process is to create an instance of a tile map, add a sprite sheet to it that will be used to skin the tiles, create at least one layer, and then set some index values for the tiles.
So first I need to have an instance of a tile map to get things started. For this example I have pulled this part of the process into a single helper method that will create the map with some values that are set with number literals, and then also adds a sprite sheet to the map that is assumed to be there, then returns the map. For this simple example it should work fine as long as it is used in the proper order after I have my sprite sheet, more on that laster.
When calling game.add.tilemap the first argument is a key to tilemap data that is stored in the cache, because in this example I am working with a blank tilemap, I leave this value as null. The next augments have to do with setting the tile size, and the grid size. So in this map I am working with tiles that are 32 by 32 pixles, and it is a 6 by 6 grid.
Once I have a tile map I will want to create at least one layer. A layer is very similar to a Sprite, as it is another example of a kind of display object in phaser ce. As Such many of the properies and method that you may all ready be aware of with sprites are the same. For this example I create a new layer for the map by calling map.create, then enable input, and attach a single onInputDown event that will cycle the index values of a tile when clicked.
You might have noticed that I set fixed to camera to false in this example. By default this value is set to true, not a big deal in this example, and most projects that make use of time maps for that matter. If it is a project in which the tile map needs to scroll it may be better to change the index values of the tiles rather than making a tilemap that is larger than the canvas size, so it is okay that it is fixed to the camera. However this is one of the few little things to be aware of when working with tile maps. For more on haveing tile maps, sprites, groups and other display objects fixed to the camera I have a post in which I get into this in greater detail.
So now that I have a map with a sprite sheet, and at least one layer, I now want to have some index data for the map. So for starters I made a method that will generate a bunch of random index values in a range set by a number literal. Nothing fancy, but it will work okay for this simple getting started example.
The map.forEach method is one of the many tile map method that make working with a tile map a breeze compared to making my own solution from the ground up. The map.forEach method as the name suggests will run over each tile, in a given area. For this example I am setting index values for each tile in the whole map.
So now that I have all the helpers worked out in order for this all to work I will need that sprite sheet that I used in my helper that creates a map to begin with. So here is my mkSheet helper that I use to make a simple sprite sheet consisting of solid color blocks that is made via a canvas element.
In other real projects I might use a sprite sheet that is loaded from an external file, but for these simple hello world examples a simple solution like this works just fine. I also some times make more complex solutions like this as well for hyper casual style games, where graphics are not really the greatest selling point of a game. If interested in reading more about this I have a post on making sprite sheets with canvas in phaser ce.
Now that I have everything that I need to get this basic tile map example working all that is left is to make use of it all with an instance of Phaser.Game. For this example I will only need a single state object as well.
I just need to create the sprite sheet first so that my createMap method will work, and then I will want to create a layer before adding index data as well. So the helpers should be called in this order. For this example the only action is event driven so there is no need for an update method, so I only need an create method in the single state object.
If all goes well when this project runs there should be something that works like a basic pain program where clicking on each tile will result in the colors of the tiles cycling throw each possible index. Noting to get to excited over, but this was a basic example after all.
There is a whole lot more to write about when it comes to tile maps, such as layering, working with external data via json, and the host of methods tips and tricks with just tile maps alone in phaser ce. If you have a particular aspect of tile maps that you would like for me to look into more please fell free to let me know in the comments, I would like to expand on this area more. In any case be sure to have fun with phaser ce, that is kind of the idea right?