Getting Started with iPhone Game Development

5,050 views

Published on

Learn the basic concepts and code architecture behind casual mobile games. We'll walk you through a demo game that uses OpenGL ES and you can keep the source! Amanda and David work for the two top iPhone game studios (Zynga and ngmoco:) - learn from the best!

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,050
On SlideShare
0
From Embeds
0
Number of Embeds
136
Actions
Shares
0
Downloads
222
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Getting Started with iPhone Game Development

  1. 1. Getting Started with iPhone Game Development with Amanda Wixted and David Cairns
  2. 2. Outline • Game demo • General Architecture of games • Input Modes • Code tour • Networking • Sound • Tips & Tricks
  3. 3. TwitterGame demo at http://amandawixted.com/TwitterGameDemo.mov
  4. 4. Outline • Game demo • General Architecture of games • Input Modes • Code tour • Networking • Sound • Tips & Tricks
  5. 5. General Structure of Games
  6. 6. General Structure of Games main paint update
  7. 7. General Structure of Games main paint update
  8. 8. General Structure of Games main paint update
  9. 9. General Structure of Games main paint update
  10. 10. General Structure of Games main paint update
  11. 11. General Structure of Games main paint update background objects in view heads up display
  12. 12. General Structure of Games main paint update background objects in view heads up display
  13. 13. General Structure of Games main paint update background objects in view heads up display
  14. 14. General Structure of Games main paint update background game state particle changes objects effects avatar’s in view position bad camera heads guys’ position up display positions
  15. 15. General Structure of Games main paint update background game state particle changes objects effects avatar’s in view position bad camera heads guys’ position up display positions
  16. 16. General Structure of Games main paint update background game state particle changes objects effects avatar’s in view position bad camera heads guys’ position up display positions
  17. 17. General Structure of Games main paint update background game state particle changes objects effects avatar’s in view position set flags bad camera heads in the data guys’ position up display models positions I/O
  18. 18. Outline • Game demo • General Architecture of games • Input Modes • Code tour • Networking • Sound • Tips & Tricks
  19. 19. Input Modes how and when to use touch and tilt as game controls
  20. 20. Input Modes PAC-MAN: choice of 3 control modes: Swipe (best) Accelerometer (okay) D-Pad (sucks)
  21. 21. Touch Input • whenever the user needs to touch the screen, they’re blocking what they can see • fine in puzzle games • less fine in platformers/fps/non-puzzle • keep the users’ fingers off to the sides or only on the screen for a short time (swipe)
  22. 22. Good Examples • iMech - steering/aiming wheels out of the way • Dropship - wheels anywhere user touches down, so motion is relative
  23. 23. Accelerometer Input Take out your iPhone
  24. 24. Chart of Bubble Level’s low-pass filter Accelerometer output 1.00 0.75 output 0.50 0.25 0 time t
  25. 25. Accelerometer input • use a filter function that works for your game • maximize controllability and sensitivity • play around with it until you (and your friends) feel it’s right
  26. 26. Accelerometer input position.x += 8.0 * acceleration.x; • TwitterGame: we used tilt to move left/ right • simple: adjust the avatar’s position by a (constant factor * raw data) • at 60hz sample rate, avatar moves 480px/s at a force of acceleration.x =1.0
  27. 27. Common mistakes • don’t require the user to tilt the device to an angle where they can no longer see the screen • iterate until your controls feel right • don’t use the accelerometer for menu navigation
  28. 28. Outline • Game demo • General Architecture of games • Input Modes • Code tour • Networking • Sound • Tips & Tricks
  29. 29. From Swipe to Jump an illustrated tour of TwitterGame’s code
  30. 30. From Swipe to Jump touchesEnded Game EAGLView Controller touchesBegan
  31. 31. From Swipe to Jump touchesEnded Game EAGLView Controller touchesBegan
  32. 32. From Swipe to Jump touchesEnded Game EAGLView Controller touchesBegan
  33. 33. From Swipe to Jump touchesEnded Game EAGLView Controller touchesBegan
  34. 34. From Swipe to Jump touchesEnded Game EAGLView Controller touchesBegan
  35. 35. From Swipe to Jump touchesEnded Game EAGLView Controller touchesBegan
  36. 36. From Swipe to Jump touchesEnded Game EAGLView Controller touchesBegan
  37. 37. From Swipe to Jump paint update
  38. 38. From Swipe to Jump in the Avatar class:
  39. 39. From Swipe to Jump the Avatar’s update method, called from the game loop:
  40. 40. From Swipe to Jump
  41. 41. From Swipe to Jump
  42. 42. From Swipe to Jump
  43. 43. From Swipe to Jump
  44. 44. From Swipe to Jump
  45. 45. From Swipe to Jump Can you see what would happen if we instead checked whether the avatar’s frame was intersecting with a platform? What if we used current position and previous position instead?
  46. 46. Outline • Game demo • General Architecture of games • Input Modes • Code tour • Networking • Sound • Tips & Tricks
  47. 47. Networking • You have the usual options available: • sockets, URL requests • GameKit - a (disappointingly-named) networking framework • local bluetooth connections • voice chat over the internet • GK doesn’t do anything but networking
  48. 48. Networking Task Tool Read getting/posting to a NSURLConnection URL Loading System webserver interacting with a CFNetwork Programming gameserver using a constant CFSocket Guide connection creating a local peer-to-peer GameKit Programming GameKit game connection Guide
  49. 49. Outline • Game demo • General Architecture of games • Input Modes • Code tour • Networking • Sound • Tips & Tricks
  50. 50. Sound Task Tool Read Games where sound timing AV Foundation Framework is not essential AVAudioPlayer Reference 3D Games OpenAL OpenAL.org Games where sound timing Audio Queue Services is essential AudioQueue Reference AudioToolbox/ System Sound Services UI/Menu Sounds AudioToolbox.h Reference
  51. 51. Sound • Use AVAudioSession to tell the device how to handle your app’s audio • Set your category to AVAudioSessionCategoryAmbient so that users can listen to their iPod while they play your game
  52. 52. Outline • Game demo • General Architecture of games • Input Modes • Code tour • Networking • Sound • Tips & Tricks
  53. 53. General Tips & Tricks Miscellany from experience
  54. 54. Do Quick Prototyping • We wrote a simple UIView animation-based implementation just as a proof-of-concept in about 2 hours • Doesn’t need to be nice, only needs to approximate what you want • Helps you work out issues you hadn’t thought about with your basic gameplay before you get caught up in your real implementation
  55. 55. Have Randomness • Randomly generated scenery • User input * random number = just enough frustration to keep the user interested
  56. 56. Adjust values until they feel right • Have lots of tweakable constants • Don’t spend too much time being true to theoretical physics • Iterate on your input handling sections
  57. 57. OpenGL
  58. 58. OpenGL ES 1.1
  59. 59. Immediate Mode position color tex coord position color tex coord OpenGL position color tex coord
  60. 60. Immediate Mode glBegin(GL_TRIANGLES); glColor4f(1.0, 0.0, 0.0, 1.0); glTexCoord2f(0.0, 0.0); glVertex3f(-1.0, -1.0, 0.0); glColor4f(1.0, 1.0, 0.0, 1.0); glTexCoord2f(1.0, 0.0); glVertex3f(1.0, -1.0, 0.0); /* additional vertices... */ glEnd();
  61. 61. Vertex Arrays Main Memory position OpenGL color tex coord position color tex coord position color tex coord position color tex coord
  62. 62. Vertex Arrays glVertexPointer(3, // 3 components / vertex GL_FLOAT, // type of data 0, // stride (tightly-packed) positions); // pointer to data glEnableClientState(GL_VERTEX_ARRAY); /* Set up color, normal, tex coord arrays... */ glDrawArrays(GL_TRIANGLES, 0, // Starting at vertex zero... 6); // ... Render 6 vertices
  63. 63. OpenGL ES 1.1 • Fewer geometry types • No display lists • No direct-to-framebuffer blitting • No automatic format conversions • Fixed function pipeline only
  64. 64. OpenGL ES 2.0
  65. 65. OpenGL ES 2.0 • No fixed-function pipeline • Programmable pipeline ONLY • No implicit vertex attributes
  66. 66. Vertex Specification attribute vec4 position; attribute vec4 color; attribute vec2 texCoord; ...
  67. 67. Fragment Shader precision mediump float; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }
  68. 68. Fragment Shader precision mediump float; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }
  69. 69. GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER); glShaderSource(vertexShader, // shader object’s name 1, // number of strings &vertexSource, // array of strings NULL); // array of lengths glCompileShader(vertexShader); GLuint fragmentShader = glCreateShader(GL_FRAGMENT_SHADER); glShaderSource(fragmentShader, 1, &fragmentSource, NULL); glCompileShader(fragmentShader);
  70. 70. GLuint program = glCreateProgram(); glAttachShader(program, vertexShader); glAttachShader(program, fragmentShader); glLinkProgram(program); glUseProgram(program);
  71. 71. Vertex Attribute Arrays Main Memory Attrib 0 Attrib 1 OpenGL value 0 Attrib 2 value 0 value 0 value 1 value 1 value 1 value 2 value 2 value 2 … … …
  72. 72. glVertexAttribPointer(positionIndex, // attrib index for position 3, // 3 components / vertex GL_FLOAT, // type of data GL_FALSE, // don’t normalize 0, // stride (tightly-packed) vertices); // pointer to data glEnableVertexAttribArray(positionIndex); /* Set up color, normal, tex coord arrays... */ glDrawArrays(GL_TRIANGLES, 0, 6);
  73. 73. • GL 101 • Texture Atlases • Vertex Buffer Objects • Interleaved Arrays • Texture Compression
  74. 74. GL 101 • As few draw calls as possible • Minimize changes in GL state
  75. 75. Background
  76. 76. Characters
  77. 77. Power-ups and objects
  78. 78. position 3 position 2 tex coord (0, 1) tex coord (1, 1) position 0 position 1 tex coord (0, 0) tex coord (1, 0)
  79. 79. position 3 position 2 tex coord (0, 1) tex coord (1, 1) position 0 position 1 tex coord (0, 0) tex coord (1, 0)
  80. 80. position 2 position 3 tex coord (0, 1) tex coord (1, 1) position 0 position 1 tex coord (0, 0) tex coord (1, 0) Position Array Tex Coord Array
  81. 81. position 2 position 3 tex coord (0, 1) tex coord (1, 1) position 0 position 1 tex coord (0, 0) tex coord (1, 0) Position Array p0 p1 p2 p2 p1 p3 … Tex Coord Array (0, 0) (1, 0) (0, 1) (0, 1) (1, 0) (1, 1) …
  82. 82. Material • Blending Mode • Lighting parameters • Texture binding
  83. 83. Material Material Material Create a material from each of the unique objects we want to draw, that encapsulates all of the object’s rendering state.
  84. 84. Sort each of the objects into buckets keyed by material. Now you don’t have to change any state bet ween drawing like objects! How can we reduce state changes / draw calls even Also, because we don’t have to change any state bet ween draws, we more? Texture atlases! can aggregate all the geometry into a single buffer / single draw call. Material Material Material Geometry Buffer Geometry Buffer Geometry Buffer
  85. 85. • GL 101 • Texture Atlases • Vertex Buffer Objects • Interleaved Arrays • Texture Compression
  86. 86. Texture Atlases
  87. 87. • GL 101 • Texture Atlases • Vertex Buffer Objects • Interleaved Arrays • Texture Compression
  88. 88. Vertex Buffer Objects Hinted better-vertex-storage™
  89. 89. Vertex Arrays RAM GPU position 0 position 1 Bus position 2
  90. 90. Vertex Buffer Objects GPU RAM Video Memory Bus position 0 position 0 position 1 position 1 position 2 position 2
  91. 91. Vertex Buffer Objects GPU RAM Video Memory Bus position 0 position 0 position 1 position 1 position 2 position 2
  92. 92. Vertex Buffer Objects GLuint vboName; glGenBuffers(1, &vboName); glBindBuffer(GL_ARRAY_BUFFER, vboName); glBufferData(GL_ARRAY_BUFFER, // binding point bufferSize, // size of buffer bufferPointer, // pointer to buffer in RAM GL_STATIC_DRAW); // usage hint
  93. 93. STATIC: Written once, used many times DYNAMIC: Modified a lot, used often STREAM: Modified once, used only a few times ES 1.1 ES 2.0 • GL_STATIC_DRAW • GL_STATIC_DRAW • GL_DYNAMIC_DRAW • GL_DYNAMIC_DRAW • GL_STREAM_DRAW
  94. 94. Using VBOs… ES 1.1 // Bind our buffer. glBindBuffer(GL_ARRAY_BUFFER, vboName); // Tell GL where the geometry is. glVertexPointer(3, GL_FLOAT, 0, // same as before 0x0); // offset into the buffer glEnableClientState(GL_VERTEX_ARRAY); glDrawArrays( ... );
  95. 95. Using VBOs… ES 2.0 // Bind our buffer. glBindBuffer(GL_ARRAY_BUFFER, vboName); // Tell GL where the geometry is. glVertexAttribPointer(positionIndex, 3, GL_FLOAT, GL_FALSE 0, 0x0); // offset into the buffer glEnableVertexAttribArray(positionIndex); glDrawArrays( ... );
  96. 96. Changing VBO Data glBindBuffer(GL_ARRAY_BUFFER, vboName); glBufferSubData(GL_ARRAY_BUFFER, offset, // offset into VBO size, // size of dataPointer dataPointer); // pointer to new data
  97. 97. Changing VBO Data glBindBuffer(GL_ARRAY_BUFFER, vboName); char *buffer = glMapBuffer(GL_ARRAY_BUFFER, access); // read and/or write /* Manipulate the contents of the buffer... */ // Tell GL we’re done. glUnmapBuffer(GL_ARRAY_BUFFER);
  98. 98. • GL 101 • Texture Atlases • Vertex Buffer Objects • Interleaved Arrays • Texture Compression
  99. 99. Interleaved Arrays
  100. 100. Non-Interleaved Arrays Memory position OpenGL color tex coord position color tex coord position color tex coord position color tex coord
  101. 101. Interleaved Arrays Memory OpenGL position color tex coord position color tex coord position color tex coord position color tex coord
  102. 102. Interleaved Arrays typedef struct { float position[3]; float color[3]; float texCoord[2]; } VertexData; VertexData *interleavedData;
  103. 103. … in ES 1.1 glVertexPointer(3, GL_FLOAT, sizeof(VertexData), // stride &interleavedData[0].position[0]); // first position glColorPointer(3, GL_FLOAT, sizeof(VertexData), &interleavedData[0].color[0]); glTexCoordPointer(2, GL_FLOAT, sizeof(VertexData), &interleavedData[0].texCoord[0]);
  104. 104. … in ES 2.0 glVertexAttribPointer(positionIndex, 3, GL_FLOAT, GL_FALSE, sizeof(VertexData), &interleavedData[0].position[0]); ...
  105. 105. • GL 101 • Texture Atlases • Vertex Buffer Objects • Interleaved Arrays • Texture Compression
  106. 106. PVR Texture Compression
  107. 107. Texture Compression /Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/texturetool texturetool [-m] # Generate mipmaps [-e encoding options] # PVRTC, bpp -o “out_file.pvrtc” [-f format] # PVR or Raw “in_file.png”
  108. 108. Input Requirements • Must be square • Dimensions must be a power-of-two • Must be at least 8 x 8
  109. 109. glCompressedTexImage2D(GL_TEXTURE_2D, level, # mipmap level format, width, height, 0, # border (must be zero!) size, # size of data dataPointer); # pointer to data
  110. 110. RGB RGBA 2 bits / pixel GL_COMPRESSED_RGB_PVRTC_2BPPV1_IMG GL_COMPRESSED_RGBA_PVRTC_2BPPV1_IMG 4 bits / pixel GL_COMPRESSED_RGB_PVRTC_4BPPV1_IMG GL_COMPRESSED_RGBA_PVRTC_4BPPV1_IMG
  111. 111. GL Reference developer.apple.com lighthouse3d.com opengl.org
  112. 112. Special Thanks Libraries used: Matt Gemmell - MGTwitterEngine Michael Daley and Ben Britten - Sound Engine core Tim Omernick - GLTexture class core Direct Contributors: Jeff Osborne - Game Sounds Duncan Stanley - Game Design help Wil Shipley - code pimping Twitter and our friends - tweets Timothy Fitz - debugging help
  113. 113. Contact Us Amanda Wixted amanda.wixted@gmail.com David Cairns drcairns@gmail.com

×