game design 2 (2013): lecture 8 - layering and separation for game communication

40
Game Design 2 Lecture 8: Layering & Separation http://gcugd2.com [email protected] 2013

Upload: david-farrell

Post on 06-May-2015

1.138 views

Category:

Education


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

Game Design 2Lecture 8: Layering & Separation

http://gcugd2.com [email protected]

2013

Page 2: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

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

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

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

Triangle in 2D

Page 6: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

Triangle in 1D

Page 7: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

Sphere in 1D

Page 8: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

3D represented in 2D

Page 9: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

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

“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

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

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
Page 14: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Page 15: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Page 16: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

What are the layers here?

Page 17: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

Colour defines the relationship

Page 18: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Page 19: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Page 20: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Page 21: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Page 22: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Page 23: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

! "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
Page 25: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Page 26: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

Negative Space

Page 27: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

1 + 1 = 3

Page 28: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

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

Box Plots

Page 30: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Page 31: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Page 32: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Page 33: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Page 34: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

Subtle Differences

• All differences mean something

Page 35: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

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

Madden 10

Page 37: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

Championship Manager

Page 38: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

Left 4 Dead

Page 39: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication
Page 40: Game Design 2 (2013): Lecture 8 - Layering and Separation for Game Communication

World of Goo