UI for "GO! GO! Beetle Roller!"
This article is for the game GO! GO! Beetle Roller!.
I was responsible for everything UI-related in Beetle Roller, among other things. I designed, animated, and programmed all UI into the game. To match the game's theming, I aimed to make an interface that was super stylish, bouncy, and comic-book inspired.
Title Screen
The title screen lives within the game world itself, and every sub-menu uses a different camera angle within this one area. I had a lot of fun with it!
Icons were added to each button when I noticed a large amount of non-English players in the Steam stats. Using icons alongside all menu options is now something I carry through all my games for accessibility sake. Even if you do speak English, it can make buttons quicker to spot!
HUD
Here's a look at the HUD, first in concept form, then in in-game form!
This was the first bit of UI i designed for the game, since it's the most important. You can even see the capsule player, an early Beetle Roller design, and a concept for dialogue (which we quickly scrapped).
Otherwise though, the HUD contains the following:
- Ball POWER level, from 0 through 3. Placed front and center.
- Current time, in top left.
- Goal times for each rank, below your current time. A red slash goes through each rank when you miss it.
- Level number and name, in the top right.
Live Beetle Roller Reaction
This is by far the funniest and most "iconic" feature of the game according to players.
I added it on a whim while implementing the UI, as a solution to the fact that you couldn't see the front of Beetle Roller through usual gameplay (you're always facing his back). Inspired by the meme and the TV in the HUD of Pizza Tower.
Level Results Screen
Had a lot of fun animating this! I had to make sure that each piece of information was displayed in a sensical order while prominent long enough to read, and that the animation wasn't too long to sit through each time.
Final Results Screen
After completing the game, the player is presented with a short results screen sequence, which displays their time-based ranks for each level one-by-one, then awards a final rank.
I made sure it was more like a cutscene rather than a static screen with all information presented at once. It's a lot more engaging this way. This is the only time the game maybe gets a little spooky, but its a fun moment of tension and then relief for players.
The opening screen is in direct reference to "PEPPINO'S FINAL JUDGEMENT" from Pizza Tower. The ending screen was loosely inspired by the Arena victory screens in the Kirby series.
Image credit: Pizza Tower (Tour de Pizza), Kirby's Return to Dreamland Deluxe (HAL, Nintendo)
Steam Achievement Icons
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
