Preparing Your Graphics


Tiles, Tilesets and Tile Atlases

The key to understanding the Game Engine mode is knowing how to prepare your graphic assets. The Game Engine arranges everything into 2D graphic “tiles”. Sprites, Text, Backgrounds are all made up of image tiles.

Tiles are arranged into tile sets. A tile set is a collection of tiles that all have the same width and height. A tile set is like a palette of tiles you can use to create a background or animate a sprite.

Finally a tile set is mapped into a tile atlas (or map of tile sets). A tile atlas mirrors the way images are stored on the GPU hardware. It's done this way for maximum speed, flexibility and compatibility with the on-board GPU

In an app where many small tiles are used frequently, it is more efficient to store the tile sets in a tile atlas which is treated as a single unit by the graphics hardware. In particular, because there are less rendering state changes by binding once, it is faster to load one large tile atlas one time than to load many smaller tiles as they are drawn.


Above is a tileset that contains six 32x32 pixel tiles. It is stored as a 192x32 PNG file. PNG files are used because they support transparancy.

The task of arranging the tilesets in the tile atlas is one of those tasks that humans do a lot better than computers. Humans can make decisions about the size and position of each tileset within the atlas because it's the humans that draw and size the tilesets in the first place.


It's fairly safe to assume that all Android devices have at least 1mb of on-chip GPU ram. A tile atlas is a way of dividing up that memory for use in your game. You might not need so much and could define a 512 x 512 block of memory, but the length and width of your atlas must be a power of two.

The following functions may be used to get the max size of a devices video ram.

GenGetMaxAtlasSize()

GenGetMaxAtlases()


Begin planning your tile atlas as you begin to plan your game. Choose your atlas size early and make it as small as possible. The layout of your tile atlas will influence your design and vice versa.


Say for the moment that you have a graphics area 1024 x 1024 and you need to fit all the graphics for your game in that space. A tile atlas is like a map of that 1024 x 1024 area. Within that atlas you have your tile sets. You can think of these as special bitmaps. Each tile set is further divided into tiles. It's these individual tiles that get displayed by the sprites.


Below is a page from my notes with a drawing of how I divide up the tile atlas for Mintoris Space.


As you can see, there are many tilesets in this 1024 x 1024 atlas. The position of each tileset is the coordinates of it's upper left corner within the atlas.

Think of the tile atlas as one big master bitmap. What you do is take your tileset, which is just a smaller sub-bitmap, and insert it into the tile atlas. Mapping tilesets into your tile atlas is a bit like putting a puzzle together. You must take your tilesets, which are rectangles and fit them into the tile atlas which is a bigger rectangle. The tilesets must not overlap one another.

Once all your tilesets have been fit into one big graphics block, the tile atlas is then loaded into video ram. Once loaded, your graphics are in a format the GPU (graphics processing unit) can use directly with incredible speed.




GenTileAtlas()


GenTileSet()


GenMapToAtlas


GenLoadAtlas




GEN004 Star Sprite


Game Engine Overview







Become a Patron