Improving the Visual Design of a Room – Tilesets

Visually, our simple maze game leaves a lot to be desired. The design of the walls is not particularly appealing, for example, or realistic in anything but the most stylised of senses.

In this post, I’ll look at how to add a bit of visual flair to the maze, giving the walls a mock 3D look (actually, an isometric view).

To do this, we’re going to use a tileset. Tiles are small, regularly sized images, such as we have used in our sprites so far; (each image in a sprite might be considered a tile, for example).

A tileset is a single bitmap image that contains a mosaic of several separate, similarly sized tiles, each designed in accordance with a particular theme and with the intention that they are used in association with each other. Tiles are organised in rows within the single bitmap image.

The tileset thus provides a convenient way of packaging several images in a single file and reusing them within an environment such as Game Maker.

To create the (hopefully) good looking version of the maze, you will make all the walls invisible, and add in a background image layer to the game. The background image is drawn in such a way that things that look like walls are placed on the background image underneath the actual, invisible (and ‘solid’) wall objects.

It may feel as if there is some trickery going on here – and indeed there is! The background image, which will depict the walls, plays no tangible part on the execution of the game. When the player character ‘collides’ with the background drawn wall image, no event will be raised. Instead, solid, invisible wall objects placed ‘on top of’ the background drawn walls will provide an obstacle to the player character, will raise an appropriate event and may execute appropriate actions.

Save a copy of your game as it currently stands, for reference purposes, and then save it again using a new name – this will be your new working copy of the game. In the wall object, uncheck the visibility setting so the sprite is not displayed. (You should still be able to see where the wall objects are in your room(s) design, it’s just that they won’t be displayed when the game runs.)

Now you need to draw in the walls using tiles from an appropriate tile set shown – like this:

Save the tileset file to your desktop or Game Maker folder from the following link: Walls Tileset (right click, Save As…)

To load the tileset in to Game Maker, select Create background from the Resources menu, select Load Background and load in the tileset image file that you saved to your computer.

In order to actually use the image as a tileset select ‘Use as Tileset’ in the Background properties dialogue. The tile width and
the tile height should both be set to 32. The image should also be set to Transparent.

Using Game Maker in Advanced Mode (set via the File menu – remember to save your game and reload it if you need to change to
Advanced mode from Simple Mode), open up a room and select the Tiles tab from within the Room Properties window. You can
now select any of the tiles and add them to the room.

Using the ‘invisible’ wall objects as a guide, add appropriate wall-image blocks from the tileset (just select the image you want from the Tiles tab and then click in the room where you want that image to appear. Only add wall images at this point (don’t bother with any grass!)

By carefully changing the view properties of the room when the backgrounds tab/panel of the room properties is selected, you can toggle between the background view and the view of the room containing the wall objects:

From the images shown above, you will see that as well as the walls, I have added a grass background to the room. This part ofd the background actually sits on a lower ‘layer’ than the wall images. (Think back to how traditional cel animation works – frames are built up by drawing a background image and detail that increasingly lies in the foreground is drawn on to transparent acetate sheets that are placed on top of the background and each other).

If you “deselect” the view of the Tiles, you can look at each layer separately:

Add additional layers by clicking on the Add button. You can change the layer number by clicking Change. The higher the layer number, the further into the background it is. (If you find that you have your layers the wrong way round, just change the layer number).

For the grass layer, you can cover the whole room – the wall images will sit above the grass. If the background/tile set is set to transparent, then the grass will show through at the ends and corners of the wall.

Even though we no longer want to see the wall sprite when we are playing the game, we still need to use that sprite within the wall object, albeit making it invisible (untick the Visible checkbox).

There are two reasons for this: firstly, the boundary of the sprite identifies the collision area that is used to detect a collision and raise a collision event; secondly, it means we can see where we’ve drawn the wall when we are editing the room!

So – get to it ;-) See much better room looks once it has real walls?!

You can find more information about using tiles from the Game Maker Help file (hint: search for ‘adding tiles’). Being able to locate and learn from sources of instruction – such as Help files – is an important skill, and one that will enable you to get started with a wide variety of content generation tools that are available on the web.

If you want to explore the world of tilesets more fully, you can find more example tilesets on the Game Maker website: Tileset downloads.

If you want to create and manage your own tilesets, download and install this Tileset Maker for Game Maker (that’s where the tileset image I used in this post actually came from…)

To recap: a tileset is a single image that contains a mosaic of regular, smaller images that have been designed to complement each other. When a tileset is loaded as such, the single tileset image is essentially ‘cut’ into a multitude of separate images that can each be used separately.

Advertisements

2 Responses to “Improving the Visual Design of a Room – Tilesets”


  1. 1 Dudley Grant May 25, 2011 at 6:29 pm

    Hi Tony.

    That tileset link was dead for me, I think it has been changed to http://www.yoyogames.com/resources?cat_id=3

    Thanks for the info throughout all these posts!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Categories


%d bloggers like this: