- Title: Using Colours in Game Design
- Description: A short passage on the use of colours to accurately direct a player's attention.
- GM Version:
Not applicable. - Registered: No
- File Type: Web Page. Adobe Flash Player required.
- File Size: N/A
- File Link: Not mine. Interactive Colour Wheel
- Required Extensions: None
- Required DLLs: None
USING COLOURS
Colours are naturally appealing to the eye, especially when used correctly. In this nifty little passage of text I'll explain to you primary colours, secondary colours, the colour wheel, and how to use them to effectively draw gamer's attention to parts of the game, and make your game easy to look at and understand without intrusive things like dialogue boxes and text everywhere. I'm serious.
Part 1: Colours
Basically, you have 3 colours. Red, Yellow and Blue. These are the 3 Primary Colours - i.e. they're the first 3 colours you can mix to make any other colour you can think of, if you mix them properly. You can set them up as thirds of a circle, like so:
Then you have colours like green, purple and orange, which fit inbetween yellow, red and blue. These are called Secondary Colours, because they're the second colour you get after mixing two primary colours. Let's put them into the circle as well:
Then, by mixing primary and secondary colours, you can get any colour in the rainbow. The full circle is this:
The innermost colours are primary, next layer from the center are secondary, and finally tertiary colours, which you get by mixing the others.
Part 2: The Colour Wheel, Complementary Colours and Analogous Colours
Look at the colour wheel, as the circle above is called. I want you to take a look at the outer ring. First, look at blue, then straight away look at the opposite colour, which is orange. These two colours are called complentary colours, because they contrast so well when put together. Seriously - Open up Paint.exe and draw a blue square next to an orange square. They are completely different.
You can do this with any colour. Pick a colour, look across the wheel, and that's it's opposite. Green/Red, Yellow/Purple, Blue/Orange, the list goes on.
Now I want you to look around the colours of the wheel in a clockwise motion. The colours next to each other easily transition, as opposed to the harshness of the opposite colours. This is because they are next to each other, and are similar - for example, red and orange. They work together. Colours like these are called analogous colours, as they are very similar and easily comparable. They are found next to each other on the wheel. For example, take a look at different pictures of flowers, and notice the colours and how they work together, and their relationship to each other on the wheel. It's suprisingly accurate.
Definition of analogous
Part 3: RGB Colours & Hue, Saturation and Value
I'm going to take a quick detour and mention RGB colours, and HSV - Hue, Saturation and Value. Basically, where red, yellow and blue are what you can use to create any colour with paint, red, blue and green are what you can use to create any colour with light.
The main difference comes from the fact that as you mix paint it gets darker, where as you mix light it gets lighter (go figure). The RGB Colour wheel is a little bit different from the RBY colour wheel, but the same principles from the previous parts apply.
The reason that this is useful knowledge is that computer screens create light! The images seen on screen are created with RGB colours because the screens have to emit light, so RBY colour wheels don't make sense - you're mixing light, not paint.
Now, Hue, Saturation and Value are some interesting and different things altogether. The saturation of a given image can ususally be represented as a percentage (though in GM's sprite editor it's a value from 0 to 255) and represents the amount of colour (or lack thereof) in an image. The value of a given image is simply a representation of the lightness or darkness from that colour. For example, let's just say I have the RGB colour (0, 0, 1.0f) - 0% red, 0% green, 100% blue. If the value of that is reduced over time, the blue would get darker and darker until it is finally just black. Hue itself simply represents a colour in the rainbow - red, violet or anything inbetween.
Credit goes to icuurd12b42 for this part, it wasn't originally included.
Part 4: Using This Information
So now that you have an understanding of the way colours work with and against each other, you can use them in game design. Here's how I have set out my game, Phil, which you can find in the Works In Progress part of the PC section (as of 23/1/12):
Background things: Colour of choice, theme of level (e.g. ice = blue, fire = red)
Foreground things: Brighter colour of choice
Important parts (e.g. doors, interactive objects): Complementary colour, or a colour near it on the wheel
Very Important Parts: Exact Complementary Colour
Player, Enemies, etc.: Your choice, but they should look nice at least (no sloppy programmer graphics! I'm a programmer myself, you know)
Usually you should set the theme of the level, and how it looks. For example, a cold, icy place would be rather bright blues and whites, with things like orange doors so the player knows where they're going. Another example is a fire-y level. Fire is usually red, so that's the theme I'll pick for the level. Important things are green, enemies can't be red (otherwise they'd blend into the background), the player is their usual self.
Notice that the blue, magenta and purple parts of the level stand out easily from the yellow background. This is because they are close to the opposite side of the colour wheel, across from yellow - which is purple.
Part 5: Conclusion
If you set up levels to exploit the characteristics of colours and their workings, your levels will not only look nicer, but have a professional look and polish to them that is very, very appealing. Take a look at Phil, my game. Nothing special, 4 days of work, and it looks almost indie material.
Have fun while making games, and remember, graphics aren't nearly as important as gameplay, but nobody will play a game that looks like rubbish.
EDIT: Fixed up wrong definitions
Edited by Adequate, 25 January 2012 - 03:20 AM.
