A tile-based world is a technique used in HTML5 games to provide interesting flexible backgrounds without huge memory costs. The basic idea is to take a number of small images and use them in combination to build the background image of a suit.
Typically, you will be able to build a tile object, which contains a series of small (32 x 32 pixels) images. Each tile object can display any of the images on command. This scheme has a number of interesting advantages:
- Memory requirements can be very small. Each image is loaded into memory only once, so you can create a very large world, with a small footprint of memory.
- Many different tiles can be used. You can build an extremely complex world with one of the beautiful sets of cards you can download from sites like OpenGameArt.org.
- The map is dynamic. The image displayed in each tile can be modified at runtime.
- Tiles can have game effects. Tiles can be used to create interesting tactical situations, such as water that cannot be crossed or mountains that give a defender an edge.
- Maps are simply arrays of integers. To store a tile-based map, you don’t need to store tiles at all. Instead, to simply keep track of tile states.
- Maps can be much larger than the screen. A tile map can be any two-dimensional array of integers.
- Scrolling through a tileset is simple. It is easy to make big scrolling worlds with a tube system, as the display is separate from the data. The tiles themselves rarely move.
- The tiles are suitable for multiple game types. Tiles are often used for role-playing games, as well as board games, tactical games, and side-scrolling platform games.
How to create a Tile object
The Tile object is the foundation of tile-based maps. Here is the code for a simple tile prototype:
var GRASS = 0;
var DIRT = 1;
var WATER = 2;
var NUMSTATES = 3;
Tile () function {
TTile = new Sprite (scene, “grass.png”, 32, 32);
tTile.setSpeed (0);
tTile.state = GRASS;
tTile.images = new Array (“grass.png”, “dirt.png”, “Water.png”);
tTile.row = 0;
tTile.col = 0;
tTile.setState = function (state) {
this.state = state;
this.setImage (this.images [this.state]);
} // End setState
tTile.getRow = function () {
return this.row;
} // End getRow
tTile.getCol = function () {
return this.col;
} // GetCol fine;
tTile.getState = function () {
return this.state;
} // End getState
tTile.checkMouse = function () {
if (this.isClicked ()) {
newState = this.state;
newState ++;
if (newState> = NUMSTATES) {
newState = 0;
} // End if
this.setState (newState);
} // End if
} // End if
return TTile;
} // Fine Tile Builder
The most significant part of a tile is its multi-state nature. It has multiple states. Each state displays a different image. Here’s how to write it:
- Prepare your images.
The most visible parts of the tile based system are the various images. Build or obtain (with the necessary authorizations, of course) some tiles that you can use.
- Building constants for states.
The easiest way to work with states is to assign constants for them. Constants have the advantage of being easily readable by humans and simple integers on the computer.
- Build a standard sprite.
The tile is still essentially a sprite. It generally doesn’t move, so you can set the speed to 0. Use one of the sprite images you want as default.
- Assign a default state.
State ownership is the most important aspect of a tile. Indicates that the status of the tile is displayed. The state value must always be one of the state constants.
- Create a series of images.
Each card will have access to all possible images. Store them in an array. Make sure that the order lines array up to constant values.
- Set up a row and column.
Tiles are placed in a two-dimensional grid, so it can be very useful for monitoring the current tile row and column.
- Add a setState () method.
This method allows you to easily change a card for any of the status values. Use a constant to ensure the state is recognized by your tiles. The state ownership has been changed to reflect the current state and the image is also changed, so the correct image is displayed on the next update.
- Provide data recovery techniques.
These functions return the row, column and current state of the tile.
- Leave editing behavior.
The checkMouse () method determines whether the card has been clicked. In this case, the state is incremented and the new state is displayed.
How to build a tile game map
Each tile is a powerful tool, but the real power of the tile-based structure is how the tiles are combined to create a complete map. The tileset is a two-dimensional array of tile objects. Like most two-dimensional matrices, it is normally managed by a pair of nested loops. Here is the code to set up the tileset:
setupTiles function () {
tileset = new Array (lines);
for (row = 0; row <FILE; row ++) {
Trow = new Array (COLS);
for (col = 0; col <COLS, col ++) {
Trow [col] = new Tile ();
xPos = 16 + (32 * col);
yPos = 16 + (32 * row);
Trow [col] .setPosition (xPos, ypos);
Trow [col] .row = row;
Trow [col] .col = col;
} // With the end for the
tileset cycle [row] = Trow;
} // End of cycle line;
} // final setupTiles
There are only a couple of points to keep in mind:
