The Tile Set Editor

Introduction

In this tutorial we are going to look at the GameMaker Studio 2 Tile Set Editor. You can also watch this video on it:

The tile set editor is where you can take a sprite resource and convert it into a tile set for use within your game rooms. A tile set is a graphical resource used to add images into your game but without the need for using an object. They are very fast to draw and require little processing power, making them ideal for creating platforms, background scenery and anything else that objects may not have to directly interact with.

Now, tile sets do come with some caveats. To start with tiles are always placed on a grid. The grid does not have to be square nor does it have to be a power of two - so a tile set that uses 20x45 grid cells would be fine - and you can only have one tile per grid cell. When placing your tiles in the Room Editor you can overlap tiles by placing them on different layers, but the tile set itself is one tile per cell. You are also limited when it comes to rotating tiles, as they can only be rotated 90° or mirrored along the vertical axis or flipped along the horizontal axis. You can also animate tiles, but there are certain caveats associated with that too, which we'll discuss later in this tutorial.

For now though, this tutorial is going to explain how to create a basic tile set resource...

Creating A Tile Set

A tile set will need to have been assigned a Sprite Resource before you can use it. To create a tile set the sprite will need to have each tile spaced on a grid, and the very first tile should be blank, as this is the "empty" tile that is used for deleting. Essentially a tile set layer in the room editor will always have tiles, with the tile being used initially set as the empty tile in the tile set (note that even if you have a tile at the empty position, it will not be drawn). If you look at the wall tile set sprite shown below, you can see that the upper left position (tile index 0) is empty, for example:

Once you've created your tile set, you would import it into the GameMaker Studio 2 Sprite Editor and then create a new tile set by right clicking on the Tile Set Resource and selecting Create.

This will create a new tile set which can then be named and where you can supply the sprite resource to use. Note that when creating your tile set, you can "pad" the tiles with empty pixels if that makes it easier for you and then set offset and separation values when you create your tile set resource in GameMaker Studio 2, as shown in this next image:

The option for Output Border will be discussed later in this tutorial, so we'll skip to the Group option. This can be used to assign the tileset to a specific texture group that you've defined in the Texture Group Editor. This option is useful for keeping all your level sprites and tilesets on the same texture page and avoiding unnecessary texture swaps. The final option, Disable Source Sprite Export will - when checked - prevent the base sprite used for the tileset from being exported as part of the game, which avoids having the image duplicated on the texture page. In general you will want this checked, unless you are also using the sprite in your game (for example, to draw specific tiles using draw_sprite_part()).

Once you have created your tile set, it's ready to use in the Room Editor, where you can now create tile layers and draw tiles to them to design your game rooms. If you are unfamiliar with the room editor, then press to open the manual or download the IDE Basics - Room Editor tutorial from the start page of GameMaker Studio 2.

Brushes

By default when you "paint" tiles onto a tilemap layer in the room editor, you select a single tile and paint with that. However, tile sets are almost always designed to have sections that fit together in different ways to form whole sections. For example, an RPG tile set may have landscape feature tiles that can be connected to create larger or smaller features depending on the number of tiles used. Now, placing multiple features like this on a room layer would require you to go back and forth many times to change tile, which is not good for your workflow. To resolve this, we have added tile Brushes to the tile set editor, available when you click on the Brush Builder button:

In the Brush Builder you have the original tile set on the left and a blank "canvas" on the right. You can now select any tile from the left and paint it on the right to create custom "brushes" which you can then use in the room editor. Note that you can click and hold the left mouse button then drag on the tile set to select multiple tiles to paint into the brush canvas. The following image shows our previously mentioned landscape features as an example of five custom brushes made from a single tile set:

On the right you can see five features that we've made (highlighted red in the image). Notice how we've left a gap of one tile between each feature - this is because any touching group of tiles will be treated as a single brush in the room editor, so we leave a gap of one tile to show that each set is a distinct brush we want to create. While creating your brushes, you paint with the left mouse button and delete with the right mouse button . You can also zoom the tile sheet or the brush canvas using / and the mouse wheel when the mouse is over one of the windows, or you can pan around using + . Note that you can also use the zoom tools within the editor windows to change the zoom levels of either window.

At the top right you can see the currently selected tool, and you can also set the size of the brush that you want to paint with. The default size is 1, which is a single tile, but if you set it to higher values then you can paint (and erase) with a larger brush composed of the selected tile repeated, as shown in the image below:

The editor also has a number of other tools other than paint and erase . You have the flip , mirror and rotate tools which can be used to change how any tile (or selection of tiles) is drawn. Rotate will only rotate the tile 90° but combined with the mirror and flip options it permits a full rotation of the tile. These tools will flip, mirror or rotate the currently selected tile (or tiles) for painting into the brush canvas, but if you have used the Selection tool beforehand to select a tiles from the brush canvas, they will act on the selection instead.

For faster editing you can use the flood-fill tool which will fill any space surrounded by tiles, and you also have the line and rectangle tools, which operate by clicking , dragging and releasing.

The final tool available to you from this editor is the Autotile tool. We'll discuss autotiles a bit more further on in this tutorial, but suffice to say that using this will make the tiles being drawn to the brush canvas join up, as long as the autotile editor has been set up correctly.

Below the tools, you can find two different sections for selecting any autotile or animated tiles that have been created using the current tile set image. A single sprite that is used for a tile set can have many, many, single cell images in it, and these can be combined in the Animation or Autotile editor to create custom brushes which will show up in these sections and can be used in conjunction with regular static tiles to create brushes.

Once you have set up all the brushes you require, you can then use them to paint tiles onto any tile layer within the room editor.

Animations

Tiles are generally considered to be static cells within the game room, however with GameMaker Studio 2 it is possible to animate them, just as you would a sprite. Why not just use sprites, you ask? Well, sprites have a certain processing overhead due to them being associated with a bounding box and the way in which they are rendered, but tiles have a much lower processing overhead and so are faster to render. This does come at a price however, in that with tile set animations you are limited to creating animations that must be a power of two in length - ie: of 2, 4, 8, 16, etc... frames - and they must obviously be created within the tile grid, and they must all animate at the same speed (on a per-tile set basis). However, even with these limitations, animated tiles are a powerful feature that can be used to add life and colour to otherwise static environments and backgrounds.

To create a tile animation you must first have a tile set that has the required tiles all within the one sprite image (but not as sprite frames, so a single large sprite frame with all the animation images within it), and then in the tile set editor you click on the Tile Animation button to bring up the Animation Editor:

The example image above is a single image with all animation frames contained within it, but it should be noted that the image could also contain other non-animation tiles too, since you can use a single massive tile set and then "cherry pick" the parts of it that you want to create the animation from. For example, you could have a large landscape tile set with trees, earth and water, and within the tile set have multiple tiles to be animated to make the water ripple.

To create a tile animation you first have to add an animation to the animation library by clicking the Add Animation button , which will add an empty animation strip to the library and request that you select a number of frames to be used:

You will then be presented with a view of each empty animation frame, with the initial frame highlighted for you:

If you then go back to the tile set image on the left of the editor you can click on any tile to add it into the animation and the frame will advance to the next one. Clicking successive tiles will fill up the animation, which you can then preview by clicking on the "play" button beside the frames:

Once you have done that your animation will become part of the animation library and when you enter the room editor you can select it and place it within the room. Note that if you select any of the tiles from an animation to place in a room, that tile will animate from the tile onwards, so you can "desynchronise" an animation by placing separate frames within the room and they will all animate. The only caveat to this is that the animation speed will always be the same, since it is defined for the whole tile set and not individual animations within the library.

Auto Tiles

The Auto Tile feature is an incredibly powerful tool that can be used to make level building much easier, whether it is for a top-down or side-on view project. Essentially, you create an autotile library, and then whenever you lay down a tile from that library it will "connect" with those tiles that are around it to create a seamless wall or platform.

Before you start using the autotile feature however, it is very important that you have set up the tile set sprite correctly and that you choose an appropriate type of autotile. The types available to you are 47 tile autotiles, or 16 tile autotiles, with (in general) 16 tiles being used for top down (since they give nicer transitions) and 47 being used for platformer/side on views, but that is by no means a hard and fast rule and will depend on how you want your final project to look.

The image below shows a typical 47 tile and 16 tile tile set for autotiling:

Now, just looking at the images doesn't really tell you how they will fit together so we'll open the Autotile Editor from the Tile Set Editor and add them. The Autotile Editor looks like this:

Note that the sprite being used has ALL the tiles we require (and can also have other tiles, since you can pick and choose which ones to be in the autotile). You can now click on the 47 tile button in the Templates area to create a new 47 tile library entry and it will bring up the template to use for selecting the tiles you need:

In the template, the light grey area represents the outside edge of the tile being used and the darker grey is the "fill" area. To add a tile into the template, simply click on the first available template cell and then select the tile to add from the left:

If you make a mistake, simply select the autotile that you want to remove and select the "empty" tile from the tile set. After you have added them all in you can check the tiles against the template by clicking the "Show Guide Overlay" button at the top, and this will toggle the template overlay on the final autotile, as shown in the image below:

If you want to make a 16 tile autotile, the proceedure is exactly the same as that explained above, only instead of using the 47 tile template you use the 16 tile template:

We now have some autotiles in our autotile library taken from a tile set. These can now be used in the room editor, by simply creating a tile layer and then selecting one of the autotiles from the library (which will select automatically the autotile brush from the top of the room editor) and painting in your room. The tiles will now auto-magically connect up to create properly sequenced tile maps.

Summary

That concludes this overview tutorial for the tile set editor. As you can see, while tile sets have their limitations, they are by far one of the most powerful features of GameMaker Studio 2, and permit you to have unprecedented control over just how you build your game levels and worlds. Hopefully you can now use the different tile set editors easily, but don't forget that if you get stuck or are unsure of something, you can always press to open the manual and look it up.