1 of 7

Game

The game itself has many different UI components and systems that interact with it. This section will be broken up into these different components.

Player HUD

The player hud is dependent on a few factors, with differences in the UI elements based on those factors.

Admin: has special UI elements for special functions.
Player: the most common user.
Species: refers to what kind of character the player is controlling which determines the UI appearance and layout (e.g. a ghost wont have clothing, hands, etc. but a human will).
Role: some roles may have unique abilities or inventories thus having some UI differences (e.g. a changeling scientist will have more abilities and UI options than a regular scientist).

Human HUD example below:

The player’s interface will likely be the most important part of the average game. The following is a breakdown of what is seen above, starting in the bottom center of the screen:

Hands: These icons represent what is currently in the player’s hand. The active hand is lit up, while the inactive hand is dimmed. When a player picks up an item in the active hand, an icon should appear in the players’ hand representing said item.
Pockets: To the right of the players’ hands are their pockets, which are concealable storage for small items that can fit in the players’ clothes. If the player doesn’t have clothes with pockets, these slots wont appear.
Storage: To the left of the players’ hands is storage. This is where the player will be keeping their ID, tool belt, and backpack. Items of the respective types can be put into these slots for easy access. The player’s ID determines their level of access across the station, whereas tool belts and bags can store objects within them.
Hover Text: This is part of the Examine system and displays the name of the object the player’s mouse is hovering over.
Clothes: On the bottom left of the screen, the player can see what they are currently equipped with. Here, there are slots for shoes, jumpsuits, gloves, overcoats, ear-wear, masks, glasses, helmets, and one slot of suit storage for larger objects like rifles or oxygen tanks. A toggle also exists at the bottom left, for collapsing this menu.
Intent: Near the bottom right of the screen, the intent indicator is a toggleable button which shows the player how they will be using their active hand. For example, if the player has a screwdriver in their hand in “help” intent, clicking a vending machine may open a maintenance panel. But, if the player has the screwdriver in “harm” intent, the player may do damage to it.
Targeting Doll: To the direct northeast of the intent indicator is the targeting doll. The player can click various parts of the doll to indicate what part of a humanoid the active hand will be targeting. For instance: should the player find themselves in a fight, stabbing a player in the eyes would be strategically different than stabbing their feet.
Chat: The chat is at the top left, and is arguably one of the key points of the game. In-game, this window can be dragged around the screen to suit the players’ needs. The chat contains all manner of information about the world around them, including player dialog and emotes, a log of actions, and even what your character may be thinking. On the station, different methods of communication exist between different departments. A medical officer probably doesn’t want to hear about the delayed shipments in the cargo bay, so different communication channels exist. For this reason, the player may create custom tabs that isolate specific communications for easy readability.
The text in this game is rich. For example, text outputted by a robot is highly likely to be different than text outputted by a clown. Or, text by someone who is g-g-gg-ett-t-in-ng el-e-ect-tro-c-cute-ed may read differently than someone who is ssslightly more ssscaly than others.
A person may have “said'' something, but a spider may have “chittered” something, and so on.
Toggle UI: Should a player wish to have a little less clutter on the screen, at the bottom right there are toggles for displaying the chat and targeting doll windows.
Announcements: Announcements are located to the right edge of the screen, and are messages that the station commanders feel are necessary to deliver to the entire station. They will remain on-screen, unless the player clicks the megaphone button, which should hide the message.
Warnings: The station is a dangerous place. At the top right of the screen, a list of warnings may be present for the player, that may influence how they choose to play. For instance, pictured in the image above: the air pressure in here is way too high, and it’s way too cold! While most warnings exist to indicate hazardous conditions, it may also indicate other features regarding the status of the player character, such as whether or not they’re buckled into their shuttle seat, whether they are hungry, or whether they’re unconscious.

In-game Settings

Work In Progress

This is the menu to change the setting in the middle of the round.

It has the regular settings one would expect form the 3D game, such as graphical tweaks:

Sound volume levels and sound-related settings:

Another, slightly more styled design:

And another but for the controls page:

Inventory

Work In Progress.

Also see Containers

Radial Menu

Radial Menu: Sometimes, just clicking is not enough to specify how you wish to react with a particular object; if a player wants to change the radio station on a boombox, how does the game know not to pick it up instead? This is the purpose of the radial menu. When holding right click on an item, the radial menu appears with a list of possible interactions.

In the case of a boombox, the player may see the option to pick it up, turn it on/off, or change the song. From this point, all the player needs to do is move their mouse in the direction of the desired option to interact accordingly.

Ideas:

Fill the inner circle with a generic/common interaction like Point or Pick Up. Alternatively and inner ring could be added that has a different type of interaction, like emotes.

Misc. UI Elements

Other interfaces may also exist for more specific use cases, like using station consoles, changing settings on a pressure valve, or interacting with a player’s PDA. These exist in the form of windows that can be dragged around the screen for convenience, and often share similar design elements with each other.

Most of those might be achieved by implementing proper windows. Windows are UI elements opened when interacting with certain environment items, like accessing the terminal or a piece of tech that is not detailed enough on the level of its model/texture. Most windows should be interactable, movable and closable.

For a set of design guidelines one should take a look at .

Composite Elements

Element Swapping

Some UI elements can have variants to be switched for one another in case of different circumstances. In that case the variant switch needs to be seamless, meaning that the images for those elements need to be of the same size and with the same base position.

Note the bar, it is missing from the variant files themselves, but can be added within unity and be programmably extended or shrunk from the bottom of the thermometer.

Element Layering

UI elements can also consist of several parts to be layered on top of each other and programmed to be moved, colored or otherwise changed separately.

As an example, the atmospheric pressure meter consists of 3 parts: the base with a dial, the arrow to rotate and indicate the overall pressure on the base’s dial and an exclamation mark, to be colored and/or flashing in case of dangerous atmospheric conditions. The text for the exact atm amounts is added within Unity, using accepted project fonts, so it can also be changed programmably.

Same principle applies to the target dummy, surgery dummy and other complex UI elements.

Windows

Window Composition

Windows are UI elements opened when interacting with certain environment items, like accessing the terminal or a piece of tech that is not detailed enough with model & texture alone.

Most windows should be interactable, movable and closable. I suggest the design that retains the dark and semi-transparent work area, but has a distinct header with a recognizable close button and a readable name. This header should be wide enough to click on to drag the whole window through the screen.

The text within should be bright and active elements/buttons highlighted. Said color should be brighter then the work area of the window, yet overall diluted to not distract the player too much and spare their eyes.

Interactable Elements

The window can also have interactable elements within. They should be bright and readable enough on the window's background and, preferably, should retain some vector style. See an airlock control panel from SS14, for example:

It’s planned to be made out of several individual interactive parts: light bulbs and wires, with several versions of each (uncut, cut or fixed wire, lit or unlit light bulb).

Player HUD

The player hud is dependent on a few factors, with differences in the UI elements based on those factors.

Admin: has special UI elements for special functions.
Player: the most common user.
Species: refers to what kind of character the player is controlling which determines the UI appearance and layout (e.g. a ghost wont have clothing, hands, etc. but a human will).
Role: some roles may have unique abilities or inventories thus having some UI differences (e.g. a changeling scientist will have more abilities and UI options than a regular scientist).

Human HUD example below:

The player’s interface will likely be the most important part of the average game. The following is a breakdown of what is seen above, starting in the bottom center of the screen:

Hands: These icons represent what is currently in the player’s hand. The active hand is lit up, while the inactive hand is dimmed. When a player picks up an item in the active hand, an icon should appear in the players’ hand representing said item.
Pockets: To the right of the players’ hands are their pockets, which are concealable storage for small items that can fit in the players’ clothes. If the player doesn’t have clothes with pockets, these slots wont appear.
Storage: To the left of the players’ hands is storage. This is where the player will be keeping their ID, tool belt, and backpack. Items of the respective types can be put into these slots for easy access. The player’s ID determines their level of access across the station, whereas tool belts and bags can store objects within them.
Hover Text: This is part of the Examine system and displays the name of the object the player’s mouse is hovering over.
Clothes: On the bottom left of the screen, the player can see what they are currently equipped with. Here, there are slots for shoes, jumpsuits, gloves, overcoats, ear-wear, masks, glasses, helmets, and one slot of suit storage for larger objects like rifles or oxygen tanks. A toggle also exists at the bottom left, for collapsing this menu.
Intent: Near the bottom right of the screen, the intent indicator is a toggleable button which shows the player how they will be using their active hand. For example, if the player has a screwdriver in their hand in “help” intent, clicking a vending machine may open a maintenance panel. But, if the player has the screwdriver in “harm” intent, the player may do damage to it.
Targeting Doll: To the direct northeast of the intent indicator is the targeting doll. The player can click various parts of the doll to indicate what part of a humanoid the active hand will be targeting. For instance: should the player find themselves in a fight, stabbing a player in the eyes would be strategically different than stabbing their feet.
Chat: The chat is at the top left, and is arguably one of the key points of the game. In-game, this window can be dragged around the screen to suit the players’ needs. The chat contains all manner of information about the world around them, including player dialog and emotes, a log of actions, and even what your character may be thinking. On the station, different methods of communication exist between different departments. A medical officer probably doesn’t want to hear about the delayed shipments in the cargo bay, so different communication channels exist. For this reason, the player may create custom tabs that isolate specific communications for easy readability.
The text in this game is rich. For example, text outputted by a robot is highly likely to be different than text outputted by a clown. Or, text by someone who is g-g-gg-ett-t-in-ng el-e-ect-tro-c-cute-ed may read differently than someone who is ssslightly more ssscaly than others.
A person may have “said'' something, but a spider may have “chittered” something, and so on.
Toggle UI: Should a player wish to have a little less clutter on the screen, at the bottom right there are toggles for displaying the chat and targeting doll windows.
Announcements: Announcements are located to the right edge of the screen, and are messages that the station commanders feel are necessary to deliver to the entire station. They will remain on-screen, unless the player clicks the megaphone button, which should hide the message.
Warnings: The station is a dangerous place. At the top right of the screen, a list of warnings may be present for the player, that may influence how they choose to play. For instance, pictured in the image above: the air pressure in here is way too high, and it’s way too cold! While most warnings exist to indicate hazardous conditions, it may also indicate other features regarding the status of the player character, such as whether or not they’re buckled into their shuttle seat, whether they are hungry, or whether they’re unconscious.