user interfaces
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/1.jpg)
User Interfaces
By Mathieu Leduc
![Page 2: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/2.jpg)
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
![Page 3: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/3.jpg)
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
![Page 4: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/4.jpg)
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?
![Page 5: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/5.jpg)
Example of shortcuts
![Page 6: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/6.jpg)
Example of shortcuts (cont.)
![Page 7: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/7.jpg)
Important point
Do not taunt the player!
![Page 8: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/8.jpg)
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
![Page 9: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/9.jpg)
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
![Page 10: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/10.jpg)
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)
![Page 11: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/11.jpg)
Designing gameplay user interface
1. Choosing the screen layout2. Select visual elements that transfer info to
the player3. Define inputs
![Page 12: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/12.jpg)
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.
![Page 13: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/13.jpg)
Overlay example
![Page 14: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/14.jpg)
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
![Page 15: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/15.jpg)
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)
![Page 16: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/16.jpg)
Shell Menus
![Page 17: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/17.jpg)
Shell Menus (cont.)
• Allow user to change options before starting the game
• Can quickly get into the action with few button presses
![Page 18: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/18.jpg)
Simplify your game
1. Abstraction and Automation2. Breadth vs. Depth3. Avoid Obscurity
![Page 19: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/19.jpg)
Abstraction and Automation
• Abstraction : No fuel consumption in racing games
• Automation : Cars automatically shift gears
![Page 20: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/20.jpg)
Breadth vs. Depth
• Find a balance between both when creating menus
• Common actions are more easily reached• Allow hotkey assignments
![Page 21: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/21.jpg)
Avoid Obscurity
• Main reasons menus become obscure:– Artistic overenthusiasm– Reducing UI screen usage– Developer familiarity
![Page 22: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/22.jpg)
Interaction Models
• Avatar based• Multipresent (aerial)• Party based• Contestant• Desktop
![Page 23: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/23.jpg)
Interaction Models (cont.)
![Page 24: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/24.jpg)
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
![Page 25: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/25.jpg)
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
![Page 26: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/26.jpg)
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
![Page 27: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/27.jpg)
Aerial Perspective
1. Aerial2. Top Down3. Free Roaming4. Context Sensitive
![Page 28: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/28.jpg)
Top Down
• Can only see top of buildings• Player feels distanced from action• Easy to implement using 2D graphics
![Page 29: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/29.jpg)
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
![Page 30: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/30.jpg)
![Page 31: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/31.jpg)
Free Roaming
• Allows user to explore world at their leisure• Difficult to implement camera controls and
teach them to player
![Page 32: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/32.jpg)
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
![Page 33: User Interfaces](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56816402550346895dd5a2e9/html5/thumbnails/33.jpg)
Other 2D Options
• Single screen: Whole world displayed, camera does not move
• Side Scrolling• Top Scrolling: Jamestown• Painted Backgrounds