Stay Home, Make Game — Day 2
After a whole day of torture by Unity problems (see Day 1), I can finally start building my first Tilemap. Let me recap what I have got so far:
I use Unity 2019.3 to create a 2D project, aiming to create a 2D game based on a Hexagonal Tilemap. I have downloaded an asset package as well as 2 Unity packages via the Asset Store and Package Manager respectively.
Then, we add a tilemap via menu: Game Object > 2D Object > Hexagonal Point Top Tilemap. Two game objects will be added to Project Hierarchy, Grid, and its child Tilemap.
Let the Day 2 begin!
To start building the Hexagonal Tilemap, open the Tile Palette from Windows > 2D > Tile Palette and make use of the “HexPalette_Blank” provided by the 2D Hex Sprites package. I suggest dragging the Tile Palette to the panel group of Inspector, which you can view the Tile Palette and the Scene panel side-by-side.
Before we start, let me introduce the Grid and Tilemap game object.
Grid
The Grid game object provides a grid layout (Hexagonal/Isometric/Rectangle) in the Unity editor. From the Inspector panel, you will find the Grid settings:
The Cell Size is important and it defines the size of the Grid as well as the perspective of the hexagon.
- If your game decided to be top-down, then your cell size should be X = 1, Y = 1, Z = 0. In such arrangements, it is difficult to make things look 3D.
- If you decide to make your scene to have some height differences, then your X and Y value of the cell size should be less than 1.
Here is a little demonstration for easier understanding.
There are 2 ways to make perspective cells:
- Make X or Y value smaller than 1 so that the hexagon looks like viewing from an angle from the bottom (see Perspective A and C)
- Add shadows on to the Top Down approach (see Perspective B). In this way, the ratio of X and Y can stay at 1:1.
Important Concept: One Grid can contain multiple Tilemaps, in which each tilemap is responsible for a layer (e.g. background, foreground, decorations, etc.).
At this moment, we change the Grid Cell Size to X = 0.758, Y = 0.758, as the supplied tiles from the 2D Hex Sprites package is smaller than the default grid cell size.
Tilemap
Each Tilemap game object provides a layer of visual decorations on-screen. Apart from that, each tilemap layer has its own Collision Collider, which defines which layer is accessible by the character (for example) and triggers appropriate events.
To draw a Tilemap, select Tilemap under the Grid, the hexagonal tilemap grid will show up. Then in the Tile Palette panel, select the Brush mode, select your favorite tile and paint on the Scene panel directly, just like this:
For the 2nd layer, you have to add one more Tilemap from the menu; a new Tilemap game object will be added under the Grid game object. Once you selected the new Tilemap (highly recommended you to change its name), you can continue to draw in the Scene panel.
Hint: to remove some of the tiles, you can use the Eraser tool to remove those unwanted tiles.
Have fun decorating your own scenes! I will introduce how to create your own tiles in Adobe Illustrator, import it to Unity, then create your own Palette on Day 3 of this series. Stay tuned!
Other resources:
- Here is the over-simple official manual of Hexagonal Tilemap: https://docs.unity3d.com/Manual/Tilemap-Hexagonal.html
- Tutorial at Unity Learn Premium (free access during Coronavirus period):
https://learn.unity.com/tutorial/working-with-hexagonal-and-isometric-tile-shapes
In my opinion, this tutorial is over-simple as well, didn’t cover most scenarios you’ll probably encounter.