So tile maps are an important component of phaser ce that allows for making a map of tiles that contain among other things frame index values, that can then be skinned with sprite sheet. So tile maps are useful for many strategy and platform type games, and any other kind of project where they might come in handy. In this post I will be covering how to load external data from a json file that can contain all kinds of data for a tile map, such as frame index data and other useful properties. This can be done with the tilemap method of the loader in phaser ce.
This is a post on loading an external json file that contains data for a tile map, which is a great way to quickly get started with level design in phaser ce. In this post I am making use of many aspects of phaser ce other then the tile map constructor, and some of the methods of that constructor. If you are new to phaser it might be best to start with my getting started with phaser post, and also check out my many other posts on various phaser related topics. Learning phaser is not something that is going to happen over night, it is a fairly complex framework that will take time to learn, but it sure is work the effort.
In this post I am using phaser community edition 2.11.0 of phaser.
For this example I am just going to make a simple example that just loads an external json file, an exteral sprite sheet, and just displays the tiles in the screen. Nothing fancy so this example may be a little boring, but might server as a good starting point for more advanced topics like tilemap collision, and working with more than one layer.
I will need to furnish a json file that follows one of two supported standards in phaser ce. The default format used by the tile map loader is Phaser.Tilemap.CSV, but in this post I will be using Phaser.Tilemap.TILED_JSON. This is a format used my the popular map editor known as tiled. I might get around to writing a post on this format in which I will get into this in further detail, but for now I will just link to the official docs on the tiled json format.
The key that I give to the loader will be used when actually creating a tilemap instance later in the game, the loader just makes sure that I have the data downloaded to the client, ready be used in the project.
The load world helper is what I use to create an instance of a tile map, and add an image to it to be used with the tilemap. It also returns the map when called, and also stores a reference to it in an object that I append to the Phaser.Game object.
Calling this method alone will give me a tile map instance, but to actually display the tile map data I will need a layer.
So when I call my loadWorld method that will get things started, but to actually do something with the map data i will want at least one layer. A Layer is similar to a sprite, as it is a kind of display object that can be used in very much the same manner as one. So My createStae method will create this layer with the layer data in the map. In the JSON file I defined just one layer that I have called ‘stage1’, in a real project I would typically have more that one stage to a world, and have more than one JSON file, but for now it’s just the one.
Just like my loadWorld method I append a reference to the layer in my game data object, and return a reference as well.
The tiled json format can be used to store a whole lot more than just frame index information for each tile. It can also be used to store all kinds of data on a map, and per tile bases. I will be writing many more posts on tile maps in the near future as I seem to like getting into this, but for now I made a quick method that can be used to display just a world number and stages count.
So now I just need to get everything up and running with a Phaser.Game instance, and just one state object. In the preload method of the state object I call my loadWorldData method, in a real project I would use a loader that is way more advanced then that, but for this simple example it should work okay. In the create method I call my loadWorld method first to create the map with the data loaded with loader.tilemap in the loadWorldData method. Once I have the map ready it is okay to call the createStage method, and thats about it.
If all goes well this will display the tiles in the canvas in the order that I defined in the JSON tile. Thats all this simple examples does, but these kinds of examples are just what one needs to bother with as a staring point right? After this there is of course getting into making an example that involves placing a player sprite in the world, enemies, and other objects depending on the nature of the project.