Production II Dev Blog | The Great UI Dump

With the speed channel UI all done and the menus for the title screen, pause menu, how to play screen, and controls scheme all done, the UI should be all wrapped up and tidy, right?


WRONG!


There's always more to be done! And with the plethora of mechanics all revolving around the speed channels we've got going on, there was still a lot of stuff I wanted to do. In this blog post, I'll be going over all of the different UI elements I added into Reboot to ensure the player experience is as streamlined as possible!



Speed Surfaces

The single most important UI element I added into the game asides from the speed channels themselves is the UI for speed surfaces. During testing, we found out that people were often very confused about what to do to interact with speed surfaces, and when they eventually found out, they were then still confused on the timing for interacting with them. To remedy both of these issues we would usually have to tell them in person how to play our game, which is less than ideal. To fix this, I added in some UI elements to allow the player to know when to properly press and hold X, when to let go, and give them some feedback for when they do this sequence successfully or not. Below are three gifs, one that shows the player releasing X too early, another shows the player holding X for too long, and the last shows them boosting perfectly!


Too Early


Too Late


Juuuuust Right!


When the player enters a speed surface, and indicator appears above their head telling them to press down on X. Once the player does so, a meter above their head starts to fill up, which is styled like a volume bar on an old TV. If the player covers enough distance in the surface while holding down X, the meter will fill up in order to indicate they will get the maximum speed boost possible (the player can still gain a boost regardless of filling up the meter or not). Once the player enters the end of the speed surface, an aptly named "RELEASE" indicator shows up to tell them when to let go of X. Finally, when the player let's go of X (or holds on for too long), they receive very clear feedback on whether or not they successfully boosted.


This UI made testing go a LOT smoother. Players were able to understand the game much more without needing direct help from one of us devs and allowed for players to respond and feel more active with the game. One of the things multiple people said is that the game is not only more fun to play now but is also very fun to watch, since the viewers can understand what is happening more clearly due to this addition! This is something I never really considered in the past; how important is making UI for viewers? Seeing as how streaming is becoming a big thing, I can say it is massively important, and I'm glad that I managed to strike this chord with this addition to Reboot.



Drifting

While this addition was extremely simple in its execution, it helps with the gameplay feel a tremendous amount. Something that several testers had voiced before is that drifting is difficult to use since it's hard to know what exact direction you'll be shot in once you release the drift button. So, I came up with a solution!



It's an arrow! Wow! Yeah, it turns out that all we needed was a simple arrow on the ground. By displacing it just enough in front of the player that they naturally obscure it when starting to hold down the drift button, it doesn't feel jarring to see it appear while also being far enough away from them that the direction they will be sent in is very clear! And the simplicity of this solution makes me happy; sometimes you don't need a big complex thing if the simplest solution works. If it ain't broke, don't fix it!



Music Tracks

One of the other designers on our team, Josh Forchheimer, has been hard at work on making a dynamic sound system for Reboot; not only can you switch between songs during gameplay, but each song has layers that come into play based on which speed channels you're in. The more speed channels you have unlocked, the more of the music you get to hear! Anyways, I got passed the torch to make some sort of visual indicator for which song you're currently listening to.



As you can see, now the game will show you which song you are currently listening to right below the channel number in the top left corner of the screen. Additionally, I added in a nice transition when switching between music tracks. Pressing right on the DPad to go to the next song will show a "fast forward" icon and pressing left will show a "rewind" icon all while the song name gets all garbled up and scrambled to make it seem even more like you're fast forwarding or rewinding. The transition for switching songs also matches perfectly up with a tape scratch sound Josh made, which really ties the whole thing together!


My hopes for this UI is to not only make players want to switch songs more but also make them more aware of that functionality. The dynamic music system adds a ton to the game, and I wouldn't want for someone to play through without realizing there was so much music to listen to!



Collectibles

And finally, the collectibles UI! In the final version of Reboot, there will be 5 hidden cassette tapes in the level that when picked up, will unlock the music tracks we were just talking about before. In order to have this functionality, I needed to make sure the player knows when they've picked up a cassette tape, which song is being unlocked when doing so, and whether or not the song they're listening to is actually unlocked or not (in the case where it's still locked the player will just be listening to empty radio noises).



Aaaand there it is! As you'll notice, when the player picks up a cassette tape (for now they are floppy disks but will be updated for the final build), a banner spreads right above the TV's head that tells them which song they've unlocked! The animation for this is modeled off of what an old TV looks like when it turns on: a big rectangle fills the screen by expanding and them dims out to uncover the white noise texture behind it. The reason for why the box appears in the middle of the screen is to ensure the player knows what the cassette does for them, and once again hopefully makes them aware of the dynamic music system that Reboot has to offer.


Another thing that you might notice is that music tracks appear as empty song names when the player doesn't have that song unlocked. In the beginning of this GIF, the player switches from "WHIP_AND_DIE" to an empty song, but when they pick up the cassette tape for "G_SCOUT_COOKS", the song UI updates as well! This way the rhythm of the game isn't interrupted by picking up the cassette tapes and makes sure the player always knows what's going on.



And there we have it! A bunch of UI done by yours truly, all with explanations for why they were made and important notes about them. I had a ton of fun making all of these, and over the course of this semester, being given the responsibility of doing all of these has made me gain huge strides in my competency as not only a UI designer but also a programmer. Most of the functionality in these UI elements were all coded by me, and I know for a fact that the Leo of 2 years ago would have never thought that would be possible. I'm very happy to have worked on all of this UI stuff for Reboot, and I'm very proud of where it is all at!

Website designed by Leonardo Robles Gonzalez

Website powered by Wix

  • Twitter Social Icon
  • LinkedIn Social Icon
  • SoundCloud Social Icon
  • YouTube Social Icon
  • Itch.io Social Icon