Stay Home, Make Game — Day 3
After 2 days of hard work in setting up the scene in Unity, I will focus on creating a hexagonal tilemap sprite sheet today.
Quick links of Day 1 & Day 2:
The tool I use to create is Adobe Illustrator, which is convenient to create vector graphics.
Let Day 3 begin!
First, we create an artboard with 1024 x 1024px. Before we decide how big is each tile, let’s study different tile designs:
The width & height values are just for illustrating the aspect ratio. They have different viewing angles, and I personally like the first or second one. There is no right or wrong about your selection.
Next, we have to decide the tile size. In this example, I will choose the first and second one (selected 2 sets for future comparison). Here are my recommended values:
Offset: The first tile (including the hidden rectangle) should be placed at X = 30, Y = 30 in the artboard; this is the offset of the sprite sheet.
Padding: Each tile is 66 x 66px (this is the cell size of the sprite sheet), with 24px padding on each side; these are the padding of the sprite sheet.
Tile Sizes:
- Upper Set: Width = 66px, Height = 51.504px (that’s one of the reasons I hate hexagon; normal tilemap is easier to handle)
- Lower Set: Width = 66px, Height = 66px
To make my life easier, I put a transparent rectangle 66 x 66px behind each hexagon tile on the upper set, and align the hexagon to the bottom edge, just like the above image. You don’t need to fill up all the spaces with tiles; just draw whatever you needed.
After you finished creating the tiles, save the AI file. It’s time to export as a sprite sheet in PNG format. In Adobe Illustrator menu: File > Export > Export for Screens. Select the PNG format and the export location, and you will get a tile sheet in PNG.
Next, we will import the sprite sheet to Unity and create our own Tile Palette. Drag the newly made PNG to the Project panel in Unity. Select the image in Unity to reveal its import settings in the Inspector panel. Change the followings:
- Sprite Mode: Multiple (as the image contains multiple tiles)
- Pixels Per Unit: 66 (set this to the width of the tile)
- Max Size: 1024 (set this to the nearest value to the image width)
Click the Apply button afterward. Press the Sprite Editor button.
Now it comes to the hard part: Slicing the tiles. If you align everything correctly in the Adobe Illustrator, here are the values you need in the Slice menu:
- Type: Grid by Cell Size
- Pixel Size: X = 66. Y = 66
- Offset: X = 30, Y = 30
- Padding: X = 24, Y = 24
- Pivot: Center
Click the Slice button, then the Apply button in the Sprite Editor. If everything goes well, you can expand your tile sheet in the Project window like this:
So far we successfully imported the tile graphics into Unity.
The next step is to create a Tile Palette. Do you guys still remember we used a Tile Palette provided by the 2D Hex Sprite asset package on Day 2? To create a Tile Palette, in the Tile Palette, select Create New Palette from the palette list.
Name your Palette, and select Hexagon & Point Top as Grid Type. Click the Create button. A palette prefab is now created.
Next, drag the tilemap sprite sheet to the empty tile palette. Your tile palette should look like this:
Before we can draw on the Scene, adjust the Grid size to X = 0.99, Y = 0.66 (where the Y value is the width of the tile divided by 100). Now try drawing on the map:
Oops! Something went wrong. We suppose the tiles should form a flat surface instead of appearing like a stair. To solve this issue, go to the Inspector panel of the Tilemap, change the Sorting Order to Top Right, Mode to Individual.
Have fun creating your scene with your tilemap design! On Day 4 we will talk about adding a character into the tilemap and handle Collision Detection.