Skip to content

Mission UI

yetanothercarbot edited this page Sep 12, 2023 · 7 revisions

The mission UI can be accessed in game through interacting with the Questgiver NPC.

Questgiver NPC Entity

The Questgiver NPC entity is an entity that the player can interact with to access the mission display. This is done by pressing E when the player is close to (in range of) the questgiver.

Design Decisions

The design of the Questgiver was inspired by the Floran race of Starbound. Their green colouring links them to the plants and the planet; the purple to signify they are allies with the player; and the yellow as a bold contrast colour to make them highly visible to the player.

questgiver image

Questgiver NPC's Indicator

The Questgiver's Indicator is an entity that displays a notification above the Questgiver. It can either be hidden, indicating a new, unread quest, a completed quest (with reward available) or an expired quest using three distinct animations. The animations are distinct, to ensure that it is always easy to distinguish the purpose of the notification.

The new quest animation is a green bouncing exclamation mark:

exclamation_loop_new

The reward available animation is a gold bouncing exclamation mark, with the bottom part rotating as if it is a coin:

exclamation_reward

The expired quest animation is a red exclamation mark that inflates and deflates.

exclamation_loop_out_of_time

The entity updates by using a component QuestIndicatorComponent - this listens to the mission manager's questComplete, questExpired and questNew events to display the relevant animation. To dismiss the animation when the player interacts with the Questgiver, it listens to the Questgiver's toggleMissions event (which is used to display or dismiss the missions UI) to hide the indicator.

MissionDisplay

The MissionDisplay is a component added to the Questgiver entity and serves as a UI for viewing & interacting with missions.

The display contains 4 screens:

Main Mission Menu

This is the first screen that shows when the Questgiver is interacted with and contains a story related blurb plus navigation buttons.

image

Achievements Menu

This screen takes all the achievements returned by the MissionManager's getAchievements() method and maps them to a table of Complete & Incomplete achievements.

image

Quests Menu

This screen takes all the quests returned by the MissionManager's getSelectableQuests() & getActiveQuests() methods and maps them to an interactive table. Active quests can either be in progress or expired, while inactive quests are either selectable or complete. The status of the quest affects the action button displayed next to it.

image

Quest Info Page

This contains the full description for the chosen quest as well as the same action button as in the Quest Menu.

image

Testing

The UI components of the MissionDisplay are able to be unit tested by mocking the Stage class and capturing the Actor passed into the Stage's addActor() method. The captured Actor can then be checked for all necessary components. The full test suite is found in MissionDisplayTest.java.

In addition to the unit tests, user testing was completed to ensure the full mission functionality currently present in game was available in the UI, and that the elements were styled and visually displayed correctly. This was done by manually adding extra quests & achievements to the MissionManager with various expiry times & completion requirements, having the player walk up to the Questgiver & press e, then verifying the mission menu showed up and all screens had the expected state. The menu images in the previous section are an example of what was shown during user testing.

Clone this wiki locally