HTML and CSS Reference
In-Depth Information
Chapter 6
Autotiles
Ivan Popelyshev, Game Developer, bombermine.com
Tile-based maps are the easiest way to construct dynamic worlds for 2D games. Such maps are described by a grid,
where each cell belongs to one possible type. Most map formats allow the concept of layers in their rendering engine.
A single cell can have multiple graphics that render to the same location of the map. In this chapter, I will discuss and
solve the following common problems:
•
Visually, there are types of tiles that quickly become redundant and an eyesore. An entire
screen painted with the same grass tile quickly becomes boring. Artists often have to produce
additional artwork and layers in order to hide such repetitive visuals.
•
Memory usage is another problem. If a map is big, you can't create objects for each cell
without significant memory loss. A number must describe most cells, which is an index of
their tile. If you store only the numbers of tiles instead of objects, then any change in the list
of possible tiles can ruin an already-drawn map.
•
For large, complex worlds, the asset creation pipeline can quickly become an issue. Problems
with graphics files and tile organization quickly present themselves as technical problems for
large team 3D voxel games. If you want to make a Minecraft clone, this tutorial has to be in
your favorites list.
The first problem is solved with an autotiles technique, where an algorithm, depending on the types of all
surrounding tiles, generates each rendering sprite for a tile.
This chapter is based on the editor code from Chapter 11, where the basic functionality for editing maps is
created. In this chapter, you will do something serious that extends your epic engine.
Shadows
Let's create a separate type of object tiles: a solid. Solids are necessary to create closed spaces; the characters
can't go through them. Solids can be of different types: some are destroyed easily, and some are indestructible.
The configuration to accomplish this is shown in Listing 6-1.
Listing 6-1.
Solids
var ShadowConfig = {
init: function(game) {
var tiles = game.tiles, sprites = game.sprites
tiles.addMany(SolidTile, ["brick", "wall", "bush", "block", "metal"])
} }
