UI Design For Games by wxr16887

VIEWS: 202 PAGES: 32

									UI Design For Games




       Adam Hunter
 Senior Graphics Engineer
   Kaos Studios, THQ




                        UI Design For Games
                 Talk Organization
   What Is UI Design?
   Case Studies/Discussion
       Play a game (or two)
   Tips & Tricks                           QuickTime™ and a
                                        TIFF (LZW) decompresso r
                                     are neede d to see this picture.




   Mostly from an art
    perspective




                                 UI Design For Games
              What is UI Design?
   Depends on who you ask
   “User Interface” - any surface-level interaction
    with the user
   Designing a car’s dashboard could be
    considered UI, but is often called HCI (Human
    Computer Interaction)
   In video games, scope is generally art and
    interaction that doesn’t fit any other category


                                        UI Design For Games
               What is UI Design?
   What is a User Interface?
       Can include more than just graphics
       HCI (Human-Computer Interaction)




                                              UI Design For Games
                   What Is UI Design?
   Three Main Components:
       Art
       Layout (Visual Design)
       Interaction
   Notice nothing specific to games
       UI Design for Games is just UI Design first
       Jakob Nielsen, “Designing Web Usability”
            “There are essentially two basic approaches to design:
             the artistic ideal of expressing yourself and the
             engineering ideal of solving a problem.”

                                                    UI Design For Games
            What is UI Design?
   Games Industry's “Not Created Here” problem




                                    UI Design For Games
                 What is UI Design?
   My Definition:
       “UI Design is the process of building the graphics
        and interaction players use that is outside the main
        flow of gameplay”
   Have to Decide on Goals
       Hardware Requirements?
       Accessibility?
       Art Time?
       Genre?

                                             UI Design For Games
              Who Does UI Design?
   Unhappy texture artists
   Junior programmers
   Pressed-into-service Associate Producers
       Sometimes with art degrees, even
   Outsourced contractors
   Interns
   …a star studded cast
   Rocket Scientist geniuses who work in other fields


                                           UI Design For Games
                     What is UI Design
   Some good common goals
        Consistency
             With yourself, with games, with software, with the world
        Transparency
             Get to the game
        Accessibility
        Fun!
    Soccer Gaming LMA Manager 2007




                                                      UI Design For Games
                 UI Design for Games
   Common UI Technologies
       Flash
            Either by itself, or compiled onto a console
       Windows (GDI/DirectX/DirectInput)
       J2ME/Brew
       Unreal or other Engine (Torque)
       DrawSprite(int x, int y, Sprite *mySprite)




                                                      UI Design For Games
               Time for Games
   Frequency, Harmonix, PS2
   Wii Sports, Nintendo, Wii




                                UI Design For Games
               Talking Points
   Why don't we use the Windows UI in games?




                                   UI Design For Games
               Talking Points
   Why don't we use the Windows UI in games?




                                   UI Design For Games
                       Talking Points
   Why don't we use the Windows UI in games?
       Different input devices (joysticks vs. mice)
       Tech reasons (can't run on Mac or consoles)
       Traditions and consistency (“pause” menu)
       Artistic immersion/suspension of disbelief
       Goals are often different
            Simplicity versus power
            Fun versus productivity
       Sometimes, you do! (Aero interface)

                                              UI Design For Games
                Talking Points
   Why isn’t the WoW inventory resizable?




                                     UI Design For Games
                     Talking Points
   Why isn't the WoW inventory resizable?
       Nothing else is
       The art wasn't built for it
       Resizable implies movable
       MMO tradition
       Fixed number of items per bag
       Allows Blizzard to position things for you
       But most importantly: Because it doesn't have to be.


                                              UI Design For Games
                    Talking Points
   Why is the Star Wars Galaxies inventory
    window resizable?
       Because everything else is
       Because the art was built for it
       Because they are also movable
       Because the size of the inventory is very large
       Because, ultimately, we found our players enjoyed
        the complexity


                                             UI Design For Games
                Talking Points
   Why don't we have a “Master Toolkit” for UI
    Design for games?




                                      UI Design For Games
                       Talking Points
   Why don't we have a “Master Toolkit” for UI
    Design for games?
       “Not invented here” syndrome
       Variety of different platforms
       Different genres have different conventions
       “Innovation”




                                            UI Design For Games
                     Tips & Tricks
   What to do if suddenly you become a UI
    designer
       Don't Panic: Lower Expectations
       Functional First, don't worry about details
       Worry about the details – spend time making pixel-
        accurate menu borders and button styles
       Don't get fancy – no animated gifs
       Consistency is king
       Write down a style guideline
       Use another game as a guide
                                              UI Design For Games
                        Tips & Tricks
   Color is very important
       Red for foregrounds, Blue for backgrounds
       Vibrant, even if you think you shouldn't
            Contrast is very important
            Primary colors pop off the screen
       Always view color on the target device
       Some players are color-blind (or just blind!)




                                                 UI Design For Games
                      Tips & Tricks
   “Read”
       v., intransitive, of text, etc.: “to be interpreted or
        read in a particular way”
       Things that “don't read well” are confusing as the
        eye scans over them
       Things that do read well are easy to, well, read -
        information jumps off the screen commensurate to
        its importance



                                                  UI Design For Games
                         Tips & Tricks
   “Read”
       Animation is bad, esp. for background elements
       Things that are the same should be the same and
        different should be different
            Imaging a “Sharpen” filter on the entire game
       Use changes of color or intensity to indicate
        information
            Disabled, selected, important
       Use bright foreground/background colors
       Choose a good font (Sans Serif)
                                                    UI Design For Games
                     Tips & Tricks
   Always Use Target Device
       Screen space (physically)
       Color depth and color precision
       Color reproduction
       Pixel precision – fuzzy CRT versus sharp LCD
       Touch screens?
       Flicker?
       Lighting conditions?


                                           UI Design For Games
                    Tips & Tricks
   Pixel-level accuracy
       Almost every UI
        system uses 2D sprite
        blitting




                                    UI Design For Games
                         Tips & Tricks
   Designing 2D sprite sheets
       UI systems don't do stretching well, so make
        everything pixel accurate
            You will screw this up
       Especially on PCs, UI has to be resizable
            Make highest and scale down
            Different images for different resolutions
            Or, just let the UI stay a fixed size
       Get used to recording pixel locations on images
            Great to have some sort of recording tool

                                                      UI Design For Games
                    Tips & Tricks
            title      Fonts and colors         close




        icon
                                               indent



                                          Scroll bar
Movable
Resizable
Mouse cursors




                            buttons       UI Design For Games
                        Tips & Tricks
   Skinning
       Is it a good idea? Do you want it?
       How much will get skinned?
       Can users do it themselves?
            If so, need very good bookkeeping and even better tools




                                                   UI Design For Games
                         Tips & Tricks
   Dynamic UI elements
       Do you need to play movies?
       How are elements changed to reflect their state
            e.g. Selected, Disabled, etc.
       Animations?
            Flipbooks, movies
       UI scripting?
            Whole new can of worms



                                             UI Design For Games
    Stuff we didn’t talk about (but can)
   Message Pumps
   Navigation Links
        Random versus Intentional navigation
   Frame-rate dependent cursor feedback
   Keymapping
   Localization
        Widget sizes, input, scrolling direction, etc.
   Saved data format
   Tools

                                                          UI Design For Games
                        Localization
   Font choices
   Widget sizes (hint: they get bigger)
   Input
       Input Method Editors for Asian languages
   Text localization systems
       Turning tags into actual strings
       Outsourced translation (context issues, workflow issues)
   Keymapping
   …and everything else
                                                   UI Design For Games
           UI Design for Games
   Question and Answer




                            UI Design For Games

								
To top