This lecture looks at the information visualisation technique of Layering and Separation.

1. 2010
Game Design 2
Lecture 6: Layering & Separation
http://www.comu346.com dfarrell@davidlearnsgames.com

2. Reading
• Tufte pages 53 - 66
• http://bit.ly/l4dlight (Left 4 Dead use of light)
• http://bit.ly/worldofgootour (video)

3. Flatland
• Flatland: A Romance of Many Dimensions
• 1884 Novel by Edwin A. Abbott
• Contemplates how world would look to
lesser and greater dimensions

4. Triangle in 2D

5. Triangle in 1D

6. Sphere in 1D

7. 3D represented in 2D

8. Data Visualisation
• Life is navigated in 3D
• Mathematics can portray xD
• All(most all) of our displays are 2D
• How do we map data to 2D?
• One technique is layering and separation

9. “Escaping this flatland is the essential task of
envisioning information”
Tufte, Envisioning Information, Page 13

10. Information
• simple or complicated
• detailed or sparse
• analogue or digital
• NEVER confusing or cluttered

11. Design
• understandable or confusing
• clear or cluttered
• the point of design is to reveal detail and
complexity
• the data is never at fault
• the user is never at fault

15. What are the layers here?

16. Colour defines the relationship

24. Negative Space

25. 1+1=3

26. Harmonising Elements
• Careful layout diminishes 1 + 1 = 3 clutter
• Avoid ‘active negative space’
• Words have fewer descenders than
ascenders
• Curved text is hard to read

27. Box Plots

32. Subtle Differences
• All differences mean something

33. Games Examples
• 2D & 3D games use layering & separation
to communicate with player.
• HUD is layered on top of game world
• Games like Half Life 2 & Shadow of the
Colossus foreshadow future events through
use of background

34. Madden 10

35. Championship Manager

36. Left 4 Dead

38. World of Goo