User Interface
•Télécharger en tant que PPTX, PDF•
0 j'aime•1,067 vues
Game user interface design
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à User Interface
Similaire à User Interface (20)
Plus de Martin Sillaots
Plus de Martin Sillaots (20)
Dernier
Dernier (20)
User Interface
- 1. UI Design Design of Computer Games Martin Sillaots Aug 8 2019 # 12
- 2. Content • Principles of UI Design • Design process • Simplify Game UI • Interaction models * • Camera models * • Visual elements • Audio elements • Input devices • Navigation mechanisms
- 3. Principles of UI Design • Consistent style and functionality • Immediate feedback • Limit number of steps for action • Undo • Minimize physical stress • Don’t overload the player’s short-term memory • Group controls on the screen • Shortcuts
- 4. UI Design Process • Define gameplay modes • Choose screen layout • Select visual elements • Define control mechanism • Shell Menus
- 5. Define Gameplay Modes • Primary first • Secondary (customization, story telling, …) later – Gameplay - What the player has to do? – Camera mode – Interaction mode • How game is moving from mode to mode? • Modes share elements – Visual elements – Controls – Menus – Input devices
- 6. Choose Screen Layout • Main view - game world • On screen controls • Feedback elements
- 7. Select Visual Elements • Tell the player what he needs to know • What part of game world? • Information about resources • Feedback elements
- 8. Player Needs to Know • Location • Action • Challenge • Success or failure • Resources • Progress • How big is the danger of failure? • What next?
- 9. Define Control Mechanism • Let player do what she wants to do • Key actions (for challenges) • Feedback to actions • Input devices
- 10. Players Want to: • Move • Look around • Interact with NPC • Use objects • Manipulate objects • Construct and demolish objects • Financial transactions • Give orders • Customize • Talk with players • Change Options • Pause, Save, Quit
- 11. Shell Menus • Start, configure, save, load, close • Before / After play • One click away • First thing the player see • Last thing the designer plan
- 12. Simplify Game UI • Less accurate operations • Less functions - e.g. no fuel consumption in racing game • Automation - e.g. gear shift • Broad interface - e.g. plane cockpit • Deep interface - hierarchical menus • Context sensitive interface - e.g. content sensitive pointer
- 13. Interaction Models * • Avatar-based • Multi-present • Party-based • Contestant • Desktop
- 14. Camera Models * Virtual camera
- 15. Camera Movement • Dolly - forward - backward • Truck - side scrolling game • Pan - swivels • Tilt - look up - down • Crane • Roll
- 16. Camera Models • 3D • 2D • 1st person • 3rd person • Aerial Perspectives
- 17. 2D • Single screen - entire world on one screen • Side scrolling - platform games • Top scrolling - fixed speed, top-down perspective • Painted backgrounds - e.g. Adventure games
- 18. 1st Person • Avatar interaction model • No camera adjustment • No need for avatar design (except mirror) • Easy to aim • Easy to navigate • No customization • No avatar animation • No body language • No facial expressions • No cinematic camera angles • Difficult to conduct combined moves • Can create motion sickness
- 19. 3rd Person • Camera following avatar in the short distance • Raised up perspective in mass fight scenes • Camera behavior when avatar turns – Always turning where avatar looks – Camera turns after 2 seconds – Camera turns when avatar stops • Influenced by landscape objects – Semi transparent object – Crane camera up and tilt down – Semi transparent head
- 20. Aerial Perspectives • Top-down - 2D map • Isometric - 2D, 30-degree from the horizon, 45- degree from north-south • Free roaming camera - 3D "isometric” • Context-sensitive camera modes - camera follows, depending on action
- 21. Visual Elements
- 22. Visual Elements • Main view - game world • Feedback elements – indicators and maps • Character portraits • Screen buttons and menus • Text
- 23. Feedback Elements • Digits - large value, small area • Needle gauge - large area, easy to read • Power bar • Small image repeated multiple times • On/off lights • Icons • Text indicators • Mini map • Radar screen • Color
- 24. Audio Elements • Sound effects • Vibration • Ambient sound • Music • Dialogue and voice over narration
- 25. Input Devices • 3D input devices - motion sensors – Accelerometers – GPS • 2D input devices – Directional pads – Joysticks – Mouse – Touch screens • 1D input devices – Buttons and keys – Wheels – Sliders – Pressure sensitive buttons – Compass
- 26. Navigation Mechanisms • Screen oriented navigation – Top-down and isometric perspectives – 2D side scrolling games • Avatar oriented navigation – Touchpad for movement – Mouse for camera • Flying • Point and click navigation
Notes de l'éditeur
- Translator between real world and game world - button press to action Making the game visible, playable outputs - visual elements inputs - control elements
- Different: - not everything presented (challenges) - Genre based UI standards (elements, sets) - UI should be familiar, no innovation in UI Immediate feedback - game responses to players actions immediately … somehow Limit number of steps for action - max 3 buttons - max 3 clicks in menus Undo - for correcting errors (genre specific) Minimise physical stress - place commands on most easily accessible controllers Don’t overload the player’s short-term memory - don't require to remember too many things at the same time. - Present important information constantly on screen Group controls on the screen - information can be grasp with a single look Shortcuts - for experienced players
- In the production phase Prototyping (e.g. PowerPoint, Flash, ...)
- - Problematic in smart phones - no standards for screens
- What happens in the game world? What to do next? Is the effort successful or not? Location - game world view - main view - map - audio ambient feedback Action - avatar activity presentation - sound effects Challenge - presented in the main view - text description Success or failure - animation in main view - UI indicators - sound effect when the indicator changes Resources - items and numbers Progress - score - summary feedback (don't mock) - additional bonus How big is the danger of failure? - worming indicators What next? - signs - glues, ...
- Look around - moving avatar or camera Interact with NPC - attacking - talking, ... Use objects - picking up - placing down Manipulate objects - switches - doors (fixed states) Construct and demolish objects - materials - place Financial transactions Give orders - 3 steps: subject (NPC), order (verb), object (target) Customise - Avatar - Vehicle - additional gameplay mode Talk with players - in multiplayer online games Change Options - difficulty level - customize controls
- Less accurate operations - less realistic but easier to play Broad interface - large number of options simultaneously - complicated to learn - fast to use when learned Deep interface - few options but several selections in a row - mac 3 levels - most frequent actions in the upper level - easy to learn - fast use is not possible - short cut keys Avoid obscurity (ähmasus) Be clare what the buttons and menus do? - Artistic over enthusiasm - design UI as attractive as possible = meaningless details - The pressure to reduce UI screen usage - small ikons can't deliver the needed information - Developer familiarity with the material - test UI with someone who is not familiar with it
- Avatar-based – buttons for navigation Multipresent - areal perspective camera mode, give orders to units Party-based - point and click navigation + areal perspective Contestant - no navigation, buttons related with decisions (answers) Desktop - business simulators, shells – fields
- 3D preferred but don't do it If you have no resources and skills
- Used in web, mobile and retro games.
- - Active camera mode - always turning where avatar looks (only seeing avatars back) - Passive camera mode - camera turns after 2 seconds (e.g. Super Mario 64) - Camera turns when avatar stops (e.g. Toy Story 2: Buzz Lightyear to the Rescue) - for
- - Top-down – e.g. iPhone Flight Control - Isometric - e.g. Sim City. Player can truck or dolly only - fixed camera angle - Free roaming camera – Player can crane, tilt, pan - flexible camera angle - Context- sensitive camera modes - 3D avatar or party. (e.g. Ico) - rich visual experience. Suitable for exploring (not for action)
- - Windowed views - main world in the window, other items around it - when lot of controls are needed - less immersion - Opaque overlays (Non-transparent layers) - main world occupy full screen, items on top of it Semitransparent overlays Character portraits - avatar or party member or dialogue partner - feedback element (e.g. Doom) Screen buttons and menus - PC mostly - Mostly used in desktop mode Text - Localisation - translating. Save text in text files. Don't embed text with images. - Typefaces and formatting
- largest element
- Stored in separated files Provide feedback (in game) positional audio – volume depends on distance adaptive music (synchronized layers and volume levels - e.g. Avol)
- - accelerometers - based on gravity?, e.g. Wii remote, iPhone tilt sensor - GPS - augmented reality games, work only outdoors and large scale accuracy - Directional pads - D-pads (arrows on keyboard) - Joysticks - turns back to centre - Mouse - relative data - Touch screens - multi touch
- - Airplanes - different controller for speed, mess with arrows - Helicopters Point and click navigation - e.g. real time strategy, roll games, adventure games - sometimes adding control points