HTML and CSS Reference
I'm going to cover parsing the map data in a moment, but first I'd like to point out that, in this chapter, I will be
introducing a couple different ways to render your map. As such, the source code will require a bit of fragmentation
in order to show off these principles. For instance, each technique has a separate type of draw function, so you allow
the map object simply to call the global override the onDrawMap function to handle the technique-specific details.
Note that here, however, you don't let the map draw until it has been entirely loaded into memory. This is important,
because otherwise, you may end up rendering partially loaded information, which may not be visually pleasing to
this.draw= function (ctx)
onDrawMap(ctx); //offload the actual rendering of this map to some external function
Loading a Tiled Map
Most maps come from a pregenerated artist tool. Usually, some plucky artist gets to sit down (alongside a designer)
and map out the visuals for a game. In this case, you'll find that the Tiled editor is a great tool to use to generate maps,
and, lucky for us, it outputs to a JSON format. I'll skip over how to create a map using the Tiled editor and point you
to the relevant documentation on this topic. For the sake of this tutorial, I'm going to work with an existing tiled map
from the Girls Raised in Tennessee Science (GRITS) Collaborative Project (see Figure 17-1 ).
Figure 17-1. The Tiled editor