We look at how to layer information and separate it through techniques like weight and colour.

1. 2013
Game Design 2
Lecture 8: Layering & Separation
http://gcugd2.com
david.farrell@gcu.ac.uk

2. Notes...
• Coursework online!
• Tutorial feedback
• Read Tufte’s book chapters!
I have a copy
that I can bring to tuts -& there are copies
in library.

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

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

5. Triangle in 2D

6. Triangle in 1D

7. Sphere in 1D

8. 3D represented in 2D

9. 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

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

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

12. 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

16. What are the layers here?

17. Colour defines the relationship

23. ! "An undifferentiated, unlayered surface results jumbled up, blurry,
incorherent, chaotic with unintentional optical art. What we have here is
a failure to communicate” - Tufte p58

26. Negative Space

27. 1+1=3

28. Harmonising Elements
• Careful layout diminishes 1 + 1 = 3 clutter
• Avoid ‘active negative space’
• Words have fewer descenders than
ascenders (so safer to put above a line)
• Curved text is hard to read

29. Box Plots

34. Subtle Differences
• All differences mean something

35. Games Examples
• 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 layers (even though we
don’t use the phrase “layers” in this way
often)

36. Madden 10

37. Championship Manager

38. Left 4 Dead

40. World of Goo