game design 2 (2013): lecture 3 - use of text in design

38
Game Design 2 Lecture 3: Text http://gcugd2.com [email protected] 2013

Upload: david-farrell

Post on 28-Nov-2014

1.086 views

Category:

Education


2 download

DESCRIPTION

Text isn't just about words. The fonts, colours, and places you use text have a huge influence your game's design.

TRANSCRIPT

Page 1: Game Design 2 (2013): Lecture 3 - Use of Text in design

Game Design 2Lecture 3: Text

http://gcugd2.com [email protected]

2013

Page 2: Game Design 2 (2013): Lecture 3 - Use of Text in design

Reading

• Duarte 140 - 155

• Fox 87-98

Page 3: Game Design 2 (2013): Lecture 3 - Use of Text in design

Two Questions

• How can you use text visually to accomplish design goals?

• How can text help you visualise data?

Page 4: Game Design 2 (2013): Lecture 3 - Use of Text in design

Anthropomorphised Fonts

• Fonts have personality.

• Serious

• Playful

• Friendly

•Tense

• Annoying

•Distressed

Page 5: Game Design 2 (2013): Lecture 3 - Use of Text in design
Page 6: Game Design 2 (2013): Lecture 3 - Use of Text in design
Page 7: Game Design 2 (2013): Lecture 3 - Use of Text in design

Functional Fonts

•fixed width fonts { useful for programming; because characters line up;}

•Other fonts are suitable for OCR

•(0 vs O)

Page 8: Game Design 2 (2013): Lecture 3 - Use of Text in design

Font components

play

Page 9: Game Design 2 (2013): Lecture 3 - Use of Text in design

playCap Height

Page 10: Game Design 2 (2013): Lecture 3 - Use of Text in design

playCap Height

X Height

Page 11: Game Design 2 (2013): Lecture 3 - Use of Text in design

playCap Height

X Height

Baseline

Page 12: Game Design 2 (2013): Lecture 3 - Use of Text in design

playCap Height

X Height

Baseline

Ascender

Page 13: Game Design 2 (2013): Lecture 3 - Use of Text in design

playCap Height

X Height

Baseline

Ascender

Descender

Page 14: Game Design 2 (2013): Lecture 3 - Use of Text in design

playCap Height

X Height

Baseline

Ascender

Descender

Serifs

Page 15: Game Design 2 (2013): Lecture 3 - Use of Text in design

playCap Height

X Height

Baseline

Ascender

Descender

Serifs

Counter

Page 16: Game Design 2 (2013): Lecture 3 - Use of Text in design

playCap Height

X Height

Baseline

Ascender

Descender

Serifs

Counter

Kerning

Page 17: Game Design 2 (2013): Lecture 3 - Use of Text in design

Kerning

• Fixed width fonts look strange because they force equidistant spacing between letters.

• Kerning is the process of adjusting space between letters to soothe the eye.

Page 18: Game Design 2 (2013): Lecture 3 - Use of Text in design

Serif Fonts

•The serifs connect letters• useful at small point size

• or in large paragraphs

• problematic for dyslexics

Page 19: Game Design 2 (2013): Lecture 3 - Use of Text in design

Sans Serif Fonts

•Sans means ‘without’• generally accepted as easier to read

• work better on computer screens

Page 20: Game Design 2 (2013): Lecture 3 - Use of Text in design

Ligatures

•f irefly• note how the ‘f ’ and ‘i’ interact without

ligatures

•firefly• Apple apply ligatures to ‘fi’ but not to ‘fl’

Page 21: Game Design 2 (2013): Lecture 3 - Use of Text in design

Mixing Fonts

• Paired fonts can be effective.

• one for header

• one for main text

• Have a really GOOD reason before going to three or more fonts

Page 22: Game Design 2 (2013): Lecture 3 - Use of Text in design

Colour & Contrast

• Essential in menus & HUD

• If game is dark, use light text

• If game is light, use dark text

• If cannot guarantee background, add a border to text

• can be x pixel border or container space

Page 23: Game Design 2 (2013): Lecture 3 - Use of Text in design
Page 24: Game Design 2 (2013): Lecture 3 - Use of Text in design
Page 25: Game Design 2 (2013): Lecture 3 - Use of Text in design
Page 26: Game Design 2 (2013): Lecture 3 - Use of Text in design

Animating Text

• Only animate if it adds meaning

• Nintendo style of conversation is to animate blocks of text

• Colour change for rollovers == OK

• Colour change to make GUI shiny == bad

Page 27: Game Design 2 (2013): Lecture 3 - Use of Text in design
Page 28: Game Design 2 (2013): Lecture 3 - Use of Text in design

Using Text• Where possible, show don’t tell

• but where necessary tell

• Tufte: “to clarify, add detail”

• Use little text

• Even in adventure games, people don’t read

• WOW - http://bit.ly/wowtextlimit

• Avoid UPPPERCASE in large quantities

Page 29: Game Design 2 (2013): Lecture 3 - Use of Text in design

Using Text

• Sparing use of colour or emphasis can pass on important information

• If you allow resizing of text, test extremes to see how your design holds up (especially true of web browser based games)

• Consider fully justifying blocks of text

Page 30: Game Design 2 (2013): Lecture 3 - Use of Text in design

Text as visualisation

• Word Clouds

Page 31: Game Design 2 (2013): Lecture 3 - Use of Text in design
Page 32: Game Design 2 (2013): Lecture 3 - Use of Text in design
Page 33: Game Design 2 (2013): Lecture 3 - Use of Text in design
Page 34: Game Design 2 (2013): Lecture 3 - Use of Text in design
Page 35: Game Design 2 (2013): Lecture 3 - Use of Text in design
Page 36: Game Design 2 (2013): Lecture 3 - Use of Text in design
Page 37: Game Design 2 (2013): Lecture 3 - Use of Text in design

Internationalisation

• Not all fonts are compatible

• UTF-8 fonts should work

• Much care needed if copy / pasting

• If using dynamically loaded text, sometimes text effects cannot be applied.

Page 38: Game Design 2 (2013): Lecture 3 - Use of Text in design

Questions?