Introduction
In this tutorial, we are going to take a look at some ways to create Isometric Pathways or Roads to use in your tile-sets. Like many of the Isometric Tutorials from Screaming Brain Studios, we will be using some techniques from previous tutorials (Such as the Isometric Textures Tutorial or the Isometric Cropping Tutorial) so you may wish to familiarize yourself with the topics covered in those tutorials.
Example Isometric Pathways
In the image above, you can see a few examples of Isometric Pathways that have been created with a simple Masking trick that can be used to produce rough dirt pathways, solid paved roads, or even winding rivers made using your existing isometric tiles.
Pathway Masks
Before we even get started, the first thing we need to do is decide on the overall appearance of the pathways we would like to make. For this section of the tutorial, I am going to start by creating a series of masks for a dirt pathway with rough edges. I’m going to work with a smaller tile size of 128×64 so the masks will be slightly easier to create, but you can use whichever size you wish.
Your mask should be a 1:1 size with the same height and width values, typically using the height value of your desired tile size. For example, if you wish to produce a tile that is 128×64, you need a mask that is 128×128, and for a tile size of 64×32, you would need a mask that is 64×64. Start by creating an empty canvas in GIMP that is 128×128 (Or whichever size you wish your tile to be) and fill it with solid black. Next, using the Airbrush Tool or any brush you like, start by creating some simple white pathways, such as lines or intersections.
Basic Pathway Masks
The only important rule to follow here is to try your best to keep everything lined up along the edges. These pathways are meant to interlock and line up with one another along the top, bottom, left, or right sides of the tiles, so it might take a little bit of experimenting to get right. Turning on the grid can help you keep things lined up neatly. The example image above contains a Straight Horizontal Path, Straight Vertical Path, T-Intersection, and a Cross Intersection. To save yourself time, you can create a single T-Intersection and simply rotate it around the center to create the four directional tiles you are going to need, such as in the example below.
Rotated T-Intersection (Right, Down, Left, Up)
The same rule applies for Corner tiles, where you can create one and simply rotate it around the center to create all four corners you will need. However, you can also break up the repetition by creating 4 unique Corner tiles by creating a single image that is twice the width and height of your desired tile size. For example, since we are working with a 128×128 image, we want the canvas to be 256×256 so we can fit all four corners in one image, like the example image below.
Four Corner Tiles
This way, you can produce all four corner tiles and ensure that they all line up with one another correctly before splitting the image into four individual masks. This can be done any number of ways, so we won’t go into detail here. Simply split your large 256×256 mask into four smaller 128×128 masks to get the four Corner tiles you will need.
Split Pathway Corner Masks
By now you should have all the masks necessary to create a full series of Pathway Tiles. There should be 4 Corner masks, 4 T-Intersection masks, 2 Straight masks, and 1 Cross Intersection mask, for a total of 11 masks. Feel free to experiment with different styles or pathway shapes, including variants like rougher edges, slight curves, or extra blobs to add variation to your tiles. You are not limited to 11 masks, depending on how many different variations you wish to create.
Pathway Mask Set
You could also make several different sets of masks to use for each style of pathway you would like, but for this tutorial, we will only be making this one set. In order to use any of these masks, we will have to do a bit of Isometric Conversion in the next step. While it is absolutely possible to use these masks with unconverted textures before converting the result into an isometric tile, I’m going to go ahead and cover how to use them with existing isometric tiles instead.
Alpha Masking
Now that we have a full series of Masks for our pathway tiles, we need to convert them into Isometric versions of themselves. Following the techniques outlined in the Isometric Textures Tutorial, we are going to use GIMP and G’MIC to apply a Cartesian Transform filter to each mask. Using the formulas for the Iso-Floor Left or Iso-Floor Right transform, depending on your needs, convert each of the Masks into Isometric textures. Then follow the steps in the Isometric Cropping Tutorial to crop your masks into appropriately sized Isometric Tiles, as shown in the example image below.
Converted Pathway Mask
Each mask needs to be converted in this manner before we can make use of them properly. Once you have converted all of your masks, open or load the tile you would like to turn into a pathway in GIMP. For this tutorial, I will be using a dirt tile from the Isometric Floor Pack. First, right click on the background layer, or whichever layer the Tile is on, and select Add Alpha Channel if there isn’t one already. This will make sure the background remains transparent. Next, right click on the same layer once again and select Add Layer Mask. A small dialog window will pop up, but you don’t have to change anything, so just press OK to confirm adding the Layer Mask.
Add Layer Mask
This will immediately cause the tile to vanish from view, which is what we want. Tab over to the first Pathway Mask, which in the case of this tutorial will be a Straight Vertical Pathway, and with the Selection Tool active, press Ctrl+A to select the entire canvas. Then press Ctrl+C to copy the mask to the clipboard. Next, go back to the isometric tile again and press Ctrl+V to paste the mask into the Layer Mask channel. You will now see that the tile reappears, though only showing through the white area of the pathway mask we just pasted.
Final Masked Pathway
With the pathway mask pasted into the Layer Mask channel of the isometric tile, the edges of the tile are blocked out, or masked, by the black color in the mask, while the pathway in white is left behind. Now right click on the Floating Selection/Pasted Layer and select Anchor Layer to confirm the creation of the Layer Mask. Finally, right click on the isometric tile layer (This should now be the only layer remaining in the project) and select Apply Layer Mask to merge all the channels and masks together. Simply repeat this process for each of the 11 masks to create a set of pathway tiles that can be overlaid on top of any other isometric tile.
Finished Isometric Pathway Tile-Set
You can either combine and merge the path overlays with your existing tiles to create terrain blends, or you can export just the pathways with transparent backgrounds so they can be used as overlays in Tiled Map Editor or the game engine of your choice. You can even apply the masks before converting the pathways into Isometric tiles, but there is no real advantage to this. Creating a series of masks up front can make the process much easier when you are creating large numbers of tiles or pathways and helps to keep everything consistent across your tile-sets.
As usual, you can snag a huge pack of premade Isometric Pathways in the free Isometric Pathways Pack from Screaming Brain Studios to save yourself some time! This tutorial should help you create additions or expansions to the existing tile-sets using your own artwork or textures.