Creating Isometric 2D Tiles for Game Maps and Levels in Unity

Game design can be an intricate and rewarding process, particularly when it comes to creating custom elements that fit your unique vision.

 

In this guide, we will walk you through the step-by-step process of creating isometric 2D tiles for game maps and levels, which are perfect for enhancing the visual depth and sophistication of your games. Although we are focusing on the Unity platform, these principles can also be applied to other platforms.

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.

base_isometric2

Untitled-2

 

In Unity go to the Prompt Window and select the Asset Diffusion generator. 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

Asset_to_palette

 

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

Tile_painting2

 

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 Composition Control disabled. The street tiles were created manually.,

 

Conclusion

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