User Interfaces

By Mathieu Leduc

What is the User Interface(UI)?

• Knows about any input/output hardware• Translates player actions into actions in the game

world• Presents data needed by the player in the current

situation of the game world

General Principles• Be consistent• Give good feedback• The player is in control• Limit the steps to take action• Allow easy reversal of actions• Minimize physical stress• Don’t strain short-term memory• Group up related controls• Provide shortcuts for experienced players

What the Player needs to know• Where am I?• What am I doing right now?• What challenges am I facing?• Did my action fail or succeed?• What do I need to play successfully?• Am I in danger of losing?• Am I making progress?• What should I do next?• How did I do?

Example of shortcuts

Example of shortcuts (cont.)

Important point

Do not taunt the player!

What the Player wants to do• Move• Look around• Interact physically with the world• Pick up/drop objects• Manipulate fixed objects• Construct/destroy objects• Give orders to units/characters• Conversation with NPC• Customize vehicle/character

What the Player wants to do (cont.)

• Talk to friends online• Pause (even if temporary)• Set up game options• Save the game• Exit the game

Define gameplay modes

• Define primary gameplay mode (camera model, interaction model, gameplay style)

• Define all the modes used in the game• Understand how game moves from mode to

mode (flowchart)

Designing gameplay user interface

1. Choosing the screen layout2. Select visual elements that transfer info to

the player3. Define inputs

Choosing the screen layout

• Subset of screen• Overlay with the main view

Find a balance between amount of space for main view and for feedback elements.

Overlay example

Telling the player what they need to know

• What critical info needs to be showed to the player?

• Appropriate feedback elements• Optional info which can be displayed

Letting the player do what they want to do

• Devise control mechanisms to allow player to interact with game

• Ex: Move camera, participate in story, express themselves, talk to others

• Map input devices to player input (Use similar games to help you map)

Shell Menus

Shell Menus (cont.)

• Allow user to change options before starting the game

• Can quickly get into the action with few button presses

Simplify your game

1. Abstraction and Automation2. Breadth vs. Depth3. Avoid Obscurity

Abstraction and Automation

• Abstraction : No fuel consumption in racing games

• Automation : Cars automatically shift gears

Breadth vs. Depth

• Find a balance between both when creating menus

• Common actions are more easily reached• Allow hotkey assignments

Avoid Obscurity

• Main reasons menus become obscure:– Artistic overenthusiasm– Reducing UI screen usage– Developer familiarity

Interaction Models

• Avatar based• Multipresent (aerial)• Party based• Contestant• Desktop

Interaction Models (cont.)

Camera Models – First Person Perspective

• Advantages:– Don’t display avatar often, save money on animations/textures– No AI for camera, all player controlled– Easier to aim weapons; Screen not blocked by avatar and no need to correct for

perspective differences– May allow easier interaction with environment

• Disadvantages:– Can not see avatar, customization not as enjoyable– Hard to display body language and facial expressions, less immersion– No use of camera for dramatic effect – Harder to perform some manoeuvers (jumping off cliffs)– Rapid movements can create motion sickness in some players

Camera Models - Third Person Perspective

• Camera Behaviours:–Can follow avatar direction, mostly used in

flight simulators, can cause motion sickness–Camera slowly turns to face same direction

as avatar (Super Mario 64)–Camera orients itself behind only after

avatar has stopped moving, less common

Cameral Models (cont.)

• Active/Passive: Allow player to orient camera themselves

• Intruding landscapes:– Make objects semi-transparent– Move camera up so it is behind player and wall

Once the player moves, return camera to original position smoothly

Aerial Perspective

1. Aerial2. Top Down3. Free Roaming4. Context Sensitive

Top Down

• Can only see top of buildings• Player feels distanced from action• Easy to implement using 2D graphics

Isometric

• About 30 ~ 45 degrees from horizon• If player can control camera, draw correct

number of tiles for objects• Allows player to see more of buildings and

units, feels closer to action

Free Roaming

• Allows user to explore world at their leisure• Difficult to implement camera controls and

teach them to player

Context Sensitive

• Camera moves intelligently to follow action• Generally used in avatar/party based games• Must define every angle for every possible

character position• Can allow designer to create rich visual

experience for player

Other 2D Options

• Single screen: Whole world displayed, camera does not move

• Side Scrolling• Top Scrolling: Jamestown• Painted Backgrounds