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 layout 2.Select visual elements that transfer info to the player 3.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 Automation 2.Breadth vs. Depth 3.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.Aerial 2.Top Down 3.Free Roaming 4.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