Successfully reported this slideshow.



Published on

  • Be the first to comment

  • Be the first to like this


  1. 1. Graphics for Games Fundamentals of Game Development
  2. 2. Sights <ul><li>SIGHTS – what you see on the screen during gameplay </li></ul><ul><ul><li>ASSETS </li></ul></ul><ul><ul><li>Created initially through a mock up or sketch </li></ul></ul><ul><ul><li>Later moved to 2D or 3D computer programs </li></ul></ul><ul><ul><ul><li>Menu Screens </li></ul></ul></ul><ul><ul><ul><li>Credit Screens </li></ul></ul></ul><ul><ul><ul><li>Logos </li></ul></ul></ul><ul><ul><ul><li>User Interfaces </li></ul></ul></ul><ul><ul><ul><li>In game assets </li></ul></ul></ul>
  3. 3. 2D and 3D <ul><li>Two dimensional graphics are flat, no depth </li></ul><ul><ul><li>Cartesian coordinates X and Y </li></ul></ul><ul><ul><li>Measures height and width </li></ul></ul><ul><li>Three dimensional graphics show depth </li></ul><ul><ul><li>Cartesian coordinates X, Y, and Z </li></ul></ul><ul><ul><li>Adds depth </li></ul></ul>
  4. 4. Basic Elements of an Image <ul><li>Pixel – Picture Element, Colored dot on the screen </li></ul><ul><ul><li>Detail cannot be changed once the Number of dots is set </li></ul></ul><ul><ul><li>Interpolation adds pixels to the image </li></ul></ul><ul><li>Resolution </li></ul><ul><ul><li>Number of pixels displayed </li></ul></ul><ul><ul><ul><li>Typical computer monitor displays 75 to 90 dots per inch (dpi) </li></ul></ul></ul><ul><li>Aspect Ratio </li></ul><ul><ul><li>Ratio of the pixel width to pixel height </li></ul></ul><ul><ul><li>1:1 results in pixels that are a perfect square </li></ul></ul>
  5. 5. Colors <ul><li>RGB – red, green, and blue </li></ul><ul><ul><li>Values range from 0 – 255 </li></ul></ul><ul><ul><li>0,0,0 is no colors at all (black) </li></ul></ul><ul><ul><li>255, 255, 255 is the most color (white) </li></ul></ul><ul><li>Color Depth - Number of Colors </li></ul><ul><ul><li>16 colors at the lowest end </li></ul></ul><ul><ul><li>Millions at the high end </li></ul></ul><ul><ul><li>Measured in Bits, the more bits, the wider the range of colors that can be displayed </li></ul></ul><ul><ul><li>True color (24 bit) can display about 16.8 million colors </li></ul></ul>
  6. 6. Manipulating Images <ul><li>Cut </li></ul><ul><li>Copy </li></ul><ul><li>Paste </li></ul><ul><li>Skew </li></ul><ul><li>Rotate </li></ul><ul><li>Resize </li></ul><ul><li>Crop </li></ul><ul><li>Flip </li></ul><ul><li>Refer to examples, text pgs 23 – 27 </li></ul>
  7. 7. Advanced Image Manipulation <ul><li>Sprites </li></ul><ul><ul><li>Graphic image that can move within a larger image </li></ul></ul><ul><li>Masking </li></ul><ul><ul><li>Special image that is used to “mask” off portions of another image, like a stencil </li></ul></ul><ul><ul><li>Color Masking – specifies color to be transparent </li></ul></ul><ul><ul><li>Palette or Positional masking specifies # or position on palette </li></ul></ul><ul><li>Opacity – between solid and clear </li></ul><ul><li>Anti-Aliasing – blending edges so that they don’t appear jagged </li></ul>
  8. 8. Beyond the Basics <ul><li>We can use color to </li></ul><ul><ul><li>Attract the users attention </li></ul></ul><ul><ul><ul><li>Make objects “pop” </li></ul></ul></ul><ul><ul><li>Alter the users mood or feeling </li></ul></ul><ul><ul><ul><li>Bright colors induce happiness, dark colors induce fear </li></ul></ul></ul><ul><ul><li>Alter the users perception of space </li></ul></ul><ul><ul><li>Create aesthetic appeal </li></ul></ul><ul><ul><li>Show and accentuate similarities and differences </li></ul></ul>Courtesy of
  9. 9. Basic Color Theory <ul><li>Color exists as wavelengths of light </li></ul><ul><ul><li>All objects absorb light and reflect others </li></ul></ul><ul><ul><li>Visible spectrum </li></ul></ul><ul><li>Tone – lightness or darkness of an object </li></ul><ul><li>Hue – local color </li></ul><ul><li>Saturation – intensity or brightness </li></ul><ul><li>Value – tonal range of a particular hue </li></ul>
  10. 10. Color Wheel <ul><li>Primary colors – red, yellow, blue </li></ul><ul><li>Secondary Colors – orange, green, purple </li></ul><ul><li>Primary and secondary colors combine to produce intermediate colors (red-orange, yellow-orange, etc.) </li></ul><ul><li>Complimentary colors lie in direct opposites along the color wheel </li></ul><ul><li>Combining complimentary colors produces neutral colors </li></ul>
  11. 11. Color Temperature <ul><li>Warm colors – red, orange, yellow </li></ul><ul><ul><li>Tend to be stimulating </li></ul></ul><ul><ul><li>Produce feelings of closeness </li></ul></ul><ul><li>Cool colors – blue, green, violets </li></ul><ul><ul><li>Tend to be soothing </li></ul></ul><ul><ul><li>Produce feelings of distance </li></ul></ul>
  12. 12. Meanings of common colors
  13. 13. Cross Cultural
  14. 14. Games and Mood
  15. 15. Age and Color Perception <ul><li>Young children prefer warm and intense colors </li></ul><ul><li>Older children and young adults respond better to bright , warm colors than to dull cool colors </li></ul><ul><li>Adults prefer cooler more subdued colors </li></ul><ul><li>Older adults respond better to brighter colors </li></ul>
  16. 16. Gender and Color Perception <ul><li>Studies show that women prefer cooler colors then men do </li></ul><ul><li>Women are able to distinguish and perceive color better then men do </li></ul><ul><li>What does that mean for graphics design in gaming? </li></ul>
  17. 17. Basic Rules of Light and Shadow <ul><li>All shadows an object casts will appear darker than the object itself </li></ul><ul><li>Always use colors that meet the users expections (don’t use a dark color to highlight) </li></ul><ul><li>Properly orient the location of shadows and highlights (away from each other) </li></ul><ul><li>The closer the light source, the brighter the light source </li></ul><ul><li>Don’t use unrelated shades to render shadows </li></ul><ul><li>Rounded objects cast smoother shadows </li></ul><ul><li>Shadows and highlights are used together </li></ul>
  18. 18. Tips for Color Visibility and Usability in Games <ul><li>Always choose colors that have enough contrast between them </li></ul><ul><li>Always remember that objects will appear brighter on darker backgrounds and darker on lighter backgrounds </li></ul><ul><li>As objects get smaller, their colors become less visible and distinct </li></ul><ul><li>Warmer colors will always appear larger </li></ul>
  19. 19. More Tips for Color visibility and usability in games <ul><li>Avoid using very intense colors over large areas </li></ul><ul><li>Don’t use sharply contrasting colors over large ares </li></ul><ul><li>Design with a particular color scheme in mind </li></ul><ul><li>Use black or dark blue as your main background – objects displayed against these colors tend to stand out more </li></ul>