Isometric 2D Tile Creation for Unity Game Maps

Enhance your game's visual depth with custom isometric tiles. This guide will walk you through the process tailored for Unity, but the principles can be applied elsewhere.

1. Introduction to Isometric Tiles

Game design is both intricate and rewarding, especially when crafting custom elements that resonate with your vision. Isometric 2D tiles can elevate the sophistication of your game maps and levels.

Asset Diffusion (Beta)_isometric building, low poly style_image-3_1686616672Asset Diffusion (Beta)_isometric garden, low poly style_image-0_1686617070Asset Diffusion (Beta)_isometric gas station, low poly_image-1_1686406772

Generate your tile

Get started by capturing a screenshot of your Unity viewport, this will serve as your base guide for the tile creation. You can find out more details about Isometric tiles in Unity here. Utilize an image editor to accurately define your base and save it as a reference image. Or simply use the one from this example provided below.




In Unity go to the Prompt Window and select the Asset Diffusion model. Add your reference image and select 'Structure mode' with an influence of 50. Let's start with crafting an isometric building. To do this, use the prompt: "isometric building, low poly style", with Guidance set to 9.0 and Sampling steps at 75. Click on Enable ControlNet and Advanced Settings, select the Canny mode and set the slider to 0,5.

Untitled (1)-2

Upon generating your images, select your creation and deftly remove the background using the side panel. This image will typically be saved in the Assets/Textures/Downloaded folder.

Untitled (1)-2


Painting the tiles in a grid

Choose your image and adjust the Texture Type to Sprite(2D and UI) and set the Pixels Per Unit (PPU) to 512, or adjust as necessary according to your image resolution. For instance, a PPU of 470 might suit your sprite size better. Ensure your pivot settings align with your isometric grid - a custom pivot option can help if your base is lower than the center. Don't forget to apply the changes.

Untitled (3)-2


Let's briefly configure the project to enhance tile display. Go to Edit/Project Settings, and under the Graphics tab, set the Transparency sort mode to custom with values: X=0, Y=1, and Z=0.

Untitled (4)-2

With your tiles ready, it's time to create an isometric palette. Go to Window/2D, choose the Tile Palette option, and start populating the grid with your unique assets. 

Untitled (5)-2

Proceed to create a new isometric tilemap in the scene so that we can paint our tiles.

Untitled (6)-2


Now let's configure your grid, select the Tilemap that is inside your Grid. Go to the Inspector window and in the Tilemap Renderer component change the Chunk mode to Individual. This is important so that your tiles are displayed correctly.

Untitled (7)-2     Untitled (8)-2


Now we can add our tiles to the palette so that they can be painted. Click on the selection tool in the Tile Palette to activate the grid. Select one or more sprites and drag them onto the grid. A window will appear where you can choose the folder to save the asset that will be created from this sprite.

Untitled (9)-2



After adding the tiles you can start creating your isometric maps with assets being generated according to your needs. With this workflow you will have assets that work perfectly with isometric maps.

Untitled (10)-2



Remember, this guide serves as a starting point - feel free to experiment with different settings and styles. For instance, the water tile could be created using a blue base tile as a Reference Image with ControlNet disabled. The street tiles were created manually.,



Untitled (11)-2

Congratulations! You have now acquired the skills to create your very own isometric tiles for game maps and levels. These customized elements are an excellent way to add depth, charm, and personality to your games, making them truly unique. So, get creative, experiment, and most importantly, have fun with your game design journey. The world of game creation is full of limitless possibilities waiting to be explored. Enjoy the process!

Asset Diffusion (Beta)_isometric building_image-1_1686660562Asset Diffusion (Beta)_isometric garden, low poly style_image-2_1686617070Asset Diffusion (Beta)_isometric building, low poly style_image-2_1686660359