HTML and CSS Reference
In-Depth Information
Chapter 17
Faster Map Rendering
Colt “MainRoach” McAnlis, Developer Advocate, Google
Any two-dimensional game is going to, at some point, have a separation between semistatic background content
and dynamically animated foreground content. The background content can become a burden to the rendering
pipeline, as it can easily consume megabytes of data as well as a hefty chunk of your rendering pipeline. In this
chapter, I'm going to discuss a few strategies for overcoming this burden, providing trade-offs where your game
may need them.
The MAP Object
You generally need somewhere to store your map data once you load them, and you start by declaring a map class that
will contain all the information you're looking for. I'm going to get ahead of myself here and describe a few of the data
types you'll need:
//from TILEDmap.js
function TILEDmap(){
this.currMapData= null; //copy of the tile information for this map
this.tileSets= new Array(); // a list of the tile sets (ie textures) used for this map
this.viewRect= { //the view-rect defines the part of the map that's currently visible to the user.
"x": 0,
"y": 0,
"w": 1000,
"h": 1000
};
this.numXTiles= 100; //number of x and y tiles on the map
this.numYTiles= 100;
this.tileSize= { //the size of a given tile, in pixels
"x": 64,
"y": 64
};
this.pixelSize= { //size of the entire map, in terms of pixels
"x": this.numXTiles * this.tileSize.x,
"y": this.numYTiles * this.tileSize.y
};
