Game Design 2: Lecture 11 - Colour
Download as KEY, PDF0 likes949 views
This document discusses using color in game design. It covers: 1) Different ways color can be used according to Tufte - to label, measure, represent reality, and enliven. 2) Examples of how color is used in games for team identification, item highlighting, mood/tone, conveying information, and representing reality. 3) Tips on choosing colors including considering the color wheel, mood palettes, cultural implications, and color blindness. The document emphasizes using color sparingly and effectively in design.
Ad
More Related Content
Viewers also liked (10)
Similar to Game Design 2: Lecture 11 - Colour (20)
Ad
More from David Farrell (20)
Ad
Recently uploaded (20)
Game Design 2: Lecture 11 - Colour
- 1. 2011 Game Design 2 Lecture 11: Colour
- 2. Half and Half • Half on using colour in information design • Half on what colour is and how to choose
- 3. Books
- 4. Tufte’s uses of colour • to label (colour as noun) • to measure (colour as quantity) • to represent / imitate reality (colour as representation) • to enliven or decorate (colour as beauty)
- 5. Colour in Games • Team identification (label) • Item highlighting (label) • Mood, tone & aesthetics (enliven) • Convey information (measure) • Represent reality (representation)
- 9. Mood & Tone
- 13. Label
- 14. Measurement
- 17. Information Design • Games don’t do a great job of information design - but they use colour fairly well. • Consider Tufte’s uses of colour in your designs.
- 18. What is Colour?
- 19. Rods & Cones • Rods & Cones • Tuned to RGB • Uneven distribution • 64% red, 34% green, 2% blue • Can distinguish red better than blue • Yellow shades particularly similar
- 20. Magenta?
- 22. Colour Models • Red, Green, Blue (Thissen 163) • Cyan, Magenta,Yellow, Key (Fox 52) • Hue, Lightness, Saturation (Thissen 162)
- 23. Colour Wheel • Newton Wheel • Red,Yellow, Green • Blended for hues • add whites (tint) • or black (shade)
- 30. Color Jack Text http://www.bit.ly/colorjack
- 31. Tip: Industry Palettes • Find industry photograph • Extract main colours
- 32. Tip: Mood Palettes • Find mood photograph • Extract main colours
- 33. DeGraeve Extractor http://www.bit.ly/degraeve
- 34. 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
- 35. Colour Blind • 1 in 12 people • Resources exist which can model colour blindness. • http://www.wearecolorblind.com
- 40. Use Colour Sparingly • It is easy to emphasise something on unobtrusive colours. • On glaring colours it is difficult to emphasise something.
- 41. 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!
- 43. Tufte “Above all, do no harm.”
Editor's Notes
- #2: \n
- #3: \n
- #4: I have brought Tufte’s book with me.\n\nSome of the content of this lecture and next week’s lectures is a little obtuse and difficult to fully appreciate.\n\nSo I highly recommend reading the chapter on Colour and Information (pages 81 -95)\n
- #5: Tufte identifies four fundamental uses of colour in information design.\n\nConsider a map. Colour can LABEL by distinguishing water from stone.\nCan MEASURE by indicating altitude of mountains by colour\nCan imitate reality with river blues and shadows\nand can enliven the map far beyond what it would look like in B&W\n\n\n
- #6: I’m going to show how each of these rules can be applied to games.\n
- #7: Label (noun)\n\nYou don’t think “different classes” in these cases - you think “different teams”\n
- #8: Label (noun)\n\nThis works well here, but I often find menus with just two iptions - which is highlighted and which is not?\n\n\n
- #9: Label (noun) - backpack on Zoe\n\nRed means safe in L4D - red backpack, red health boxes, red safehouse\n\nsemiotics!\n
- #10: Enliven\n\nnote the stalks, some coloured balls at top a flower\n
- #11: same type of assets used here - same stalks and balls - but mood is very different\n\n
- #12: enliven / aesthetic\n\nalso to represent reality here - \n\nthe use of dull greys conveys both a realism and a dark tone\n\n\nAmazing artwork - but damn bleak. Grey and Brown - evocative and moving but very bleak.\n\nYes - more realistic - you DO have leaves in normal fall out - but look at the feeling of the colour, mood v different, \n\n
- #13: someone actually modded all the green back INTO fallout - and it looks liek a cartoon!\n\ngreen one is almost like camping\n\nlook how well the HUD sticks out - there is high contrast here\n\n\n
- #14: Not very ‘realistic’ - the tree is grey!\n\nBut communicates very effectively.\nResult of playtesting\n\n
- #15: The health bar info works even without numebrs.\n\n
- #16: Can they see uses of colours here?\n\nborders\nflags\nocean depths\nplains vs grass\nproduction & city growth bars\n\n
- #17: see the city growth bars in detail here?\n\ngreat use of colour to measure\n\n
- #18: \n
- #19: Colour is just energy that we can see.\n\nGamma Rays up to Long Wave Radio\n\n
- #20: Cones see bright\nrods see dark\n\nuneven distribution\nthat's why colour sensitivity different in light and dark\n\nnight hunting animals have more rods \n\nreason you SEE primary colours (p school) is that the cones and rods are tuned to these colours\n\nthe reason you can see red better than blue is LITERALLY because you have more red rods.\n\nnot random hat these colours make up all the colours we see- this is the hardware!\n\nIf you want to use shading to communicate to the player, you would avoid using yellow shades because they all look the same (colour picker yellow)\n\n
- #21: Random magenta internet thing\n\nSomeone saying magenta not a colour\n\nWhat's going on?\n\neyes averaging out the colours\nmagenta is Blue and Red\n\nit could average out blue and red to get green (not very good)\nit could 'invent' a new colour\n\n
- #22: All of the colours in tehcolour bag are made of blended wavelengths.\n
- #23: ou need to know what these are and why they exist.\n\nEveryone familiar with RGB. \n\nRGB+ A\n\nCMYK - Key because colours were keyed against the black tone\n\nReaosn that there are two primary colours is because of SUBTRACTIVE vs ADDITIVE light\n\nHLS relates to the colour wheel\n\n
- #24: \nNewton discovered this and cam up with a colour wheel.\n\nIf you spread out the primary colours and then blend all the colours between, you get the colour wheel.\n\nYou add white tints to go brighter and black shades to go dark\n\nadding white is tinting \nadding black is shading\n\nhue is the POINT on the circle\nsaturation is the intensity of the colour\nlight is the amount of white or black you add tot he colour\n\n
- #25: talk about opposite colours\n\nshow how opposites on wheel are same as opposite of how our eyes interpret it\n\nburn in of the red thing - burns in green when you close eyes\n
- #26: \n
- #27: \n
- #28: stare at the black dot\n if you move eyes it goes out of colour\n\nwhat's happening is - when you're starign at negative image, you're desensitising your rods\n\nsame reason if you go light to dark, your eyes take a second to adjust\n\nhigh dynamic range - \ngames model \nmonitor can't show more colours than it is capable\n\ndon't have the brightness range of real world\nthis is a modelling of the human eye\n\nPut one hand over one eye\nclose one eye, then the other eye \n\nYour eye gets used to what it's seeing and it gets burned in on a colour and it over compensates for the other colour.\n\nif you look at a lot of yellow, you will be more sensitive to violet\n
- #29: So why do colour wheel's work?\n\nYou can rotate triangles around and the colours always go together.\n\nThe reason the colours 'go together' is they average out to grey.\n\nThey eye doesn't WANT to burn out - it wants to have a pleasantly middlish colour scheme. these work because the colours blend to grey.\n\nSuggest a flash test with alpha\n\nThere is no TRUE FACT here - this is all tied to our hardware\n\n\n
- #30: \n
- #31: \n
- #32: Catan colour scheme - agriculture - the colour scheme is evocative\n\nF1 game using those colours\n\n____\n\n
- #33: \nMood palettes - same technique for mood\n\nyou did mood boards?\n\n\nThink fallout 3\neverything grey and bleak why?\nfor effect and mood\nalso because hardware isn't great at coloured lighting\nas shaders get better we'll likely see more real world colour\n\n
- #34: Assembling a palette - from Slideology\n \nyou want same colours throughout\n\nget your base colours\n\nfor tint and shade, show the degreave slide and show how the colours are named dull or vibrant and it is tint and shade used to create these\n\n\n
- #35: from duarte\n\n\n
- #36: Colour blind shout out\n\nSnooker game on Amiga - seen it almost never since\npeople don't think about this kind of thing\n\nCoursework shout out\n\nWe are colour blind has many tools - you can send it an image and it will process for Cb and show you how it would look.\n\n\n
- #37: Apple retail store balls\n\nRed and Green when they have the same 'tone' in greyscale.\n\nKey redesign decision is the shape - squares + legend\n\n
- #38: \n
- #39: \nCultural Minefield\nBlue\nWhite\nRed \nGreen\n\nConsider - if you're making a game for worldwide audience - have to consider this stuff\n\nNo easy answer - it's difficult!\n\n
- #40: \nCultural Minefield\nBlue\nWhite\nRed \nGreen\n\nConsider - if you're making a game for worldwide audience - have to consider this stuff\n\nNo easy answer - it's difficult!\n\n
- #41: \n
- #42: When do you need to care about technical colour? Only on edge cases - web games for example\n\n
- #43: \nDare game\njava can read in PNGs etc… may or may not be 256k\n\nPhone HAD to be 256 colour\nso how do you create all colours?\nwe didn't have enough memory to hold graphics in for all the colours\n\nDescribe palette switching\n\nAlso java uncompresses images in memory\njogs may be tiny but they all decompress to full bmp\n\nWe ended up making our own image format up to take care of this to have small images but also have colours\n\nYes - Java has moved on but if you're on a limited system you my need to know this\n\n
- #44: \n