Skip to content
This repository was archived by the owner on Dec 6, 2022. It is now read-only.

Creating Isometric Graphics

luntdotp edited this page Feb 21, 2013 · 5 revisions

Creating Isometric Graphics

For performance reasons, it's best to pre-render isometric imagery and load it into the game as an image. To accomplish this, we're going to be using Blender and Photoshop. You can also use your favorite 3D modeling or image editing software, though it's up to you to figure out how to set it up for isometric rendering.

Rendering in Blender

Firstly, you're going to need a model. To keep everything to scale, we're going to be using 1 inch (25.4 mm) = 1 foot. Here's a great tutorial on how to model things in Blender.

A template blender file is available here so you don't have to do the following to set up renders.

To set up Blender without the template file, you're going to need to set up the camera. Select the camera and press N to bring up its properties. Under Rotation, change X to 54.736º, Y to 0º, and Z to 45º.

Next, click on the Camera tab of the right sidebar. Under Lens, select Orthographic, and change Orthographic Scale to 200.

Under the Render tab, select PNG as the output format and set the color mode to RGBA. This will give the render a transparent background.

For lighting, it's up to you to determine how you want the scene to be lit. For the example entities, Ambient Occlusion was set to 1 and Environment Lighting was set to 0.2. Both options are under the World tab on that same sidebar.

Additionally, a plane can be placed under your model to produce a drop shadow around the base your model. Just make sure that the plane is transparent so it doesn't show up in the render.

Now you can press F12 to render your entity.

Editing in Photoshop

Once you've saved the render, open it up in Photoshop so it can be resized and positioned properly.

Images displayed on the canvas are rendered to fit the maximum zoom level. As the zoom level changes, the images are scaled down. At the maximum zoom level, the side length of an isometric grid square is 150px, which works out to be 150px high by 260px wide in real-world pixels.

To allow for tall entities, Dominion aligns the bottom edge of entities with the bottom vertex of the grid square and the left edge of the entity with the left vertex of the grid square. This allows for the height of entities to vary and still be properly aligned with the grid.

Create a new document in Photoshop with a width of 260px and pretty big height, such as 390px. Technically, the height can be anything as long as it is enough room for the entity. Make sure the background is set at transparent.

Now select all and copy everything from your image from Blender. When you paste it into your new image, Photoshop will automatically center your entity.

In the above example image, the red rectangle represents the size of a grid square at maximum zoom. Move your entity until the base of it is where you want it to appear in the square.

Once you've got everything just how you want it, resize the image canvas so there is no excess image. This will reduce the size of the image in the end and will speed up game load times.

Save the image as a PNG to the ./assets/entities/ directory.

You may now want to look at the Entity API.

Clone this wiki locally