Using Unity for rendering isometric tiles

Written by Kenney 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 effects to enhance the scene, make sure you pump up the quality to the max. Since we'll be rendering still frames the frame rate doesn't matter.

Programming (JS)

Create a new (Javascript) file and add the following function for capturing a transparent PNG render of the screen;

function capturePNG(name) {
    yield WaitForEndOfFrame();

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

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

    tex.ReadPixels(Rect(0, 0, width, height), 0, 0);
    tex.Apply();

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

    var path = Application.dataPath + '/../Exported/' + name + '.png';

    File.WriteAllBytes(path, bytes);
}

The code grabs the screen size, creates a new empty texture, copies all pixels on the screen to the texture, encodes to PNG and saves the bytes to a file. You can adjust the path to your liking. Next, within the 'Start()' function capture and save the screen by calling the function:

function Start (){
    capturePNG('isometricRender');
}

Place the Javascript on any GameObject in the scene to execute the code at the start (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.

While this is fine, it would be better if Unity exported the ship from every angle. To achieve this we can create a script that rotates the object, and each angle take a snapshop and move on. The number of angles it'll export is easily adjustable.

Batch processing

In the 'Start()' function create two new variables, one to point to the GameObject we'd like to rotate and the second how many degrees to rotate the object every step. At 45° we should get 8 sprites.

var exportObject:GameObject;
var rotation = 45;

Next create a loop that will rotate and snapshot the model:

for(var i = 0; i < (360/rotation); i++){
    capturePNG(exportObject.name + '_' + i);
    yield WaitForEndOfFrame();

    trans.Rotate(Vector3.up * rotation);
}

This will capture the model, rotate, capture etc. 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.72 kB)
Loading comments...

Reading time: about 2 minutes

Paragraphs


Pixeland chat


Other guides

User experience design

by Robert Dunlap

More guides