loading words...

May 28, 2019 17:23:53

Unity - Procedural Map Generation Using Isometric Tilemaps

by @valentino | 776 words | 60🔥 | 358💌

Valentino Urbano

Current day streak: 60🔥
Total posts: 358💌
Total words: 170604 (682 pages 📄)

Unity has added great support for isometric tilemaps in recent years. You can work on tiles of your own dimensions over different layers.

This article is based on multiple components taken from the example Unity project on tilemaps including the pixel-perfect camera and the isometric character controller. You can find both in the example project.

Tilemap Layers

You can take the different layers from Unity's example isometric game as a solid starting point:

- Ground Layer

The layer where the player walks on. Most of your levels will usually be made of ground tiles.

- Ground Detail Layer

The obstacles and decorations related to the ground layer, a car for example.

- Level 1 layer

The 'First floor' of the map. It's the layer the player walks on after having walked on a ramp and reached the 'first floor' of the map.

- Level 1 Detail Layer

The obstacles and decorations related to the 'first floor'.

- Collider Layer

The only layer where automatic collision detection takes place. Used for both non-walking areas and obstacles.

Unity uses these layers to figure out what to draw on top or behind every single item in your scene since isometric is 2.5D: a 2D environment that gives the illusion of 3D.

[Part 2 coming tomorrow]

Playing in the editor

Before trying to use procedural generation you should start with the unity editor.

Open the tile palette and place it next to the scene view. This way you can easily drag tiles from the palette to your scene.

https://imgur.com/MWiUe8A

Before doing that you need to add your sprites to the palette (or you can use the example project from Unity). From the tile palette click on 'Create New Palette', give it a name and save the file. Drag your spites in the tile palette editor saving the generated file. After you've finished dragging anything you can now paint your grid. Don't forget that you can create multiple palettes if you need, for example, you can have one palette for each level or one palette for each biome.

From the left panel open up the grid gameObject and take a look at your available layers. Try to map out mentally which layer would be more appropriate for each object you plan to add to the scene. Don't worry if you're not certain yet, you can always go back to your tilemap and change any tile.

https://imgur.com/m6yZ37B

When you have a rough idea about what's going to end up as your ground - base layer marks it active from the tile palette.

https://imgur.com/iTIYq9W

Select the specific tile you want to add to the ground layer. Double click on it and drag it into the scene. You can now keep dragging tiles or simply paint as if you were in Photoshop.

Once you're satisfied you can move on to the other layers and follow the same exact steps to add them to the scene. Take care about the collider layer since it's the only layer that will collider with your player.

Play the game and test it out. If you've set up a high velocity for your character you might notice that collision detection is spotty, that's due to the fact that currently collision detection is set as dynamic. Set it to continuos to fix the issue.

You can now use the Eraser tool to delete everything from your scene.

Procedural Generation

The tilemap I was working with consisted of a single tile for each section of the map. The player would start at the top of the section and move downwards. The various tiles needed to be placed at the same distance, one below the other.

This is going to be the result:

https://imgur.com/yB8JuLS

The Tile

First, create a new class to hold the different layers for each section of our tiles. In my case, this meant 2 tiles: one for the ground and one to be used both for the collider layer and the ground detail.

But this aggregate tile could grow or shrink based on the needs of the specific application. If you need an additional layer you can add it, same thing if you need to remove it. I can't stress enough that the important part of the system is that it has been designed based on having 1 tile per section and it won't work for any other use case, but for this use case, it's great.

Ztile.cs:

using UnityEngine;
using UnityEngine.Tilemaps;
[System.Serializable]
public class ZTile
{
  public Tile tile;
  public Tile obstacle;
}

We use [System.Serializable] so that we can add tiles from the inspector. This way if we have a designer they can add custom tiles and try new designs without the need of having a developer present to edit the code.

contact: email - twitter / Terms / Privacy