For our now game, Fields of Gore, we are going to create loads of isometric (actually dimetric, that gives you perfect 2×1 clear diagonal lines) tilesets for the several battleground settings the game will include. This is a challenge in terms of art production efficiency, and we decided to use the pre-rendered-3D-models approach because this allows us to easily modify and recreate all the assets from the original 3D models.
For a start, this great tutorial from Clint Bellanger (part 1, part 2) will teach you some of the basics, including setting up Blender to correctly render your 3D models as isometric tiles. The goal of our tutorial is to complement Clint’s by showing more details of how you can create seamless isometric tiles with this approach (tiles that go well side by side, and can be combined in different ways).
We also put a great deal of effort on automating, so after the initial setup is done, the whole process of generating individual tile images and combining them into one tileset can be done in a couple of clicks.
You can download the original tutorial source files, so you can follow each step.
For this tutorial, you’ll need Adobe Photoshop for automating the combination of tiles into a tileset (but you can also do it with free software, such as Gimp); Blender for 3D modeling and isometric tiles generation (we’re using version 2.6); and the Tiled map editor for trying out your own tiles.
01 – Setting up Blender
Most of the steps shown in this first part are already covered in Clint Bellanger’s tutorial, but we’re going through them so you don’t forget to check if everything is in place. We chose to use a tile-size of 128×128 pixels, because we want to have some detail and support small vertical structures in a single tile (elevated ground, etc).
Now select the camera object and bring up its properties by pressing ‘N’. Place it in a ‘diagonal’ position from the scene origin (I use X = 10, Y = -10). You’ll need to setup the Z value according to Clint’s tutorial (for the tile style and size we’re using, we ended up with 8.1625). The angles MUST be 60 degrees for X, 0 for Y, and 45 degrees for Z. This will transform the grid squares into perfect 2×1 diamond shapes.
You also need to change the camera properties (camera tab) to orthographic, and setup the scale. For our settings, 1.4 worked well.
02 – 3D Modeling
For a basic sandy ground, we wanted to have nice slopes with all the possible types of corners. The only way to achieve this is to start with a seamless ground texture, and create the ground block around it. In the picture bellow, you can see the basic block that will make 9 different tiles (the center ground-only block, 4 ‘outside’ corners, and 4 side-slopes). Notice that the quads that form the basic ground tile are selected. We’ll separate these 9 parts later on.
We chose to have the unitary grid unit to represent the ‘virtual block’ on our isometric tileset, so we place the quad that makes the center ground-tile exactly above the first grid square (this will make the camera setup easier, even when you have elevated tiles such as this):
At this time, the camera view still doesn’t give as a clear perspective of our tile. Now we need to separate the different parts (later we’ll use Blender’s animation features to automatically reposition the tiles and render them). For this setup, separating each tile by a blank grid square is enough to clear the camera from picking undesirable parts from other tiles.
This is how the end result should look like from the top view (7 on numpad):
03 – Automating tile rendering
Now we have a clear render of our center tile from the camera view, but we need to render all different tiles (9 in this picture). We’ll use Blender’s animation feature for this. What we need to do is to create a keyframe for each tile that needs to be rendered, moving the tiles to the front of the camera (or the camera itself on X and Y), each at a time. You can create a keyframe by pressing ‘i’ (remember to choose ‘location’ as the recorded attributes for the keyframe).
Remeber to move the animation cursor to the next frame on the timeline before creating a new key frame. You can also automate this process by pressing the ‘record’ button on the timeline. Here we can see the next rendered frame (since each tile is separated by a blank grid square, we move the objects by 2 units on either X and/or Y for each new keyframe – this EXACT movement is mandatory, or you’ll end up with tiles that don’t fit together).
When you press ‘animation’ at the Render tab, Blender will create a nice PNG file for each keyframe (the output folder and file format can be chosen in the same tab):
05 – Automating the tileset composition
There are other tools to do this, but here we show how you can combine all the tiles into a single tileset by using photoshop’s automation features. We’ll show a step by step process, but you can make it work with a single click by ‘recording’ these steps into a ‘action-batch’.
Firstly, you need to load all tile images as layers into a single image. You can do this by using the option File -> Scripts -> Load Files Into Stack. Choose all tiles, as shown bellow, and they will be loaded into layers.
To align the layers side by side, we included a photoshop script in the project source files. Just go on File -> Scripts -> Browse, and load the script:
This script will resize the canvas and perfectly align the tiles into a tileset. You can modify the number of columns by editing the script itself.
You can now use your newly rendered tiles to create isometric maps with Tiled. With our setup, you must create a map with a tile-size of 128×64 (2×1), and load the tileset as 128×128 (because of the vertical clearance):
We hope we’ve liked this tutorial. The graphics included are based on free stock images from the internet, and will not be part of our final game. You can use the material anyway you want.