Jump to content


Photo
- - - - -

Using Colours in Game Design


  • Please log in to reply
9 replies to this topic

#1 Adequate

Adequate

    GMC Member

  • GMC Member
  • 479 posts

Posted 23 January 2012 - 12:49 PM

  • Title: Using Colours in Game Design
  • Description: A short description of how colour usage can direct the player's attention.
  • GM Version: N/A
  • 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 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.

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:
 

primary_colours.jpg


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:
 

fig2.jpg


Then, by mixing primary and secondary colours, you can get any colour in the rainbow. The full circle is this:
 

colorwheel.jpeg

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.



color_wheel_4.jpg


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 - 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.



philscreen2.png

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, 11 August 2013 - 11:24 AM.

  • 0

#2 Nocturne

Nocturne

    Nocturne Games

  • Administrators
  • 19883 posts
  • Version:GM:Studio

Posted 25 January 2012 - 12:46 AM

Std Msg: Please use the tutorial template header.


I'm permitting this as I think that it is pretty well written and something that a lot of people don't take into consideration... If you could please (at least) fix the header so that it follows the spirit of the rules then I'd be grateful. I'd also like to add this to the staff pick, but it's not quite up to scratch... How about adding a graphic or two at the end that SHOW how different pallettes affect the scene/mood/depth of the game? And maybe create a gmk/gm81 file that has an interactive colour wheel or something so that people have a more "hands on" learning experience?
  • 0

#3 icuurd12b42

icuurd12b42

    Self Formed Sentient

  • Retired Staff
  • 15412 posts
  • Version:GM:Studio

Posted 25 January 2012 - 12:59 AM

RYB and CMY are more about pigment mixing, for painting and printing...

Here are the HSV and RGB wheels which are more about light mixing, computer/tv screens...

http://www.xaraxone....ok02/page_3.htm

http://www.mathworks...s/f8-20792.html
  • 0

#4 Adequate

Adequate

    GMC Member

  • GMC Member
  • 479 posts

Posted 25 January 2012 - 01:48 AM

@Nocturne I'll get to it ASAP
  • 0

#5 Nocturne

Nocturne

    Nocturne Games

  • Administrators
  • 19883 posts
  • Version:GM:Studio

Posted 25 January 2012 - 02:29 AM

RYB and CMY are more about pigment mixing, for painting and printing...

Here are the HSV and RGB wheels which are more about light mixing, computer/tv screens...

http://www.xaraxone....ok02/page_3.htm

http://www.mathworks...s/f8-20792.html


Oh, yes! Those would make an excellent addition too...
  • 0

#6 Adequate

Adequate

    GMC Member

  • GMC Member
  • 479 posts

Posted 25 January 2012 - 03:21 AM

Edited.
  • 0

#7 Nocturne

Nocturne

    Nocturne Games

  • Administrators
  • 19883 posts
  • Version:GM:Studio

Posted 25 January 2012 - 07:09 AM

Great tutorial, Adequate, and defenitely something everyone should know at least a little about... Staff Pick!
  • 0

#8 paul23

paul23

    GMC Member

  • Global Moderators
  • 3680 posts
  • Version:GM:Studio

Posted 25 January 2012 - 05:48 PM

Uhm what you explained are how colours work in a reflection "screen". A colour is (on a reflection screen) that colour because it subtracts all light except for that colour. When you combine 2 colours, you substract "both" the values from the light: If you combine yellow & cyan, the resulting colour is green).

However computer displays are light emmitting screens. When light emits, combining colours "adds" the colours together. IE using 2 primary colours "green" & "red" one forms "yellow". - Combining all 3 primary colours together you emit white light (as expected). - The primary colours for light emitting are "red" "green" & "blue".


This also is the indication for the primary colours on reflective screens: they are the colour you get when you subtract 1 of the primary colours from a "white" light:
-Subtracting "blue" yields a yellow light
-Subtracting "red" yields a cyan (not blue) light
-Subtracting "green" yields a magenta (instead of red) light.




Going back to the example above, if you combine a yellow & cyan, you will get a pure "green" ray, the yellow part will take away the blue rays, and the red part the green rays. Also notice that the calculation of reflective colours is also dependent of the light source. Typically they are normalized against a 65K black body (sun).


Also the choice for the 3 primary colours stems from a standardizing of what an eye can see:
Posted Image
The curve "shows" all colours an average human can see - the numbers along the edge of the curve show the wavelength (in nanometers) of that point on the edge. (everything within the curve is a combination of waves). The corners of the triangle mark the point where you're purely showing 1 colour with sRGB - Each colour you can display using the sRGB system is within that triangle.
  • 0

#9 Adequate

Adequate

    GMC Member

  • GMC Member
  • 479 posts

Posted 26 January 2012 - 01:25 PM

Mind you, this tutorial was aimed at teaching you the uses of colours in game design, not the science behind it.
  • 0

#10 icuurd12b42

icuurd12b42

    Self Formed Sentient

  • Retired Staff
  • 15412 posts
  • Version:GM:Studio

Posted 26 January 2012 - 07:13 PM

Mind you, this tutorial was aimed at teaching you the uses of colours in game design, not the science behind it.


That's why it's here. The complementary color for example is interesting and valid in any form
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users