Leaving The Blue Void: Creating The Forest
The warrior is ready to move and slash around. Now it is time to leave the blue void. His adventurous mission belongs in a forest, where butterflies and bees hide from enemy slimes. I have the tilesets, but they need to be set up first. Following Game Code Library’s Top Down tutorial, I set the Sprite Mode to Multiple, Filter Mode to Point (No Filter), Compression to None, and Pixels Per Unit to 16. Later, I experimented with the PPU, like setting it to 8 and 48.
When slicing the Sprite Sheet, I needed a calculator. The dimensions are 128 by 240, and I decided to follow the PPU and divide each by 16. The results were 8 and 15 (width and height), respectively, which I used for the Grid By Cell Count. But I did all these calculations before watching the guideline video, which chose Grid By Cell Size instead. The difference is that I did not have to make calculations in the first place. Thank goodness I did not rush through the coding, or I would have started losing my sanity with a confused “Huh, that is weird”.
For another tileset, though, I did lose my sanity. Its width was 137, which gave 8.5625 when divided by 16. There was no chance the Slice would accept float values, so I was left with manually splitting sprites. Seconds turned to minutes, and minutes nearly stretched into half an hour, when I realised I did not need that tileset at all. Turns out, it was the same as the first tileset except with “1 x Padding”. I was questioning my eyesight — these moments make me forget a colon or an equal sign. I was curious, though, to get a general idea of its purpose. The answer was something like preventing texture bleeding, where pixels from neighbouring sprites leak into each other. Perhaps when the time arrives, I will experience these things.
Get Umair Shakeel’s stories in your inbox
Join Medium for free to get updates from this writer.
Despite the hassle, both tilesets gave me enough experience to handle the Decorations Tileset without any issues, leaving me ready to proceed with painting the empty scene. The game’s theme is this: a hero slashing slimes in a green forest. However, the green grass hid the protagonist during painting. My eyes landed on Order in Layer in the Player’s Sprite Renderer component, but the tutorial had a different approach to adding these Sorting Layers:
- Layer 1: Ground
- Layer 2: WalkInfront
- Layer 3: Collision
- Layer 4: Player
- Layer 5: WalkBehind
- Layer 6: Decor
In Unity, lower numbers render behind higher ones, so “WalkBehind” actually renders in front of the Player in this setup. It is a bit counterintuitive, but it works for the tutorial’s tilemap style — so I followed it exactly.
To comply with the Collision Layer, a Box Collider 2D was necessary for the character. For leniency, I adjusted the boundary so it did not cover the hair. And when trees came, I set the tree trunks to Collision and the leaves to WalkBehind. That way, the character was hidden not by the green ground earlier, but by the branches. However, the shadow below the feet was an exception to the obscuration.
After careful consideration, I simply extended the collider’s boundary to include the shadow too. But I worry this extension puts the player at a disadvantage, as it gives slimes a larger target to hit. A better long-term solution might be to separate the shadow into its own sprite on a higher Sorting Layer. That way, the collider stays small for gameplay, but the shadow always renders on top. For now, though, I am moving on — there are slimes to fight.
