Version: Unity 6.4 (6000.4)
Language : English
Isometric tilemaps
Add 3D height to an isometric tilemap

Create an isometric tilemap

An example of an isometric tilemap. A desert-like temple environment with a witch character.
An example of an isometric tilemap. A desert-like temple environment with a witch character.

Create isometric tilemapsA GameObject that allows you to quickly create 2D levels using tiles and a grid overlay. More info
See in Glossary
, which use a 2D grid to simulate a 3D environment and create the illusion of height and depth.

There are two types of isometric tilemap in Unity:

  1. Isometric, where everything on a tilemap is at ground level. To create 3D height, you create a separate tilemap for each level.
  2. Isometric Z as Y, where you can set the 3D height position of tiles within a single tilemap.

Import isometric sprites

When you import a sprite or spritesheet texture, do the following:

  1. Set MeshThe main graphics primitive of Unity. Meshes make up a large part of your 3D worlds. Unity supports triangulated or Quadrangulated polygon meshes. Nurbs, Nurms, Subdiv surfaces must be converted to polygons. More info
    See in Glossary
    Type
    to Tight, to avoid Unity drawing transparent pixelsThe smallest unit in a computer image. Pixel size depends on your screen resolution. Pixel lighting is calculated at every screen pixel. More info
    See in Glossary
    at the corners of the isometric tiles.

  2. Set Pixels Per Unit (PPU) to the width of a tile in your texture in pixels. One unit is one cell in the tile palette and the tilemap, so setting the PPU to the width of a tile makes sure that the tile fits within a single cell.

    If you set Pixels Per Unit (PPU) to a lower value, the tile expands beyond the width of a cell.

  3. For each spriteA 2D graphic objects. If you are used to working in 3D, Sprites are essentially just standard textures but there are special techniques for combining and managing sprite textures for efficiency and convenience during development. More info
    See in Glossary
    in a texture, open the Sprite Editor window and set a custom Pivot at the center of the 3D floor of the tile, so the 3D sides of the sprite extend below a grid space on the tilemap. For more information, refer to Sprite Editor tab reference for the Sprite Editor window.

    A floor of green isometric tiles. The tiles on the left and right have their pivot point set higher, so the ground aligns with the isometric tilemap cells.
    A floor of green isometric tiles. The tiles on the left and right have their pivot point set higher, so the ground aligns with the isometric tilemap cells.

Note: Isometric sprites have a diamond shape but you can slice them into rectangles as usual in the Sprite Editor.

If you enable collision for tiles, either enable Generate Physics Shape, or to create an isometric colliderAn invisible shape that is used to handle physical collisions for an object. A collider doesn’t need to be exactly the same shape as the object’s mesh - a rough approximation is often more efficient and indistinguishable in gameplay. More info
See in Glossary
select the tile asset and set its Collider Type to Grid.

Create an isometric tile palette

To create a tile palette with an isometric grid, do the following:

  1. From the main menu, select Assets > Create > 2D > Tile Palette.

  2. Select Isometric.

  3. In the Project window, select the created tile palette.

  4. In the InspectorA Unity window that displays information about the currently selected GameObject, asset or project settings, allowing you to inspect and edit the values. More info
    See in Glossary
    window, set the y value of the Cell Size property. To calculate the value, divide the height of the 3D floor of a tile in pixels by the width of a tile in pixels. The y value controls the height of the isometric diamond on the tile palette grid.

    A tile with a 3D floor height of 32 pixels and a width of 64 pixels. The y value for Cell Size is 16 / 32 = 0.5.
    A tile with a 3D floor height of 32 pixels and a width of 64 pixels. The y value for Cell Size is 16 / 32 = 0.5.

    Note: The default Cell Size has a x value of 1 and a y value of 0.5. This is a ratio of 2 to 1, which is a common ratio for isometric tiles.

You can now add sprites to the tilemap and paint as normal. For more information, refer to paint tiles into the scene.

Create an isometric tilemap

When you create a tilemap, do the following:

  1. Set its type to either Isometric Tilemap or Isometric Z as Y Tilemap. For more information, refer to Create 3D height on an isometric tilemap.

  2. In the Inspector window, in the Grid component, set the y value of the Cell Size property so it matches the value you set in the tile palette.

  3. In the 2D renderer asset, set the Transparency Sort Mode to Custom Axis, then set Transparency Sort Axis to 0, 1, 0. These values ensure Unity renders higher tiles behind lower tiles, to provide a sense of depth.

    Note: This property has Transparency in its name because Unity renders 2D objectsA 2D GameObject such as a tilemap or sprite. More info
    See in Glossary
    during the transparent render pass of the render pipelineA series of operations that take the contents of a Scene, and displays them on a screen. Unity lets you choose from pre-built render pipelines, or write your own. More info
    See in Glossary
    .

Note: If your project uses the Built-In Render Pipeline, to set the Custom Axis values, select Edit > Project Settings > Graphics > Camera Settings.

Additional resources

Isometric tilemaps
Add 3D height to an isometric tilemap