GJC Devlog #10 - Developing the UI of Grape Juice City (GJC)

Author: Noah Muhammad

Intro:

Throughout the development of Grape Juice City (GJC) the User Interface (UI) has undergone quite a few changes, which is to be expected with agile development. At the very beginning we had imagined several key features that the UI would possess.

Radial Menu

The radial menu would serve the purpose of displaying all of the player’s weapons and allow selection through the use of a circular wheel. This wheel would be hidden unless the player held down a key or button.

We initially planned for crafting to also be intertwined with the Radial Menu but decided it would be better to go with the crafting tables that already existed in the world. These crafting tables allow the player to simply walk up and “Kick” the table to craft one of the 3 items on the radial menu as long as they have the correct number of resources.

Overall, a majority of the changes to the UI can be attributed to the discussions involving what makes good UI.

The pillars we agreed on were:

- non-obstructive

- clear

- relevant

- cohesive

If a UI element did not follow one of these pillars, we moved in a different direction. After numerous iterations the radial menu eventually evolved into a flower-like design.

This new layout allowed for us to condense both the resources, fruit, and radial menu all into one system.

Resource Bar

Following the concept of the pillars, our UI started with a large bar that would show all of the player’s current inventory resources. The original plan was to have it be a central part of the HUD that would be one of the main information displays. But after adhering to our pillars, we decided that the resource bar was taking up too much space and could be condensed for simplicity and save a lot of screen space.

Score Bar

Not much has changed with our score bar. Functionally it works the same way, but on screen we’ve done a lot of testing for placement. At first, we were thinking more of a localized center for placement but are moving more towards an anchor on the left side of the screen. We’ve also added a timer with various upgrades that will continue to be updated.

Powerups/Equips

Another main staple of our UI was a section for powerups and equips. This would be a centralized location for all powerup data.

By following our UI pillars, we were able to condense the powerups to two circles. This would display the two most important actions, powerups and player ability only.

Final Iteration (04/03/23)

After many iterations and refinements to the UI of GJC it has finally started to feel like a cohesive game. There are still improvements to be made, but it has come a long way from the beginning of the Fall semester. We appreciate your interest and continued support of Grape Juice City!