Disclaimer: I am neither a professional game developer nor am I a professional programmer. I doubt I am following best practices. This is just what worked for me at the time. Hopefully it works for you if you’re playing along while reading!
Version of Unity used: 2019.4.13f1 Personal
The previous posts in this series can be found under the CardConquest category on this blog. Before I had created a infantry unit, and then created a highlight effect when the player clicks on the unit. In this post, I plan to do the following:
1.) Add a new unit type: a tank
2.) Create land objects that the units will move on
This post is where the my disclaimer should be heeded the most. The land objects I will be creating are hex tiles. Unity has some built in hex tilemaps that you can use. Unity provides some tutorials on how to use the hex tilemaps, but I honestly couldn’t understand them so I decided to create everything on my own from scratch. So, this tutorial and the proceeding posts in this series will not use Unity’s hex tilemaps. This is likely a mistake on my part and so I don’t know, you should probably ignore this and future posts. Whatever. I’ll keep posting this bullshit.
Github for the project can be found here. Zip archives for specific posts can be found here..
Adding the Tank
This should be straightforward. I just followed the same process as creating the infantry object. I used MS Paint to draw the tank, then Gimp to make the background transparent. I started out using a 27×16 pixel image in MS Paint, then scaled it up to 270×160. The up-scaling caused some weird artifacts like making some of my black pixels grey and adding some extra pixels for whatever reason. I corrected that by first deleting the extra pixels with the eraser tool set to its largest size, and then recolored the grey pixels with the paint bucket tool. Below is the sprite.
I then created the highlight outline sprite in the same manner I did for the infantry. I created a new MS Paint image that was 29×18 pixels, pasted in the tank sprite (down-scaled back to 27×16), and then drew the two pixel wide yellow outline. The sprite is below:
I added to the game to test what they looked like, and it turned out like this:
That definitely satisfied my requirement of being “good enough,” so I went about adding the tank and tank-outline sprites as prefabs.
First, add the following to the tank object:
1.) Box Collider 2D
2.) Rigidbody 2D
2.a.) Make sure the Rigidbody 2D has its “Body Type” changed from “Dynamic” to Kinematic
3.) UnitScript
The tanks will use the same “UnitScript” as the infantry. There will be differences between the two later in the game, but the one UnitScript should be able to accommodate those differences. The sprite can be added as a prefab now.
Next, add the outline sprite as a prefab.
Now, add the tank-outline to the tank-pixel prefab. First you have to open the prefab in the Inspector window:
And then under the UnitScript section, drag and drop the outline prefab to the script’s “Outline” variable:
To make sure that the tank can be clicked on and selected, you will need to add the prefab to the “Units” layer.
If you have any extraneous tank objects or tank outlines that were added to your game scene before the prefab was created, you can delete them now. Add back in the tank-pixel prefab to the scene. You should now be able to click on it! Wow!
Creating Land Objects
As I mentioned before, this is where I assume I veer far away from what is considered “best practices” in Unity development. I wanted to create a land area that units could move around on, and I wanted it to be a top-down view of some hex tiles. Unity provides “tilemaps” that can be top-down hex (or isometric hex, or squares, or whatever), but I couldn’t quickly figure out how to actually use them. So, I decided instead to roll-my-own hex tile map. I have a background in IT security where “roll your own” anything is generally speaking strongly discouraged, so naturally when I decided to dip my toes into game development I decided to forgo that wisdom roll-my-own hex tiles. Let’s hope it doesn’t bite me in the ass later (it most assuredly will)!
To start my roll-my-own journey I first added the top-down hex map in unity so I could screen grab the hexagrams to make my own tiles. Off to a bad start on my fully custom solution by copying the built-in solution, but whatever. I first deleted all my sprites that were in the scene, then added a “Hexagonal Flat Top Tilemap” by right-clicking in the hierarchy, which can be found under “2D Object.”
This will add a “Grid” object to the hierarchy. Select the Grid, and you will see the hex tiles in the scene view.
I then zoomed in on the scene view and used the snipping tool to take a screenshot of a single hex tile and saved it. The screenshot I took ended up fitting in a 61×61 pixel image in paint. I then removed the dark grey filler of the hex tile so I only had the light grey border.
With the hex border, I then first made a “land outline” sprite. To make the outline, I made a three pixel wide outline on the inside of the grey border, then removed the border. The sprite is shown below:
This outline will be used in a later post when I have land objects highlighted when they are selected. It won’t be used in this post, but it is easier to make the outline object now when first creating the land sprites.
Next, I made the “land” sprite by filling in the area inside the grey border with a light green color.
And then I made a “water” sprite by filling in with a blue color.
Adding land in Unity
Back in Unity, I started out by deleting the Grid object from the hierarchy. Then, I dragged the land and water tile sprites into the scene. Right now, they’re, well, huge.
I want to be able to make a simple map with the hex tiles. I wanted the tiles to appear smaller so that a bunch of them can fit on the screen. The first thing I did for this was select the main camera in the hierarchy, and then in the Inspector window, changed the camera size to “7.” This has the effect of zooming out the camera.
The tiles now appear a little smaller relative to the screen size.
Next, I selected the land tile and in the Inspector, set the “Scale” X and Y values to 0.5.
You can see that the land tile is now much smaller than the water tile. In fact, it should be half the size!
Do the same for the water tile and set its scale to 0.5 in the X and Y fields. Next, you will prepare the tiles to be prefabs. So:
1.) Add a Rigidbody 2D
2.) Set the “Body Type” of the Rigidbody 2D from “Dynamic” to “Kinematic”
3.) Add a “Polygon Collider 2D”
The “Polygon Collider” is where things get a little annoying. Unity will try to “wrap” the polygon collider around the sprite object. Because the land tile sprite is pixelated and has jagged edges, the polygon collider tries to mimic this and it looks a little raggedy around the edges as well.
You can edit the polygon collider’s “edges” or “shape” or whatever you would call it by selecting the land tile, and under the Inspector window clicking on the “Edit Collider” icon.
Then, in the scene view, if you mouse over the green lines of the collider you can move them around. You can also remove edges by holding down right ctrl and clicking where the green lines turn red.
I went through and delete the jagged edges of the collider until it looked nice and smooth, like this:
It was somewhat annoying and tedious to do, and probably unnecessary, but hey, I didn’t have fun doing it either! Fortunately since the land and water tiles are the same size and shape, you can actually copy and paste the collider from the land to the water object. On the land tile’s collider component, click the three vertical dots, then select “Copy Component”
Then, select the water tile and go to its Inspector window. Click the three vertical dots near the “Sprite Renderer,” then click on “Paste Component As New”
Now, when you select both objects, you will see they have nice polygon colliders!
Go ahead and save the land and water tiles as prefabs
Arranging the Tiles as a Map
To create my map, I wanted there to be 16 land tiles surrounded by 18 water tiles. To keep this all organized in the hierarchy, I created two empty objects that will hold all the tiles. One called “LandTileHolder” and the other called “WaterTileHolder.” It is very important to set these “holders” positions to 0 for the x, y, and z values. The tile objects will be made children of their “holders,” and the x,y, and z coordinates of the tile objects will be relative to the holder object’s postion. To make your life simpler, make sure the holder objects are at 0,0,0.
Next, copy and paste the land tile object 15 times and make the new tiles children of the LandTileHolder
When making my map, I found it best to position my camera at x:-1.15, y:1.15. I found this through trial and error. You may not want to do this but I thought it worked best with my tiles’ alignment this way.
I moved around the land tiles to see how far away from each other they should be to line up. It seemed that an adjacent tile on the X-axis should be 2.3 away from a tile, and +/-1.5 on the Y axis. For tiles above and below a tile, they should be +/-3.0 on the Y-axis. I found this out by moving tiles around and checking their X/Y values in the Inspector. There may be easier ways to do that, but I don’t know. Here are all the coordinates of my tiles:
Hex-tile-land: -3.45, 1.5
Hex-tile-land (1): -3.45, 4.5
Hex-tile-land (2): -3.45, -1.5
Hex-tile-land (3): -5.75, 3.0
Hex-tile-land (4): -5.75, 0.0
Hex-tile-land (5): -8.05, 1.5
Hex-tile-land (6): -1.15, 3.0
Hex-tile-land (7): -1.15, 6.0
Hex-tile-land (8): -1.15, 0.0
Hex-tile-land (9): -1.15: -3.0
Hex-tile-land (10): 1.15, -1.5
Hex-tile-land (11): 1.15, 1.5
Hex-tile-land (12): 1.15, 4.5
Hex-tile-land (13): 3.45, 0.0
Hex-tile-land (14): 3.45, 3.0
Hex-tile-land (15): 5.75, 1.5
Now THAT was fun. Here’s what the land tiles should look like:
Fortunately for all of us, there are even MORE water tiles to place around these land tiles. If you want, you can skip the water tiles as they only act as a border to the map. I don’t have any plans for water units (yet). Anyway, here are their coordinates:
hex-water-tile: -1.15, 9.0
hex-water-tile (1): 1.15, 7.5
hex-water-tile (2): 3.45, 6.0
hex-water-tile (3): 5.75, 4.5
hex-water-tile (4): 8.05, 3.0
hex-water-tile (5): 8.05, 0.0
hex-water-tile (6): 5.75, -1.5
hex-water-tile (7): 3.45, -3.0
hex-water-tile (8): 1.15, -4.5
hex-water-tile (9): -1.15, -6.0
hex-water-tile (10): -3.45, -4.5
hex-water-tile (11): -5.75, -3.0
hex-water-tile (12): -8.05, -1.5
hex-water-tile (13): -10.35, 0.0
hex-water-tile (14): -10.35, 3.0
hex-water-tile (15): -8.05, 4.5
hex-water-tile (16): -5.75, 6.0
hex-water-tile (17): -3.45, 7.5
Thank goodness, it’s all over. Here’s the map:
Save the project in Unity, close it, and forget about hex tiles for a while.
Next Steps
Next time I plan on making the units able to move from one tile to another. Hopefully that’s easy! See you in the next post. Same bat-time, same bat-channel