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

Post on 28-Nov-2014

1.086 views 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 of Game Design 2 (2013): Lecture 3 - Use of Text in design.

Game Design 2Lecture 3: Text

http://gcugd2.com david.farrell@gcu.ac.uk

2013

Reading

• Duarte 140 - 155

• Fox 87-98

Two Questions

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

• How can text help you visualise data?

Anthropomorphised Fonts

• Fonts have personality.

• Serious

• Playful

• Friendly

•Tense

• Annoying

•Distressed

Functional Fonts

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

•Other fonts are suitable for OCR

•(0 vs O)

Font components

play

playCap Height

playCap Height

X Height

playCap Height

X Height

Baseline

playCap Height

X Height

Baseline

Ascender

playCap Height

X Height

Baseline

Ascender

Descender

playCap Height

X Height

Baseline

Ascender

Descender

Serifs

playCap Height

X Height

Baseline

Ascender

Descender

Serifs

Counter

playCap Height

X Height

Baseline

Ascender

Descender

Serifs

Counter

Kerning

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.

Serif Fonts

•The serifs connect letters• useful at small point size

• or in large paragraphs

• problematic for dyslexics

Sans Serif Fonts

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

• work better on computer screens

Ligatures

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

ligatures

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

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

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

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

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

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

Text as visualisation

• Word Clouds

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.

Questions?