Presentation and Graphics

Share this post:

Share on Bluesky Share on Twitter Share on Facebook

This week, I developed the main menu of Wings & Whiskers, added a collectible to each level, created one new level and made a variety of bug/quality-of-life fixes.

List of additions:

Main Menu – Accessible with the ESC key. Includes a play button, level select, and a collectible progress counter.
Tutorial Text – Added floating text to each tutorial level to explain key mechanics.
New Level – One additional level was added.
Collectibles – Each level now contains a collectible coin.

List of fixes:

Upgraded the background image quality (source: Vecteezy)
Added retry functionality via the "R" key; levels also reload automatically when a character is lost
Fixed an exploit in level 5
Changed Whiskers' tunnelling key from "E" to "S"
Added a cooldown and stricter movement lock to prevent tunneling-related bugs caused by spamming "S".
Adjusted platform alignment in a few levels.

Process:

My main goal this week was to design a main menu that felt cohesive with the game's existing pixel art style. I started by planning a rough layout and even considered designing a custom thumbnail image that could double as a menu background and cover photo. I also experimented with an AI-generated image, but the results weren’t quite what I’d hoped for.

Figure 1: ChatGPT attempt at a cover photo (not great lol)

In the end, I decided to design the menu directly within Unity. This gave me more control and allowed for animated elements that match the game's atmosphere. I thought the visual of Wings standing on Whiskers was especially cute, so I made sure to feature that.

For the title, I used a pixel font from Lil Cthulhu and (with ChatGPT’s help) added a script to make the text gently float up and down. For level selection, I debated between a pop-up gallery with level images or a dropdown menu. Due to time constraints and ease of adding future levels, I went with a dropdown. For now, it's accessible at all times (for playtesting), but I plan to restrict it to post-playthrough in the future.

After adding collectibles, I included an animated coin sprite on the menu and a counter to track progress. With some AI assistance, I created a script that updates the counter and saves progress using PlayerPrefs. One issue I ran into was the counter only updating when I stopped and restarted the game, which I believe was due to the script only updating on start. However, after updating this, the issue persisted but eventually resolved itself.

I'm not completely happy with the appearance of the play and level select buttons yet, so those might change in the future.

Figure 2: Main menu

To implement collectibles, I used a sprite sheet from O_Lobster to animate the coins and placed one in each level. At the moment, finding any collectibles that are hidden behind objects might be tricky. However, I plan to add sound effect to signify when each is collected. With some assistance, I added a script to the collectibles themselves that use OnTriggerEnter which checks for Wings and Whiskers' tags. When collided with, the script updates the bool "Collected" in the coins animator, causing an animation to play before disappearing, adding +1 to the main menu counter. Using PlayerPrefs and unique IDs for each coin (e.g. Level1_Coin), retrying the level does not cause the coin to respawn unless progress is manually reset with a separate script.

Figure 3: Collectible coins

As mentioned in earlier devlogs, I wanted to add in-game text to explain mechanics in the tutorial levels. I finally got around to it this week. I used the same pixel font from the retry button (Thaleah), recoloured it to light blue, and applied the same floating animation used in the menu. The result draws attention while fitting the game's style.

Figure 4: Tutorial text example on level 2

I’ve also been designing new puzzles that take better advantage of Whiskers’ tunneling ability, which is underutilized so far. One of these levels was implemented this week:

Figure 5: Level 9 (still working out where to put the Retry button)

Based on last week's feedback, I made several improvements. These include increasing the cooldown for tunneling and restricting player movement more strictly during the cooldown to prevent bugs. I also upgraded the background image using a free trial (😔), though there's still a visible seam due to image tiling. I’m considering blending the edges or covering them with level decorations.

Finally, I added the ability to press "R" to retry a level and implemented automatic reloading when a character falls off-screen.

Feedback:

So far the bulk of my feedback this week has come from playtesting with my friends and family. The feedback included:

Searching for collectibles was fun and provided an extra challenge
No collectible on level 9
Wings flys slightly above the screen in level 9
No sound effects for coins, making it difficult to know when they've been collected (e.g. if hidden behind something)
Background crease

To address the feedback:

I fixed the collectible on level 9- it was accidentally disabled
I lowered the ceiling effector on level 9
Sound effects will be added next week and I'll also try my best to hide/remove the background crease

Thanks for reading!

ChatGPT Usage: (some chats contain other stuff that I can't remove, unfortunately)