Download - Games Design 3 - Lecture 3 - Colour

Transcript
Page 1: Games Design 3 - Lecture 3 - Colour

Game Design 2Lecture 3: Colour

Page 2: Games Design 3 - Lecture 3 - Colour

Errata and News•All tutorials now take place in the

games lab (M627)

•The Monday tutorial is now on Tuesdays at 12pm - 1pm (after this lecture)

•Lecture 2 slides and audio are online.

•Recommended Reading is online.

•http://www.comu346.com

Page 3: Games Design 3 - Lecture 3 - Colour

Books

Page 4: Games Design 3 - Lecture 3 - Colour

What is colour for?

•to label (colour as noun)

•to measure (colour as quantity)

•to represent / imitate reality

•to enliven or decorate (colour as beauty)

Page 5: Games Design 3 - Lecture 3 - Colour

Colour in Games

•Team identification

•Item highlighting

•Mood, tone & aesthetics

•Convey information

Page 6: Games Design 3 - Lecture 3 - Colour

Team Identification

Page 7: Games Design 3 - Lecture 3 - Colour

Item Highlighting

Page 8: Games Design 3 - Lecture 3 - Colour
Page 9: Games Design 3 - Lecture 3 - Colour

Mood & Tone

Page 10: Games Design 3 - Lecture 3 - Colour
Page 11: Games Design 3 - Lecture 3 - Colour
Page 12: Games Design 3 - Lecture 3 - Colour
Page 13: Games Design 3 - Lecture 3 - Colour

Convey Information

Page 14: Games Design 3 - Lecture 3 - Colour
Page 15: Games Design 3 - Lecture 3 - Colour
Page 16: Games Design 3 - Lecture 3 - Colour
Page 17: Games Design 3 - Lecture 3 - Colour

What is Colour?

Page 18: Games Design 3 - Lecture 3 - Colour

Rods & Cones

•Rods & Cones

•Tuned to RGB

•Uneven distrobution

•64% red, 34% green, 2% blue

•Can distinguish red better than blue

•Yellow shades particularly similar

Page 19: Games Design 3 - Lecture 3 - Colour

Magenta?

Page 20: Games Design 3 - Lecture 3 - Colour
Page 21: Games Design 3 - Lecture 3 - Colour

Colour Models

•Hue, Lightness, Saturation (Thissen 162)

•Cyan, Magenta, Yellow, Key (Fox 52)

•Red, Green, Blue (Thissen 163)

Page 22: Games Design 3 - Lecture 3 - Colour

Colour Wheel

•Newton Wheel

•Red, Yellow, Green

•Blended for hues

•add whites (tint)

•or black (shade)

Page 23: Games Design 3 - Lecture 3 - Colour

Combining Colours

Page 24: Games Design 3 - Lecture 3 - Colour
Page 25: Games Design 3 - Lecture 3 - Colour
Page 26: Games Design 3 - Lecture 3 - Colour
Page 27: Games Design 3 - Lecture 3 - Colour
Page 28: Games Design 3 - Lecture 3 - Colour
Page 29: Games Design 3 - Lecture 3 - Colour

Color Jack

Text

http://www.bit.ly/colorjack

Page 30: Games Design 3 - Lecture 3 - Colour

Tip: Industry Palettes

•Find industry photograph

•Extract main colours

Page 31: Games Design 3 - Lecture 3 - Colour

Tip: Mood Palettes

•Find mood photograph

•Extract main colours

Page 32: Games Design 3 - Lecture 3 - Colour

DeGraeve Extractor

http://www.bit.ly/degraeve

Page 33: Games Design 3 - Lecture 3 - Colour

Assembling a Palette

•Select 3 to 5 colours from colour wheel

•Also select a neutral and highlight colour

•Experiment with tint and shade

•Contrast is important

•Consider the colour blind

•Consider cultural implications

Page 34: Games Design 3 - Lecture 3 - Colour

Use Colour Sparingly

•It is easy to emphasise something on unobtrusive colours.

•On glaring colours it is difficult to emphasise something.

Page 35: Games Design 3 - Lecture 3 - Colour

Colour Blind

•1 in 12 people

•Resources exist which can model colour blindness.

•http://www.wearecolorblind.com

Page 36: Games Design 3 - Lecture 3 - Colour
Page 37: Games Design 3 - Lecture 3 - Colour
Page 38: Games Design 3 - Lecture 3 - Colour

Cultural Minefield

Page 39: Games Design 3 - Lecture 3 - Colour

Technical Limitations?

•Not so much of a problem on modern consoles.

•On underpowered or web based games, may need to use 256 colour palettes.

•Can use same bitmap with different palette to get team colours.

•Work with a programmer!

Page 40: Games Design 3 - Lecture 3 - Colour
Page 41: Games Design 3 - Lecture 3 - Colour

Tufte

“Above all, do no harm.”