How Can We Help?
< All Topics
Print

Unit 4 – Video Game Graphics Design


Items In This Unit

 

  • Introduction to graphics design
  • Understanding RGB
  • Popular graphical software
  • Free graphics software recommendations

Introduction to graphics design

  • Graphic design is a big topic and can take years you master
  • This is a 2D video game course with some elements of 3D graphic design
  • You don’t need to be a graphic artist to be able to create video games
  • Ultimately almost all of the 3D games are projected onto 2D surfaces so they are really not true 3D per se but
  • beautifully rendered 2D games
  • You can buy graphical game assets
  • You can use free graphical game assets

Understanding Red-Green-Blue (RGB)

  • A pixel, represented by a dot or square on a computer monitor, is the smallest digital display unit visible by the human eye
  • Each monitor pixel is composed of three tiny specks of phosphor, which emit red, green, or blue light when struck by an electron beam.
  • Mixing of these 3 light specs of red, green and blue light sources defines the resulting colour
  • This additive colour model is often referred to as the RGB colour model
  • To display a white pixel, the monitor will use the highest intensity for all 3 colours
  • To display a black pixel, the monitor will use the lowest intensity for all 3 colours
  • All other colours will be all the other variations of the 3 colours
  • In computer science, each colour can be represented by its RGB binary or HEX equivalent (preferred way) notation equivalent.

Color

Binary Notation
R,G,B

Decimal Notation
R,G,B

Hexadecimal (HEX) Notation
R,G,B

Black

(00000000,00000000,00000000)

(000,000,000)

(00,00,00)

White

(11111111,11111111,11111111)

(255,255,255)

(FF,FF,FF)

Red

(11111111,00000000,00000000)

(255,000,000)

(FF,00,00)

Green

(00000000,11111111,00000000)

(000,255,000)

(00,FF,00)

Blue

(00000000,00000000,11111111)

(000,000,255)

(00,00,FF)

Dark Gray

(‭10101001‬, ‭‭10101001‬, ‭10101001‬)

(169,169,169)

(A9,A9,A9)

Light Gray

(‭11110011‬, ‭11110011‬, ‭11110011‬)

(243,243,243)

(F3,F3,F3)

  • 24 bit RGB photo or graphics data is always 3 bytes per pixel
  • 8 bit RGB photo or graphics data is always 1 byte per pixel
  • 24 bit RGB images can use up to 16.7 million colors
  • 16 bit RGB images can use up to ‭65,535 colors‬
  • 8 bit RGB images can use up to 255 colors

Commercial Graphics Software

The most popular graphical software for creating video game graphics, as of this writing, is Adobe Photoshop. Some of the other offerings include:

  • CorelDraw Graphics Suite
  • Inkscape
  • Sketch

 

 


Free Graphics Software

Free graphical software has come a long way. The two of the most popular programs are listed below: 

Previous Unit 3 – Game Design Concepts
Next Unit 5 – Sound and Music Design
Table of Contents