top of page
Writer's pictureRiptcage

October 2023 Update Part 1 - Game UI Design

Updated: Nov 15, 2023

Choose a team, choose a class and press play.

Lot's of iteration happened this past month to get the Main menus functional in a way that provides the vibe and feel of what WFR might look like when entering a random game upon first release.

The idea of this menu is to access it when joining a new map and when a player dies they will get the opportunity to change their class selection or adjust their look. Note: Current Player Character is being used as a Template for functional purposes.

The First Iteration

Say hello to the first version of choosing a team and a class to spawn into the game. This was completed in one night to learn about how the UI objects worked in Roblox. However, Here's what took the longest;

- How do I disable default Roblox GUI?

- How can I disable auto player character loading?

- If GUI loading depends on character load, How can I force the players GUI to load?

How do I disable default Roblox GUI?

How can I disable auto player character loading?

How can I force the players GUI to load?

Hopefully these hacks save someone else time.





The Second Iteration

While the first iteration was functional and hit the initial goal to move forward... it didn't hit the spot for me and I wanted to push it further with UIGradients and UIStroke objects with Roblox's ability to animate UI elements.


The Third Iteration

At this point I thought it was good to move on, but when testing what the red teams UI would look like, it just didn't feel right. So I continued to play with the different color values to make sure the UI design for both red and blue would suffice.

The Fourth Iteration

After some brainstorming, I realized I'd likely want buttons at the top and began to question:

  • What do I want the player to be able to do when they are in the menus?

  • What buttons should be there? Should they have text? icons? both?

  • How can a player change teams?

  • What occurs when a button is clicked?

  • What should the icons look like?


Of all the icons iteration, the Shop was clearly the most iterated on. Exchange felt "star wars" military sci-fi, but considering the audience on Roblox, no one would probably know what that meant. After checking out some other games on Roblox, Store and Shop seemed to be the most common with some kind of cart icon, so I caved with simplicity, and hope it's still unique to WFR.




The Fifth Iteration

After the first iteration of icons and the shop being the best one thus far. I wanted the rest to be a bit more highlighted with better quality, including the credits. I shifted the class choices from vertical to horizontal after doing some research in how other games approach character selection. I also added hover animations that felt right for the sci-fi vibe.

What are the buttons intended for?

From here, I had brainstormed answers to the questions I had during the fourth iteration, around what's in the UI and how I plan on approaching monetization in WFR.

  • Join - is where the player can invite friends to their "group" or voice channel and there will be slots that show their players together standing there. (they can rotate each player to see what they look like too) The player can hit "Play" to join in the current game

  • Profile - is where we'd be at above, where you select your players class choice, which will show a visual of what you'd look like as the class cosmetic that you've saved (or default if you haven't before). This is also where it will show visual info of the 2 main weapons, grenades, and devices that the current class has.

  • Gear - Is where it will allow you to change your characters look for cosmetics that fit the class type that you've either earned from level credit progression or bought from the shop. Same for weapons. (monetization is around cosmetics)

  • Settings - All game settings will be adjusted here

  • Shop - The shop will be here.

  • Credits - players earn credits as you cap the flag, kill players, or you can buy them to use in the shop. The + sign will take you to be able to buy credits if the player wants to add them quicker.

The Sixth Iteration

After solidifying what the player class selection looked like, It was time to focus on team selection. I knew a couple other games have a camera follow mouse functionality, so I had planned to implement a custom version of that for WFR.

After feeling good about team selection, the transition felt like it could be neat to freeze the gradient color when you choose a team and it would use that for the rest the UI going forward for that team. Here is choosing blue team.

This ended up being the final iteration of the UI, in which the rest was implementing templates for the other buttons and animating them off/on when clicked.


Music and SFX

The UI music is a custom remix of Worlds Apart by Far Out. I had always planned on using a version of this in the UI, and would listen to it periodically for inspiration on what I wanted the UI to look like as I was working on it this past month. I'm hoping to get full permission to use the remix and credit the original before release.


As for the SFX, they are all original custom paid SFX by a Sound Designer that I'll be using going forward for WFR sci-fi sounds.


What's Next in Quake 2 Weapons Factory Roblox?

While I spent the first 2 weeks of October polishing the main menus due to self-critical feedback, Its helped motivate me to continue pushing through with the rest of the game, as there is now an official avenue to change classes within the game. Before, I had to adjust a configuration file.

There is a lot of external art work happening related to character art re-design and weapon re-imagination. I'll have a separate post about those details later this month. Moving into November, here's what to expect:

  • Create an intermission section similar to a mode in Destiny2's gambit game mode. Each team will see each other on the other side, but not be able to shoot them. This give each team the opportunity to emote and taunt the other team in unique ways. This is designed to create hype before the game starts.

  • Polish up some UI code, show current class in profile and in gameplay HUD, as well as current weapon.

  • Consider a menu button in the main HUD for the player to go to menu while spawned in the game. If changed class though, it won't take affect until killed. or they can force kill, possibly from the profile page. This gives the player -1 points if they kill themselves, by any means.

  • Begin weapons and grenades for sniper and gunner class.






20 views0 comments

Recent Posts

See All

Comments


bottom of page