![Page 2: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/2.jpg)
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.
![Page 3: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/3.jpg)
Reading
• Tufte pages 53 - 66
• http://bit.ly/l4dlight (Left 4 Dead use of light)
• http://bit.ly/worldofgootour (video)
![Page 4: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/4.jpg)
Flatland
• Flatland: A Romance of Many Dimensions
• 1884 Novel by Edwin A. Abbott
• Contemplates how world would look to lesser and greater dimensions
![Page 5: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/5.jpg)
Triangle in 2D
![Page 6: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/6.jpg)
Triangle in 1D
![Page 7: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/7.jpg)
Sphere in 1D
![Page 8: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/8.jpg)
3D represented in 2D
![Page 9: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/9.jpg)
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
![Page 10: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/10.jpg)
“Escaping this flatland is the essential task of envisioning information”
Tufte, Envisioning Information, Page 13
![Page 11: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/11.jpg)
Information
• simple or complicated
• detailed or sparse
• analogue or digital
• NEVER confusing or cluttered
![Page 12: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/12.jpg)
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
![Page 13: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/13.jpg)
![Page 14: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/14.jpg)
![Page 15: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/15.jpg)
![Page 16: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/16.jpg)
What are the layers here?
![Page 17: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/17.jpg)
Colour defines the relationship
![Page 18: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/18.jpg)
![Page 19: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/19.jpg)
![Page 20: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/20.jpg)
![Page 21: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/21.jpg)
![Page 22: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/22.jpg)
![Page 23: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/23.jpg)
! "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
![Page 24: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/24.jpg)
![Page 25: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/25.jpg)
![Page 26: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/26.jpg)
Negative Space
![Page 27: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/27.jpg)
1 + 1 = 3
![Page 28: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/28.jpg)
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
![Page 29: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/29.jpg)
Box Plots
![Page 30: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/30.jpg)
![Page 31: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/31.jpg)
![Page 32: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/32.jpg)
![Page 33: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/33.jpg)
![Page 34: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/34.jpg)
Subtle Differences
• All differences mean something
![Page 35: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/35.jpg)
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)
![Page 36: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/36.jpg)
Madden 10
![Page 37: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/37.jpg)
Championship Manager
![Page 38: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/38.jpg)
Left 4 Dead
![Page 39: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/39.jpg)
![Page 40: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication](https://reader034.vdocuments.us/reader034/viewer/2022052522/55495cf4b4c905f24e8b5617/html5/thumbnails/40.jpg)
World of Goo