Download the game on itch!
Character concept
Beatborn is a game created by a team of twelve developers in seven weeks. It’s a rhythm based action game, where you fight robots by swinging your sword to the beat of the game’s soundtrack. You play as Midi, protector of humankind, which I had the pleasure of designing during the project’s course.
We knew early on that we wanted a sci-fi look to the game, but were unsure of where to land in that huge category, other than to avoid things too dark and gritty. We eventually landed in something quite colorful yet grounded, which felt like the right approach.
I wanted to match the environment’s shape language into the character, which resulted in a body suit with light chunks of armor, instead of small and intricate details. I wanted her to look nimble and fast, since one of her abilities is to quickly dash across the map. Giving her too much armor would’ve made her look bulky, so I kept it simple.
For the sword I drew inspiration from circuit boards and crystal/glass, trying to combine the two in an interesting way. Again, I wanted it to have similar shapes to the character and the environment, which meant larger pieces without too much detail.
UI
I was also responsible for designing the user interface, both for menu and gameplay. The animations for the UI were created in Unity. I realized quite early that I liked the look of circuit boards and tried to implement that look into the UI. Eventually I leaned towards something a bit different, but some aspects of the circuit board inspiration remained.
I decided early on that the most important piece of the UI was the so called Beat Visualiser (beat vis for short), the graphic that represents the beat of the music. It was important for us to not let the player rely solely on hearing to play the game, since not everyone is capable of doing so, and our goal was to create a fairly casual game. It had to be seen, yet not take over the experience. This is why the beat vis went through the most changes throughout the UI process.
The menu design was heavily inspired by Metroid Prime 2: Echoes, with its circular menu structure. I thought it would prove an interesting challenge getting it to work, both aesthetically and functionally, since there wasn’t many examples to go after. It also seemed intuitive to create a menu that mimics the game’s controls, i.e. a joystick that moves in circles. It was difficult and time consuming, but, while I might not do it again any time soon, it taught more lessons than a more conventional menu might have. For this reason I consider it the right decision.
Beat visualiser process
The final design of the Beat Visualiser. The vertical lines move inwards to the circle and visualise when the player should hit. The ring outside the circle fills up with energy whenever you hit on beat, which then turns into a powerful AoE attack for each half. Comparing the final design to its first stages it’s been quite simplified, which was good for readability.
Stage 1. In the beginning we wanted to cram all the information into one space; beat vis in the circles, player HP bar up top (pink), Core HP bar below (blue), and ultimate ability stages around the circles as well (lightning). Had it succeeded it might have been clever, but it turned out very cluttered and difficult to read.
Stage 2. Here I put the circles in a straight line and put the so called Sync Bar beneath it and made a test animation of when players sync with the game’s beat. The idea was to make it resemble a speaker booming.
Test animation of missing the beat. I wanted it to give the feeling of a record being scratched. The idea behind this beat vis design was to get the sync bar (staircase-like bar) connected with the circles by moving them closer to each other. In the end it just looked cluttered.
Stage 3. Another example of how the beat visualiser’s animation could show successfully hitting on beat, this time with a visually updated Beat Visualiser, heading towards a much cleaner look. I liked the circuit board lines and circles, but they easily disappeared when scaling down and didn’t help readability.
Stage 4. Before I integrated the Sync Bar into the circle I tried putting it below the beat vis, the idea being that hitting on beat would generate energy that would travel down like electricity into the bar and eventually fill it. However, the shapes didn’t feel connected in a nice way, resulting in an attempt at putting the bar around the circle instead.
The Beat Visualiser’s final design in action. Here the Sync Power (a powerful AoE ability) was placed as a circle around the visualiser, taking advantage of the space we have. There are two charges of Sync Power available, each represented by when one half of the circle is completely filled and turns blue, as shown in the gif above.
Tutorial, pop-ups & health indicator
Tutorial UI animation.
Animation for the ‘Wave incoming’ prompt. This prompt appears three times, one for each time a new threat level starts. Threat levels are basically different stages of the game, the third and last being most difficult. The bar to the left is the progression bar, showing how far along you are in the game.
Overlay for when taking damage. The player previously had an HP bar, but players had a difficult time seeing it while also having to focus on Core HP and the beat visualiser, which resulted in this overlay that's more obvious.