victoralm/isometric-tiles-in-blender-for-unity

This is an attempting to standardize mine procedure of creating 2D isometric tilesets in Blender (2.8x).

Isometric tiles in Blender for Unity

This is an attempting to standardize mine procedure of creating 2D isometric tilesets in Blender (2.8x). This was based at the Clint ballanger's and GameFromScratch tutorials.

The basic .blend file (made with Blender 2.81) and the reference images (512px, 768px, 1024px) can be found at the resources folder.

Blender setup

Eevee

Description	Image reference
On the render properties tab, on Film dropdown, enable Transparent option. Also, on Color Management dropdown, set Medium Contrast at Look option as follows:

Cameras

Change between cameras

Description	Image reference
Use the "CamForPlanes" camera to render planes, and the "CamForCubes" to render cube like tiles. Is possible to change between cameras on the Scene Properties tab as follows:

Camera for Planes

---

Attention:

I'm not using this camera anymore. All the renders will be done with CamForCubes camera. See Unity setup for more information about the correct positioning of the tiles on Unity.

---

Location	Rotation
X: 10	X: 60º
Y: -10	Y: 0º
Z: 8.17	Z: 45º
Image reference

Lens

Property	Value
Type	Orthographic
Orthographic Scale	2.800
Image reference

Render Size

Description	Image reference
For rendering with the "CamForPlanes" camera, the output resolution need to be X: 512 px and Y: 256 px as follows:

Camera for Cubes

---

Attention:

After some more test, I decided to render everything with the "CamForCubes" camera. Then, after import the tiles to Unity, I can adjust the Pivot of each sprite. This way I can avoid manually cut the rendered images on an image editor... See Unity setup for more information about the correct positioning of the tiles on Unity.

---

Location	Rotation
X: 10	X: 60º
Y: -10	Y: 0º
Z: 9.6	Z: 45º
Image reference

Lens

Property	Value
Type	Orthographic
Orthographic Scale	5.600
Image reference

Render Size

Description	Image reference
For rendering with the "CamForCubes" camera, the output resolution need to be X: 512 px and Y: 1024 px as follows:

---

Attention:

I did use background images on the "CamForCubes" camera to set the correct size of each cube.

---

Cubes

All the cubelike tiles will be rendered with the "CamForCubes" camera, with a resolution of 512x1024px. The cubes (Tile_512, Tile_768 and Tile_1024) of the "BaseTiles" collection on the Blender file and the background images of the "CamForCubes" camera are used as visual references. See Unity setup for more information about the correct positioning of the tiles on Unity.

Standard Cube for Tile 512px

Scale:

Axis	Value
X	1.98
Y	1.98
Z	1.61

Description	Image reference
Used "CubeTileBase_512.png" as background image of the "CamForCubes" camera, with Offset Y of -0.25000 as follows:

Standard Cube for Tile 768px

Scale:

Axis	Value
X	1.98
Y	1.98
Z	3.23

Description	Image reference
Used "CubeTileBase_768.png" as background image of the "CamForCubes" camera, with Offset Y of -0.12500 as follows:

Standard Cube for Tile 1024px

Scale:

Axis	Value
X	1.98
Y	1.98
Z	4.84

Description	Image reference
Used "CubeTileBase_1024.png" as background image of the "CamForCubes" camera, with Offset Y of 0.00000 as follows:

Unity setup

After had some tiles, is time to create a new 2D Unity project and bring yours tiles inside it. The setup of the tilemap is very simple.

Description	Image reference
As all cubelike tiles will be rendered at 512x1024px, you'll need to customize its Pivot after importing the sprites. On the Inspector panel, set (for each sprites) its Pivot to Custom with X: 0.5 and Y: 0.277 as follows:
On the Hierarchy panel, right click and pick Tilemap as follows:
Select the Grid GameObject on the Hierarchy panel. And, on the Inspector panel -> Grid component tab, set the Cell Size X: 5.1 and Y: 2.55. Also, set Cell Layout to Isometric as follows:
Optional: Select the Tilemap GameObject (the child of the Grid GameObject) on the Hierarchy panel. And, on the Inspector panel -> Tilemap Renderer component tab, set the Mode to Individual as follows:
Optional: On the menu Edit -> Project Settings, go to the Graphics options an set the Transparency Sort Axis to X: 0, Y: 1 and Z: 0, as follows:
Open the Tile Palette panel via menu Window -> 2D -> Tile Palette. Then, on the Tile Palette panel, create a new palette giving it a name, set Grid to Isometric and Cell Size to Automatic, as follows:
Drag and drop yours sprites (the tiles made on Blender) inside the Tile Palette panel grid.
Start creating your map.

Have fun!!

isometric-tiles-in-blender-for-unity's Issues

Edge anti-aliasing is not symmetrical

On the edge of a tile rendered using Eevee (or cycles for that matter), we see an anti-aliased edge. This edge can't be used precisely as the edge of an opaque tile because the anti-aliasing is not symmetrical. The below image shows what happens if I align two renders pixel perfect on top of a red background: some of the red background is visible between the anti-aliased edges. The transformation of the top render relative to the bottom left one is [256, -896] pixels. Not only is the edge anti-aliased asymmetrically, but the height of the entire block seems to be off by 1 pixel, though it was moved in multiples of 128 pixels. I verified this by measuring the leading edge of the render. It is difficult to tell but it's either 766 or 767 pixels high based on how you interpret the anti-aliasing, but it's not the expected 768 pixels tall. The result is that it creates an even wider gap between tiles.

EDIT: I changed the Film -> Filter Size from 1.5px to 0px and it rendered aliased edges. However now the gap is very clear when the renders are aligned to a 128x128 grid: