• Like
Getting Started with iPhone Game Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Getting Started with iPhone Game Development

  • 4,536 views
Published

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 …

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!

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,536
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
217
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Getting Started with iPhone Game Development with Amanda Wixted and David Cairns
  • 2. Outline • Game demo • General Architecture of games • Input Modes • Code tour • Networking • Sound • Tips & Tricks
  • 3. TwitterGame demo at http://amandawixted.com/TwitterGameDemo.mov
  • 4. Outline • Game demo • General Architecture of games • Input Modes • Code tour • Networking • Sound • Tips & Tricks
  • 5. General Structure of Games
  • 6. General Structure of Games main paint update
  • 7. General Structure of Games main paint update
  • 8. General Structure of Games main paint update
  • 9. General Structure of Games main paint update
  • 10. General Structure of Games main paint update
  • 11. General Structure of Games main paint update background objects in view heads up display
  • 12. General Structure of Games main paint update background objects in view heads up display
  • 13. General Structure of Games main paint update background objects in view heads up display
  • 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. 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. 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. 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. Outline • Game demo • General Architecture of games • Input Modes • Code tour • Networking • Sound • Tips & Tricks
  • 19. Input Modes how and when to use touch and tilt as game controls
  • 20. Input Modes PAC-MAN: choice of 3 control modes: Swipe (best) Accelerometer (okay) D-Pad (sucks)
  • 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. Good Examples • iMech - steering/aiming wheels out of the way • Dropship - wheels anywhere user touches down, so motion is relative
  • 23. Accelerometer Input Take out your iPhone
  • 24. Chart of Bubble Level’s low-pass filter Accelerometer output 1.00 0.75 output 0.50 0.25 0 time t
  • 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. 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. 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. Outline • Game demo • General Architecture of games • Input Modes • Code tour • Networking • Sound • Tips & Tricks
  • 29. From Swipe to Jump an illustrated tour of TwitterGame’s code
  • 30. From Swipe to Jump touchesEnded Game EAGLView Controller touchesBegan
  • 31. From Swipe to Jump touchesEnded Game EAGLView Controller touchesBegan
  • 32. From Swipe to Jump touchesEnded Game EAGLView Controller touchesBegan
  • 33. From Swipe to Jump touchesEnded Game EAGLView Controller touchesBegan
  • 34. From Swipe to Jump touchesEnded Game EAGLView Controller touchesBegan
  • 35. From Swipe to Jump touchesEnded Game EAGLView Controller touchesBegan
  • 36. From Swipe to Jump touchesEnded Game EAGLView Controller touchesBegan
  • 37. From Swipe to Jump paint update
  • 38. From Swipe to Jump in the Avatar class:
  • 39. From Swipe to Jump the Avatar’s update method, called from the game loop:
  • 40. From Swipe to Jump
  • 41. From Swipe to Jump
  • 42. From Swipe to Jump
  • 43. From Swipe to Jump
  • 44. From Swipe to Jump
  • 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. Outline • Game demo • General Architecture of games • Input Modes • Code tour • Networking • Sound • Tips & Tricks
  • 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. 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. Outline • Game demo • General Architecture of games • Input Modes • Code tour • Networking • Sound • Tips & Tricks
  • 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. 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. Outline • Game demo • General Architecture of games • Input Modes • Code tour • Networking • Sound • Tips & Tricks
  • 53. General Tips & Tricks Miscellany from experience
  • 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. Have Randomness • Randomly generated scenery • User input * random number = just enough frustration to keep the user interested
  • 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. OpenGL
  • 58. OpenGL ES 1.1
  • 59. Immediate Mode position color tex coord position color tex coord OpenGL position color tex coord
  • 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. Vertex Arrays Main Memory position OpenGL color tex coord position color tex coord position color tex coord position color tex coord
  • 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. OpenGL ES 1.1 • Fewer geometry types • No display lists • No direct-to-framebuffer blitting • No automatic format conversions • Fixed function pipeline only
  • 64. OpenGL ES 2.0
  • 65. OpenGL ES 2.0 • No fixed-function pipeline • Programmable pipeline ONLY • No implicit vertex attributes
  • 66. Vertex Specification attribute vec4 position; attribute vec4 color; attribute vec2 texCoord; ...
  • 67. Fragment Shader precision mediump float; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }
  • 68. Fragment Shader precision mediump float; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }
  • 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. GLuint program = glCreateProgram(); glAttachShader(program, vertexShader); glAttachShader(program, fragmentShader); glLinkProgram(program); glUseProgram(program);
  • 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. 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. • GL 101 • Texture Atlases • Vertex Buffer Objects • Interleaved Arrays • Texture Compression
  • 74. GL 101 • As few draw calls as possible • Minimize changes in GL state
  • 75. Background
  • 76. Characters
  • 77. Power-ups and objects
  • 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. 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. 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. 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. Material • Blending Mode • Lighting parameters • Texture binding
  • 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. 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. • GL 101 • Texture Atlases • Vertex Buffer Objects • Interleaved Arrays • Texture Compression
  • 86. Texture Atlases
  • 87. • GL 101 • Texture Atlases • Vertex Buffer Objects • Interleaved Arrays • Texture Compression
  • 88. Vertex Buffer Objects Hinted better-vertex-storage™
  • 89. Vertex Arrays RAM GPU position 0 position 1 Bus position 2
  • 90. Vertex Buffer Objects GPU RAM Video Memory Bus position 0 position 0 position 1 position 1 position 2 position 2
  • 91. Vertex Buffer Objects GPU RAM Video Memory Bus position 0 position 0 position 1 position 1 position 2 position 2
  • 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. 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. 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. 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. 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. 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. • GL 101 • Texture Atlases • Vertex Buffer Objects • Interleaved Arrays • Texture Compression
  • 99. Interleaved Arrays
  • 100. Non-Interleaved Arrays Memory position OpenGL color tex coord position color tex coord position color tex coord position color tex coord
  • 101. Interleaved Arrays Memory OpenGL position color tex coord position color tex coord position color tex coord position color tex coord
  • 102. Interleaved Arrays typedef struct { float position[3]; float color[3]; float texCoord[2]; } VertexData; VertexData *interleavedData;
  • 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. … in ES 2.0 glVertexAttribPointer(positionIndex, 3, GL_FLOAT, GL_FALSE, sizeof(VertexData), &interleavedData[0].position[0]); ...
  • 105. • GL 101 • Texture Atlases • Vertex Buffer Objects • Interleaved Arrays • Texture Compression
  • 106. PVR Texture Compression
  • 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. Input Requirements • Must be square • Dimensions must be a power-of-two • Must be at least 8 x 8
  • 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. 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. GL Reference developer.apple.com lighthouse3d.com opengl.org
  • 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. Contact Us Amanda Wixted amanda.wixted@gmail.com David Cairns drcairns@gmail.com