Using Unity for rendering isometric tiles

Written by Kenney, Haddicus on 06/09/2016

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

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 will grab the screen size and create a new empty texture. Next it will copy all pixels on the screen to the texture, encode the PNG and save the bytes to a PNG file. You can adjust the path to your liking. Place the component CapturePNG on any GameObject in the scene and select a GameObject in the inspector. The code will execute once you start the scene (it will wait a frame before capturing, just to be safe).

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.

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.



Download unityrender_code.zip (89.79 kB)
Loading comments...

Reading time: about 2 minutes

Paragraphs


Pixeland chat


Other guides

User experience design

by Robert Dunlap

More guides