A tilemap is a grid map generated from (usually) reusable element blocks. The sharing of these blocks to paint the map/grid is a very efficient way to save on resource size. Below is an example of the tileset that I downloaded for use with these tutorial examples. Everything is 32px by 32px blocks.
Now let’s take a look at the actual tilemap creator. Here are the settings I created for this tutorial when creating a new map with the Tiled Application.
Import the tileset shown above and you will be able to create tilemaps as easy as shown below! This tool really is great… and free!
And a little more tweaking and bam, it’s a basic map.
That’s all fine and good but we have yet to do anything on the web, what is this post even about? Let’s do that right now! Below you will see that my new game init is a little bit bigger (double the size from the last tutorial) 400px by 400px. Again, if you don’t know where the code below goes… please go back to tutorial 1.
Now that we have the game map a little larger, let’s load in the actual tilemap. First, let’s preload the tilemapping
.json file and the actual asset (as seen above… the tileset of 9 blocks), within our
If you don’t have the
.json file yet, you can export the file from the Tiled application. *Please note, the .json does have a relative path to the asset being used, so that might have to change depending on your file structure and how you have things.
Below is the
.json file that I exported, I am including it here to show you a few things to look out for:
"name" : "tutorial-2_layer" and
"name" : "tutorial-2-tilemap_image" make sure these match up with the below code name setting.
Now that we have everything preloading, let’s “load” them within our
create() function and actually use and implement them!
Also notice the setting of the
layer variables. Please make sure to add global variables right before or after the
config variable we set.
If everything worked… you should see a painted map that you created!
Wow… that is great, but you can’t see the entire map?! Why?!!1 Well, that is because we have a canvas that is only 400px by 400px and the tilemap is 800px by 800px (25 tiles each tile is 32px, like we set up in the new map image above), my next tutorial will show you how to move the map with our keyboard arrows! Yay!
If you would like the source files for this tutorial: Download source files
Please keep in mind, you must run these files within a local server environment, such as MAMP (because of cross origin requests) or I just noticed you can open it up in Firefox… will not work in Chrome unless within a local server environment… the more you know -_-