Project Overview
Game development has always been a fascinating endeavor to me, as it combines psychology, interaction, arts, and technology into a single package, perfectly fulfilling my interdisciplinary interests. During the fateful year of 2020, I cracked open a Unity tutorial on YouTube, and thus began my journey into game development. Cobbling together my newfound skills in making platformers and elements from some of my favorite childhood games, I created Bounce Battle.
Jump attack mechanic from Super Mario Bros (Image from: https://www.ign.com/games/new-super-mario-bros)
Inspired by Flash fighting games like The Fight For Glorton (Image taken from: https://www.addictinggames.com/action/the-fight-for-glorton)
Roles
As a solo personal project, I made the entire game from start-to-finish in around four months, learning by creating. I wore many hats during its development: I was the artist, the composer, the developer, and of course, the UI/UX designer. As such an interactive medium, games require UX design, which is deeply intertwined with the gameplay. This case study will focus on the UI/UX aspects of the project!
UI/UX Goals
Players need to transition between menus and understand key gameplay information (such as health and ability status).
As this is a two-player game, the character each player is controlling must be easily identifiable.
The game should work well as a Windows Standalone.
The gameplay of Bounce Battle
Game Development Process
This was a learning project, and, setting a time limit of less than half a year for myself, I went about the project leaning into my own skillsets, learning new skills, and finding workarounds!
Ideation
I began by identifying the core of the game: it is a two-player game, and the primary mode of dealing damage will be a Mario-style stomp. Thus, everything from then on was designed to serve the core mechanic of jump attacks.
Considering possible characters and interactions, I began by drafting up abilities that enhances and adds some variety to the gameplay, such as a dodge roll (to avoid enemies above), a double jump (to gain height above your enemy), a quick and powerful stomp (for well-timed attacks), and a side-ways kick (a backup move in case you didn't jump high enough).
Then, I ideated different character concepts, going through creatures that are often associated with jumpingsuch as kangaroos and grasshoppers.
I thought about the general attributes that could exist in the game, such as quick and light characters who can easily dodge attacks but do less damage, or slow and heavy characters who require more deliberation to play but do more damage.
I finalized my character designs by combining these attributes, abilities, and the art concepts that looked best in a simple art style I was aiming for, and created a kangaroo, a rabbit, a frog, and a(n unafilliated) black puma.
Development
I made the game in Unity and C#, and began by creating basic player movement, which I made sure was satisfying (as it is 100% of the gameplay) by adding more margins for error and polish: coyote time (players can jump slightly off a ledge), jump buffering (players will jump even when they are only slightly above ground), variable jump height (depends on how long you press the jump button), and fast fall (falling much faster when the jump button is released).
I coded the unique character abilities and built a simple arena with tilesets, shaped to fit the player movement. I then created all the art, animations, and UI elements in a pixel art style that references arcady games and Mario.
I asked my friends to playtest the game. My friends helped me identify some movement bugs and user flow issues! After fixing them up, I published the game onto Itch.io.
UI/UX Designs
Main Menu
Allows players to navigate throughout the game as they please
• Start button starts the game
• Options button that opens the pause menu
‣ Including sliders for volume, with check box to easily mute/unmute
• Quit button to quit the game
Main menu of Bounce Battle
Gif of Bounce Battle's character selection screen
Character Selection Screen
Allow players to select characters and deliver game instructions
• Silhouette-icon buttons for selecting each playable character (kangaroo, rabbit, frog, panther)
‣ simple, identifiable shapes of these animals are great at-a-glance and do not cause as much clutter as if I were to use the actual character sprite as the button icon
• Character panel
‣ Keys and corresponding actions (shown through animation and text) as visual instructions; an animation speaks a thousand words!
‣ Character information listed for easy reference and comparison
‣ Future iterations should support remappable controls and avoid keys like "/," which may be language-specific (for example, German keyboards do not have that key, as mentioned by a commenter)
Player 1 is on the right, which corresponds to the side to which their controls are on; vice versa for Player 2.
Game Scene
• Health system to visualize damage dealt to each player
‣ Considered "knockback percentage system" like Super Smash Bros, but it doesn't fit the main attack method (going downward, as opposed to sideways)
‣ Traditional health bar (Player 1's controls are on the right, as is their health bar; vice versa for Player 2)
• Ability cooldown
‣ Turns gray upon using the ability, and returns to blue upon end of cooldown
‣ Future iterations should show different ability icons for each animal (which can also be used for the character selection menu), so it is clear what the ability the player currently has, and that the icon clearly indicates an ability cool-down
• Settings to access pause menu
The characters corresponding to each player is labeled with "P1" (Player 1) and "P2" (Player 2) throughout the game.
• Color highlights of the characters may not be colorblind-friendly and do not fit the pastel looks of the game
Pause menu in-game
Pause Menu
Same as the pause menu accessible from the main menu, but it with an added menu button
‣ During playtesting, my friends reflected that they would like to go back to the character selection screen after trying out each character
Thus, the menu button leads back to the character selection screen, instead of the main menu.
End Screen
Clearly emphasizes who the victor is through both visuals and mechanics
• When the losing player’s health is depleted, there are a few seconds built-in for the winning player to relish in their victory, allowing them to walk throughout the arena
• Then the winning player is displayed in text, after which the options are displayed
• During all of which, the winning player can continue to proudly roam around the screen in victory, and is further highlighted with the darkened background
Bounce Battle end screen
Results
After I published Bounce Battle on itch.io, here are the analytics:
2,327 Views
82 Downloads
1,020 Browser Plays
58 Collections
4-Star Rating
926 7d Impressions (in November 2022)
0.32% CTR (within 7 days in November 2022)