Rendering isometric tiles using Unity

June 19th, 2022•2 min read Art

Most of the available software for rendering 3D models is either expensive or hard to understand. Luckily, there's Unity, perfectly capable of rendering high quality sprites.

Unity

Preparation

Create a new scene and place the object you wish to render in the center of the stage. You can grab hundreds of 3D models (free to use, public domain) here. Adjust the camera to an orthographic lens and position it accordingly (rotation: 30 · 45 · 0). Adjust the lighting so that the model doesn't have any harsh shadows and is lighted evenly.

Make sure the background of the camera is a solid color, not a skybox. You can add any image effect to enhance the scene, make sure you select the highest quality for every setting. Since we'll be rendering still frames the frame rate will hardly matter.

Programming (C#)

Create a new file called "CapturePNG.cs" and add the following code for capturing a transparent PNG render of the screen from X angles;

using System.Collections;
using System.IO;
using UnityEngine;

public class CapturePNG : MonoBehaviour {

    public int rotation = 45;
    public GameObject myObject;

    IEnumerator Start () {
        for(var i = 0; i < (360/rotation); i++)
        {
            StartCoroutine("capturePNG", myObject.name + "_" + i);
            yield return new WaitForEndOfFrame();

            myObject.transform.Rotate(Vector3.up * rotation); ;
        }
    }

    IEnumerator capturePNG(string name) {
        yield return new WaitForEndOfFrame();

        var width = Screen.width;
        var height = Screen.height;

        var texture = new Texture2D(width, height, TextureFormat.ARGB32, false);

        texture.ReadPixels(new Rect(0, 0, width, height), 0, 0);
        texture.Apply();

        var bytes = texture.EncodeToPNG();
        Destroy(texture);

        var savePath = Application.dataPath + "/../Exported/";

        Directory.CreateDirectory(savePath);
        var file = File.Create(savePath + name + ".png");

        var binary = new BinaryWriter(file);
        binary.Write(bytes);

        file.Close();
    }
}

The code grabs the screen size and creates a new empty texture. Next it'll copy all pixels on the screen to the texture, encode the PNG and save the bytes to a file on disk. You can adjust the path and name of the file to your liking (the Unity project path is the default location). Place the component on any Game Object in the scene and target a Game Object in the inspector. The code will execute once you start the scene, it'll wait a frame before capturing just to be safe.

Rendering result

Result

Run the project and find the file it rendered to, the result will be a perfectly rendered (transparent) isometric render. Adjust the lighting, effects and shaders to get clean results. You can set the resolution of the game window to force the image resolution output.

Batch processing

The variable rotation will tell Unity how many degrees the object will be rotated every step. At 45° we should get eight sprites, at 90° just four.

Batch result

This will capture the model, rotate and capture. Run the code and check the final output path, in there should be perfectly rendered PNG files from every angle. If you had any trouble, make sure the camera background is a solid color and lighting is set-up properly. Also make sure you point the code to the right GameObject in the inspector.

You can expand/improve this process by making the script go through a bunch of GameObject, or rendering other views of the same model alongside isometric renders.

Mastodon