Production II Dev Blog | Creating Speed UI

Previously, on Reboot: I made 3 mockups for the speed channels UI, and since then have fully been able to implement them! So, let me take you through that whole process and show you what the UI actually looks like-in game now.

This is what the mockup looked like. Compared to the other two, this shows the most amount of information in the least amount of space. It conveys the channel the player is currently in, which speed channels the player has unlocked, the current speed of the player within that channel, and the locked speed channels. All that it took from here was actually putting it into Unity, and so I did just that!

Before doing anything else, I had to make sure that the actual movement through the speed channels in the UI worked and was fluid. I set up my own controls that let me move through each speed channel without the player ever moving. Each single cell of the speed channel has its own script that holds information for which speed channel it is attached to in code, the color it is when it has been unlocked, and the color it is while it's still locked. This way, it's super easy to change the UI if any major changes happen to the speed channels outside of just the UI!

And finally, the speed bar! The speed bar moves based off of the player's current speed within their channel, and also resets to 0 or to full when the player is switching between channels. On top of this, it changes to the correct color! The GIF above might be a bit hard to follow, but it shows the idea of constantly changing speed and moving between channels.

And that's the UI for the speed channels! Going forwards, I need to implement the UI for actually going off of sped surfaces and for when the player is drifting, but this is definitely the most important aspect of the game, and I'm glad with how it turned out!

Website designed by Leonardo Robles Gonzalez

Website powered by Wix

  • Twitter Social Icon
  • LinkedIn Social Icon
  • SoundCloud Social Icon
  • YouTube Social Icon
  • Social Icon