Isometric Tilesets from 3D Modeling (with Blender and Photoshop)

Hi,

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 1part 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).

Basic render properties: 128x128, 100% resolution

Basic render properties: 128×128, 100% resolution

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.

Camera object properties: position and angles.

Camera object properties: position and angles.

You also need to change the camera properties (camera tab) to orthographic, and setup the scale. For our settings, 1.4 worked well.

03 - camera-properties

Camera tab properties: orthographic and scale

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.

05 - 3d modeling

Basic 3d block for the sloped ground tiles

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):

06 - positioning

Align tile with grid

07 - camera view

Camera view: not a clear tile yet

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.

08 - 3d split

Separating the different tiles in 3D

This is how the end result should look like from the top view (7 on numpad):

09 - end result top

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).

10 - end result camera

First keyframe: a clear render of our center tile

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).

11 - moving objects

Moving the objects and creating the keyframes

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):

12 - PNG frames

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.

13 - photoshop layer stack

PS’s ‘Load files into stack’ feature

14 - tiles loaded in layers

Tiles loaded as 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:

15 - open 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.

16 - tileset ready

A nice tileset as the result

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):

17 - map editing with Tiled

Using the tileset

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.

One thought on “Isometric Tilesets from 3D Modeling (with Blender and Photoshop)

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