Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games

770 views

Published on

Learn how game use a variety of monocular cues to create an illusion of depth in computer games. Learn what they are and how they are applied. Topics include foreground, background, user interface, overlap, baseheight, parallax, and more. An excerpt of the information available in the book: 2D Graphics Programming for Games.

  • Be the first to comment

John Pile Jr - Using Monocular Cues to Program an Illusion of Depth in 2D Games

  1. 1. Using Monocular Cues to Program an Illusion of Depth John Pile Jr 21 September 2013 Art by Geoff Gunning
  2. 2. John Pile Jr The Game Studio @ Champlain College Published Platforms: iOS, Android, Xbox360, PS3, PC Courses I teach: • Graphics Programming (2D & 3D) • Game Physics • Game Networking • Game Consoles Development pile@champlain.edu http://JohnPile.com @JohnPile Published by AK Peters | CRC Press: May 2013
  3. 3. The Game Studio: Degree School/Division Game Artists Game Designers Game Programmers Game Managers Art Creative Media Comp. Sci. & Soft. Eng. Business Champlain College: The Game Studio: Game Programming: 2000 450 115
  4. 4. Today: lots of concepts a little sample code short live demo
  5. 5. Role of Programmer in Art? “Programmer Art”
  6. 6. Role of Programmer in Art? http://sheilanash.com/
  7. 7. Role of Programmer in Art? • Solve Problems & Create Solutions
  8. 8. Role of Programmer in Art? • Solve Problems & Create Solutions • Programmers have created: – Painting Tools (Photoshop, GIMP, & MS Paint) – Image Converters & Texture Packers – 3D Editors (Autocad, Maya, & Z-Brush) – Engines (Game Maker, Unity, UDK, & Flash)
  9. 9. Role of Programmer in Art? In order to successfully create solutions we must understand the business (at some level)
  10. 10. Role of Programmer in Art? Using Monocular Cues to program an illusion of depth in 2D games
  11. 11. Concept: Sprites in 2D Games
  12. 12. Concept: Sprites in 2D Games Not Much “depth”
  13. 13. Depth in Games • Layering – Background
  14. 14. Depth • Layering – Background – Foreground
  15. 15. Depth • Layering – Background – Foreground • HUDs and GUIs
  16. 16. Traditional Role Playing Game (RPG)
  17. 17. Modern RPG
  18. 18. Gameplay
  19. 19. Rendered Cockpit
  20. 20. Implied Cockpit
  21. 21. MiniMaps, Compass, & Directional
  22. 22. Minimalist
  23. 23. Safe Frame / Safe Area = 90% of Screen Size Safe Area / Frames
  24. 24. Depth Perception Binocular Cues & Monocular Cues
  25. 25. Binocular Cues Stereopsis: View the same image from different angles.
  26. 26. Monocular Cues Provide information on depth when viewing a scene with one eye.
  27. 27. Depth through Monocular Cues • Overlap (Layering) – Background, Foreground, HUD, GUI – In-game Objects
  28. 28. Overlapping
  29. 29. Depth through Monocular Cues • Overlap • Base Height
  30. 30. Base Height in Egyptian artwork
  31. 31. Base Height In traditional perspective artwork.
  32. 32. Base Height In Games
  33. 33. Base Height In Games
  34. 34. Base Height Indicated by Shadows
  35. 35. Depth through Monocular Cues • Overlap • Base Height • Scale
  36. 36. Scale
  37. 37. Scale (without Base Height)
  38. 38. Scale and Base Height
  39. 39. Scale and Overlap Problem?
  40. 40. Base Height + Overlap
  41. 41. Base Height + Overlap + Scale
  42. 42. Depth through Monocular Cues • • • • Overlap Base Height Scale Atmospheric Effects
  43. 43. Atmospheric Effects
  44. 44. Depth through Monocular Cues • • • • • • Overlap Base Height Scale Atmospheric Effects Focus or “out-of-focus blur” Parallax
  45. 45. Out-of-focus Blur & Depth of Field
  46. 46. Out-of-focus Blur
  47. 47. Depth through Monocular Cues • • • • • • Overlap Base Height Scale Atmospheric Effects Focus or “out-of-focus blur” Parallax
  48. 48. Parallax
  49. 49. Without Parallax
  50. 50. With Parallax
  51. 51. Additional Monocular Cues Highlights
  52. 52. Additional Monocular Cues Highlights & Shadows
  53. 53. Additional Monocular Cues Highlights & Shadows
  54. 54. Additional Monocular Cues Highlights & Shadows
  55. 55. Additional Note on Perspective
  56. 56. Additional Note on Perspective
  57. 57. Additional Note on Perspective
  58. 58. Depth in Code Draw Order (or) Depth Value: 0.0f to 1.0f Most Distant = 0.0f Everything Else ~ Closest = 1.0f
  59. 59. Overlap in Code 0.0f 1.0f horizon = 200; screenHeight = 720; depth = ((position.Y - horizon) / (screenHeight - horizon));
  60. 60. Overlap in Code screenHeight = 720; horizon = 200; depth = ((position.Y - horizon) / (screenHeight - horizon)); NOTE: You’ll need to know the base position!
  61. 61. Calculate Scale from Depth Value • Perspective – Scale: 0.25f 1.0f scale = 0.25f + (depth * 0.75f);
  62. 62. Calculate Color from Depth Value • Perspective – Atmospheric Effects float tempColor = 0.75f + (depth * 0.25); tempColor = new Color(tempColorX, tempColorX, tempColorX);
  63. 63. Parallax from Depth • Perspective 0.5f – Parallax 1.0f ViewPosition.X = 0.5f + (depth * 0.5f * ActualPosition.X); ViewVelocity.X = 0.5f + (depth * 0.5f * ActualVelocity.X);
  64. 64. Depth Example Program
  65. 65. Questions? John Pile Jr pile@champlain.edu http://JohnPile.com @JohnPile Published by AK Peters | CRC Press: May 2013

×