Kristin Bell. Topics Covered Visual Elements Audio Elements Input Devices Navigation Mechanisms Allowing for Customization

Kristin Bell

Topics Covered Visual Elements Audio Elements Input Devices Navigation Mechanisms Allowing for Customization

Visual Elements Whatever interaction & camera models a game has, you always need to display information using visual elements

Main View The players main view of the game world should be the largest element on the screen Window within screen with other user interface elements around it Fill the whole screen with other user interfaces on top

Windowed Views Oldest and easiest design choice Main view only takes up part of the screen Found in most games with complicated user interfaces because they require many on-screen controls Role-playing games Strategy games Construction/management simulations

Starcraft 2

Windowed Views (continued) Observing the game world through a window Harms immersion Immersion not as important if the game requires accessing these controls at all times (Starcraft 2)

Opaque Overlays Greater sense of immersion than windowed view The main view fills the screen with graphical elements on top When the overlay appears it covers some of the main view, but when its gone the player can see the game world again Can be borderless (not in a box)

Semitransparent Overlays Can see partially through them Less intrusive Make sure its not too transparent because bleed- through might confuse information from the overlay

Guild Wars

Feedback Elements Communicate details about the games mechanics to the player Whats going on How the player is doing What options the player has selected What activities the player has set in motion

Indicators Inform the player about the status of a resource (graphically and at a glance) Provides value for anything you like Choose indicators that fit the theme of your game and that dont introduce inconsistencies Analog clock out of place in a medieval fantasy game

Indicators (continued) 3 categories: General numeric Small-integer numeric Symbolic

General Numeric Digits Can display large numbers in a small screen area Not easy to read at a glance Example: 171 can look like 111 if you only have a quick moment to check the display during an attack

General Numeric Digits (continued) Do NOT use digits to display imprecise quantities (ex. health, energy, popularity) Use digits to display: Players score Amounts: Money Ammunition Volumes of supplies

General Numeric Needle Gauge Easy to read at a glace Take a lot of screen space for little information You can use multiple needles if they are different colours Example: a cars speedometer

General Numeric Power Bar Usually to indicate health or time remaining Horizontal: zero at the left and maximum at the right Vertical: zero at the bottom and maximum at the top Like a thermometer without gradations

General Numeric Power Bar (continued) You can superimpose another semi-transparent bar of a different colour if you need to show 2 numbers in the same space Green: full Yellow: in-between Red: critically low levels Can be themed

Small Multiples Small-integer Numeric If a small picture is repeated multiple times, it can indicate the number of something remaining Ex. Signal strength bars on your phone Traditionally used to represent lives remaining Also used for things avatars may carry (ex. Potions) Should limit so the player can read the number at a glance Choose themed pictures appropriate to your game

Lives Remaining

Colored lights - Symbolic Very space-efficient Takes up only a few pixels However, does not display much data Normally indicate: Binary (on/off ) values with 2 colours Tristate (off/low/high) values with 3 colours Stick to a maximum of 3 colours, otherwise the player could forget what all the colours mean Use a suitable palette of colours

Icons - Symbolic Convey information in a small space Ex. In a car: the symbols indicating heating/air conditioning status Must be obvious/unambiguous Use a tooltip a small balloon of text that appears briefly when the mouse hovers over an icon for a few seconds Tooltips help players to identify/learn icons Some icons may need text beside them

Icons Symbolic (continued) Ex. If youre indicating a season: Summer: sun Fall: dried leaf Winter: snowflake Spring: flower However, make sure its understood in different parts of the world (i.e. A snowflake would not work well in cultures where snow doesnt fall) Make your icons thematically appropriate

Text Indicators - Symbolic Advantages: Represents abstract ideas well Disadvantages: Some people find text boring Two words can look alike Localized for each language (localization talked about later)

Mini-Maps Displays a miniature version of the game world (from a top-down perspective) Useful for the player to orient him/herself in the world 2 display conventions: World-oriented Character-oriented Only shows major geographical features Key characters/buildings typically appear as coloured dots Mini-maps can help warn the player of challenges not visible in the main view

World-oriented Displays entire game world with north at the top regardless of the main views orientation An indicator marks the part of the game world currently visible in the main view In multipresent games, the player can click the mini- map to jump to that location in the game world

Starcraft 2

Character-oriented Displays the game world around the avatar, with him/her in the center of the map facing the top of the screen If the player moves the avatar, the landscape moves accordingly (rather than the avatar) Only shows a limited area around the avatar Often round and called a radar screen They sometimes include an indicator pointing north

Colour Can double the amount of data in a numeric indicator by having a colour represent a 2 nd value Ex. Engine: Speed: needle gauge Temperature: needle gauge turns different colours Colours are best for broad categories Useful for differentiating groups A transparent colour filter can go over the entire screen Think about particular groups (i.e. Colour-blind players need another option)

Character Portraits Appears in a small window Displays the face of someone in the game world Its hard to see the faces of characters in aerial perspective games, so character portraits help Builds identification between your player and avatar Conveys more personality Animated portraits can be used as a feedback element

Screen Buttons and Menus For controlling processes too complex by using only controller buttons Work best with a mouse Do not put too many buttons and menus on the screen: Confusing Less accessible to casual players Make them theme-based (for immersion)

Text Most games contain a fair amount of text Appears as a feedback element, or as a label for menu items and screen buttons and to basically indicate anything important Text may also be used for narration or dialog (including subtitles)

Localization The process of preparing a game for sale in a country other than the one for which the game was originally designed Requires changes in software and content Translating all the test Helpful hint: store all the games text in text files, separate from other content! Exception example: a billboard in a game set in NY should remain in English no matter where the game is being played (unless it is an essential clue) Dont crowd text elements

Typefaces and Formatting Make text easily readable Minimum height of 12 pixels, 16 preferable Use fonts designed for reading on a computer Theme-based Dont use too many different typefaces Understand the difference between display fonts and ordinary fonts Avoid monospaced (fixed width) fonts (ex. Courier), and stick with proportional fonts (ex. Times)

Audio Elements Different audio elements: Sound effects Vibration Ambient sounds Music Dialog Voiceover narration Keep all audio elements in separate files and play through separate channels Always include a facility for the player to adjust the volume level of music independently from other audio effects

Sound Effects Correspond to actions/events of the game world Use sound to get the players attention (ex. danger) Include sounds in the game world and the user interface Make sure the sound effects fit the theme of the game

Vibration Many modern controllers include this Sensory feedback Only use when needed (ex. In horror or stealth games) Dont use constantly or players will learn to ignore it and it might cause their hands to tingle unpleasantly

Ambient Sounds Aural feedback Ex. Traffic sounds signify youre in an urban street Positional audio different speakers present sounds at different volume levels, makes it feel more 3D Dont overuse ambient sounds They must work with the music you choose You may be limited by your audio hardware

Music Helps set the tone Make sure it can tolerate repetition Avoid background music with a wide dynamic range Adaptive music music that changed dynamically in response to current game situations (still experimental) Layering separate but harmonizing music pieces that overlap and the game decides which piece should be heard depending on whats happening in the game

Dialog and Voiceover Narration Repetitive spoken content becomes tiresome Have multiple variations of the same phrase Play the sentence once then use visual feedback if it persists Writing and acting must be good Otherwise destroys immersion Use actors whose voices go with the theme Better to hire a native speaker than an actor to fake an accent

Input Devices Important because input devices are the means by which the player projects commands into the game If you design a game that requires input devices other than a mouse or controller, you limit your audience

Terminology Binary devices: signals being interpreted as off and on Analog devices: transmits a value from a range of many possible values Dimensionality: One-dimensional transmits 1 datum, 2-dimentional transmits 2 data, etc. regardless of whether they transmit binary or analog data Absolute values: a device that returns data about its current position as measured from the neutral position (ex. a joystick) Relative values: offer unlimited travel and no neutral position (ex. a mouse)

Three-Dimensional Input Devices Deliver 2 data values simultaneously Accelerometers: Electronic device that measures the rate of acceleration it experiences (ex. Wii) Can compute how far, fast, and in what direction the user moves the remote When an accelerometer is sitting on a table it reports the force of gravity and if the acceleration of gravity changes direction, it means the device has been tilted with respect to the ground

Three-Dimensional Input Devices (continued) Global Positioning Systems: Returns devices latitude, longitude, and altitude Only work in areas where they can receive satellite transmissions

Two-Dimensional Input Devices Allow the player to send 2 data values to the game at one time from a single device Directional Pads (D-pads): Circular of cross-shaped input device on a game controller with binary switches at the top, bottom, left, and right It rocks about its center when pressed so it can also send information between these directions (i.e. the upper- right direction)

Two-Dimensional Input Devices (continued) Directional Pads (D-pads): Should only be used if there is no better device available since youre limited to movement in only 8 directions You can assign different functions to the D-pad instead such as scrolling the main view window that doesnt require as much precision

Two-Dimensional Input Devices (continued) Joysticks: Single vertical stick anchored at the bottom that can be tilted in any direction Spring-loaded so it returns to its central position when the player lets go of it When the game software checks the position of the joystick, it returns 2 absolute data: An X-value indicating tilt to the left or right A Y-value indicating tilt forward or back

Two-Dimensional Input Devices (continued) Joysticks: More degrees of control (i.e. for vehicles) The degree of tilt corresponds with the rate of movement Not the most precise because when the player lets go, the joystick returns to the center and causes it to point somewhere else

Two-Dimensional Input Devices (continued) Mouse (or trackball): Returns X- and Y-values but these are relative data (it indicated how far the player moved the mouse relative to its previous location) More precision: unlimited travel in any direction on the 2D plane Best for first-person PC games Converts relative data into absolute data for the cursor position Weak for steering mechanisms (lack of neutral position)

Two-Dimensional Input Devices (continued) Touch-sensitive devices: Return analog X and Y positions to indicate where they are touched (like a mouse cursor) Unlike a mouse, you can return the cursor to a neutral position whenever the player stops touching the device Multi-touch interface

One-Dimensional Input Devices Send a single value to the game One-shot actions: Press the button once to activate On signal as the trigger (ignores the off signal) ex. firing a handgun Repeating actions: Press the button to activate and turns off when released On signal as the trigger (off signal when released) ex. a machine gun firing continuously

One-Dimensional Input Devices (continued) Continuous actions: On signal initiates a continuous action (off signal ends this action)

Typical golf game the player presses the button to start the backswing and presses it again to hit the ball

Controller Buttons and Keys Console game controllers can have 1 to 10 buttons Face buttons: on the top (pressed with the thumbs) Shoulder buttons: facing away from the player (under the index fingers) Keep consistency with buttons: do not stray from the industry standard For a computer, assign keys so the letter becomes a mnemonic for the action (ex. B for brakes)

Controller Buttons and Keys Console game controllers can have 1 to 10 buttons

Knobs, Sliders, and Pressure- Sensitive Buttons Rarely find knobs nowadays Can only move so far, such as a volume knob on a stereo Generally not self-centering A slider is a small handle that moves along a slot in the controller, constraining its travel Returns an absolute position Pressure-sensitive buttons: Send a number that indicates how hard the player presses Finer degree of control

Navigation Mechanisms Allow the player to tell a character, vehicle, or other mobile unit how to move Establishes a relationship between how the player moves the controls and how the avatar responds Avatar response must be consistent and predictable A sudden change in camera angle may cause the player to make a steering error

Screen-Oriented Steering Top-down and isometric perspectives: The player sees the avatar from above When you move the joystick, the avatar instantly turns and faces the corresponding direction on the screen and moves accordingly 2D side-scrolling games: The joystick controls left and right movement Vertical jumps are controlled using another button

Screen-Oriented Steering 3D games: Usually avatar-oriented rather than screen-oriented Moving the joystick up is forward in the 3D environment Moving the joystick down makes the avatar turn to face the player and move towards him/her Unlike avatar-oriented steering, left and right cause the avatar to move in those directions while the camera still faces forwards (this depends on the game)

Avatar-Oriented Steering Pushing the joystick up makes the avatar move forwards regardless of her orientation on the screen Implementation differs depending on the device used Remains consistent regardless of camera model

Mouse-Based Control The mouse only controls the direction in which the avatar faces (the avatar turns in place) Up and down mouse movements tilt the camera up and down The player uses the keyboard to actually make the avatar move (W, A, S, D) More flexible than a joystick-based system http://www.youtube.com/watch?v=YdJEr5eokN4&feat ure=related http://www.youtube.com/watch?v=YdJEr5eokN4&feat ure=related

Flying Involves moving in 3 directions Control over movement must be handled by a separate mechanism (ex. extra controller buttons or an extra joystick) Almost always intended for 1 st -person perspective

Fixed-Wing Aircraft Player manoeuvres aircraft by using the joystick to pitch/tilt the aircraft (it rolls rather than simply turning) Slider keys generally increase and decrease the engine speed by fixed increments (throttle control) When the joystick returns to the center, the plane should level out and fly straight (at the speed determined by the throttle)

Helicopters More complicated than flying a fixed-wing aircraft Joystick controls turning and forward/backward movement The slider control causes the helicopter to ascend or descend Left on the joystick makes the helicopter turn counterclockwise about the vertical axis (it will only move in this direction if it is also moving forward) Right makes it turn clockwise When the joystick returns to the center, the helicopter should gradually slow until it remains hovering above a fixed point A separate key or slider controls vertical movement

Spacecraft Most designers treat this like a fixed-wing aircraft When you move the joystick left/right the spacecraft turns rather than rolling/tilting

Point-and-Click Navigation Aerial camera models usually use point-and-click navigation In a game with a multipresent (or party-based) interaction model, the player first chooses which unit(s) should move, then chooses their destination in the environment This uses a pathfinding algorithm (the avatar moves to the clicked destination automatically avoiding obstacles) Usually the player can select 1 of 2 speeds (i.e. hold down a certain key for running) http://www.youtube.com/watch?v=YaQfK3pDPcs&feature =related http://www.youtube.com/watch?v=YaQfK3pDPcs&feature =related

Point-and-Click Navigation (continued) This technique is most often used in real-time strategy and role-playing games When many units need to be given their own paths and theres not enough time to control them all precisely If the units cant move to the location, it either: Goes as far as it can Or warns the player that it cant proceed to the destination Allow the player to designate waypoints (intermediate points that the unit must pass through on its way to the final destination)

Allowing for Customization One of the most useful features One of the easiest to design Normally this is handled via a shell menu The most common customizations are: Swapping the left and right mouse buttons Right-handed vs. left-handed players Swapping the up and down directions of the mouse or joystick Some players like to move the mouse/joystick up to look up and some like to move it down to look up

Allowing for Customization (continued) Make functions easily customizable for the player: They dont want to spend forever trying to customize the keys Degrees of freedom: number of possible dimensions an input device can move through Ordinary button: 1 degree of freedom Joystick/mouse: 2 degrees of freedom (up/down and left/right) Wii Remote: 3 degrees of freedom You can let the player swap 2 devices if they have the same degrees of freedom Your game should include a key reassignment shell menu

Allowing for Customization (continued) Warn the player if he/she tries to exit the shell menu during the key reassignment if an action is unassigned Make sure to have the unassigned keys all on the same screen (too confusing when you flip from screen to screen) Save the players customizations so he/she doesnt need to reassign them every time Include a restore defaults option

Summary Reviewers say that the user interface is the feature that makes games great A smooth interface improves the players perception of the game Make sure your elements are theme-based Allowing for Customization Make sure to save different elements in different files!

Documents

Kristin Bell. Topics Covered Visual Elements Audio Elements Input Devices Navigation Mechanisms Allowing for Customization