Designing Game Interfaces

8,414 views

Published on

This is the slide deck for the session I gave on interface design at Adobe MAX 2011

2 Comments
15 Likes
Statistics
Notes
  • Hi!
    May I ask something? Which game interface do you think works better on mobile devices? Do you think that a 2D horizontal scrolling game interface works well on them? Maybe I'm kind of an old school guy, but the fact of not sensing any button under my thumbs makes me loose control over the game, so I don't feel comfortable with this.

    tnxs a lot! :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for sharing!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
8,414
On SlideShare
0
From Embeds
0
Number of Embeds
764
Actions
Shares
0
Downloads
0
Comments
2
Likes
15
Embeds 0
No embeds

No notes for slide
  • The section titles are important as they emote a response for example:Game Interfaces 101 indicates that we will be looking at the nuts and bolts of GUIs in gamingThe poetics of space is about how the interface interacts with the game environment (in actual fact it is a book by Gaston Bachelard that discusses how we experience intimate places – a good book)Shrink Wrapped focuses on the common practice of designing the game then overlaying the interface afterwards – think HUDs.Touch, touch, touch looks at the UI issues that face game developers when designing for tables and other touch devices including elements like positioning, dexterity, reach and obstruction (thumbs etc obscuring the screen)XXXXXX
  • The commonest form of GI are without doubt HUDs and ‘overlays’ (think Starcraft / WoW). However these aren’t the only for of GI and are not reflective of the art of GI design.
  • The commonest form of GI are without doubt HUDs and ‘overlays’ (think Starcraft / WoW). However these aren’t the only for of GI and are not reflective of the art of GI design.
  • This diagram, while primarily about 3D game interface relationships can easily be applied to 2D game development. However to explain the concepts of diegetic / spatial interfaces it is easier to use 3D games as they are easier to demonstrate or show examples of. That said, 2D games do use these techniques – most commonly found in platform or top down games. For example take the 1up mushroom in Super Mario. This isn’t a part of the game play / mechanic as it doesn’t provide any benefit to the character – it only benefits the player (by giving an extra life)Erik Fagerholt / Magnus Lorentzon
  • This diagram, while primarily about 3D game interface relationships can easily be applied to 2D game development. However to explain the concepts of diegetic / spatial interfaces it is easier to use 3D games as they are easier to demonstrate or show examples of. That said, 2D games do use these techniques – most commonly found in platform or top down games. For example take the 1up mushroom in Super Mario. Tbhis isn’t a part of the game play / mechanic as it doesn’t provide any benefit to the character – it only benefits the player (by giving an extra life)
  • Interface that is rendered outside the game world, only visible and audible to the players in the real world. Example: most classic heads-up display (HUD) elements
  • This diagram, while primarily about 3D game interface relationships can easily be applied to 2D game development. However to explain the concepts of diegetic / spatial interfaces it is easier to use 3D games as they are easier to demonstrate or show examples of. That said, 2D games do use these techniques – most commonly found in platform or top down games. For example take the 1up mushroom in Super Mario. Tbhis isn’t a part of the game play / mechanic as it doesn’t provide any benefit to the character – it only benefits the player (by giving an extra life)
  • Here we have the Zombie Tycoon game developed by Frima Studios with Stage3D. This gives a very good demonstration of Spatial, non-spatial, non-diegetic interface items
  • This diagram, while primarily about 3D game interface relationships can easily be applied to 2D game development. However to explain the concepts of diegetic / spatial interfaces it is easier to use 3D games as they are easier to demonstrate or show examples of. That said, 2D games do use these techniques – most commonly found in platform or top down games. For example take the 1up mushroom in Super Mario. Tbhis isn’t a part of the game play / mechanic as it doesn’t provide any benefit to the character – it only benefits the player (by giving an extra life)
  • Items that may exist in the game but are not displayed spatially. The most apparent example is effects rendered on the screen, such as blood spatter on the camera to indicate damage.
  • This diagram, while primarily about 3D game interface relationships can easily be applied to 2D game development. However to explain the concepts of diegetic / spatial interfaces it is easier to use 3D games as they are easier to demonstrate or show examples of. That said, 2D games do use these techniques – most commonly found in platform or top down games. For example take the 1up mushroom in Super Mario. Tbhis isn’t a part of the game play / mechanic as it doesn’t provide any benefit to the character – it only benefits the player (by giving an extra life)
  • Designing Game Interfaces

    1. 1. Designing Game Interfaces<br />Mike Jones | Gaming Evangelist, Adobe<br />
    2. 2. Mike Jones<br />Gaming Evangelist<br />blog.flashgen.com<br />@FlashGen<br />Introduction<br />
    3. 3. Agenda<br />Game interfaces 101<br />The poetics of space<br />The power of touch<br />Questions<br />3<br />
    4. 4. Game Interfaces 101<br />4<br />
    5. 5. Game Interfaces 101<br />Useful in providing relevant information to the player<br />Occupy minimal screen real estate<br />Designed to be unobtrusive<br />Common elements include score, time, health, bullets<br />Need not be permanently visible <br />Can adapt / evolve<br />Simplicity goes a long way<br />5<br />
    6. 6. Game Interfaces 101<br />6<br />
    7. 7. Game Interfaces 101<br />Useful in providing relevant information to the player<br />Occupy minimal screen real estate<br />Designed to be unobtrusive<br />Common elements include score, time, health, bullets<br />Need not be permanently visible <br />Can adapt / evolve<br />Simplicity goes a long way<br />7<br />
    8. 8. Game Interfaces 101<br />8<br />
    9. 9. Game Interfaces 101<br />9<br />Demo<br />
    10. 10. 10<br />The Poetics of Space<br />
    11. 11. The Poetics of Space<br />11<br />Fagerholt, Lorentzon (2009) "Beyond the HUD - User Interfaces for Increased Player Immersion in FPS Games". <br />MSc Thesis, Chalmers University of Technology<br />
    12. 12. The Poetics of Space<br />12<br />Fagerholt, Lorentzon (2009) "Beyond the HUD - User Interfaces for Increased Player Immersion in FPS Games". <br />MSc Thesis, Chalmers University of Technology<br />
    13. 13. The Poetics of Space<br />13<br />
    14. 14. The Poetics of Space<br />14<br />Fagerholt, Lorentzon (2009) "Beyond the HUD - User Interfaces for Increased Player Immersion in FPS Games". <br />MSc Thesis, Chalmers University of Technology<br />
    15. 15. The Poetics of Space<br />15<br />
    16. 16. The Poetics of Space<br />16<br />Fagerholt, Lorentzon (2009) "Beyond the HUD - User Interfaces for Increased Player Immersion in FPS Games". <br />MSc Thesis, Chalmers University of Technology<br />
    17. 17. The Poetics of Space<br />17<br />
    18. 18. The Poetics of Space<br />18<br />Fagerholt, Lorentzon (2009) "Beyond the HUD - User Interfaces for Increased Player Immersion in FPS Games". <br />MSc Thesis, Chalmers University of Technology<br />
    19. 19. The Poetics of Space<br />19<br />
    20. 20. 20<br />The Power of Touch<br />
    21. 21. The power of touch<br />21<br />
    22. 22. The power of touch<br />22<br />
    23. 23. The power of touch<br />23<br />
    24. 24. The power of touch<br />24<br />
    25. 25. The power of touch<br />25<br />Demo<br />
    26. 26. The power of touch<br />Touch based devices compound game interface integration<br />The “fourth wall” now becomes the main input<br />Lack of input precision and screen size require additional thought<br />Players thumbs, fingers can easily obscure areas of the screen <br />The device itself becomes an extension of the interface<br />26<br />
    27. 27. Summary<br />Avoid “shrink wrapping” your games<br />Test early and often<br />Touch based devices can compound interface design<br />27<br />
    28. 28. Additional Resources<br />Articles & Publications<br />Beyond the HUD: User Interfaces for Increased Player Immersion in FPS Games (MSc Thesis) - Erik Fagerholt, Magnus Lorentzon.http://publications.dice.se/attachments/beyond.the.hud.091025.pdf<br />User Interface design in video games - Anthony Stonehousehttp://www.thewanderlust.net/blog/2010/03/29/user-interface-design-in-video-games/<br />Replay: The History of Video Games – Tristan Donovanhttp://www.amzn.com/0956507204<br />Examples<br />Fortune Onlinehttp://www.fortuneonline.com<br />Max Racerhttp://alternativaplatform.com/en/demos/maxracer/<br />Zombie Tycoonhttp://molehill.zombietycoon.com/<br />28<br />
    29. 29. Any Questions?<br />Mike Jones<br />Gaming Evangelist<br />blog.flashgen.com<br />@FlashGen<br />http://gaming.adobe.com<br />
    30. 30. Thank You<br />Mike Jones<br />Gaming Evangelist<br />blog.flashgen.com<br />@FlashGen<br />http://gaming.adobe.com<br />

    ×