1. Getting Started withiPhone GameDevelopmentwith Amanda Wixted and David Cairns

2. Outline Game demo General Architecture of games Input Modes Code tour Networking Sound Tips & Tricks 3. TwitterGame demo athttp://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 paintupdate 7. General Structure of Games main paintupdate 8. General Structure of Games main paintupdate 9. General Structure of Games main paintupdate 10. General Structure of Games main paintupdate 11. General Structure of Gamesmainpaintupdate backgroundobjects in view heads up display 12. General Structure of Gamesmainpaintupdate backgroundobjects in view heads up display 13. General Structure of Gamesmainpaintupdate backgroundobjects in view heads up display 14. General Structure of Gamesmainpaintupdate background game stateparticlechanges objectseffects avatars in view positionbadcamera headsguys position up display positions 15. General Structure of Gamesmainpaintupdate background game stateparticlechanges objectseffects avatars in view positionbadcamera headsguys position up display positions 16. General Structure of Gamesmainpaintupdate background game stateparticlechanges objectseffects avatars in view positionbadcamera headsguys position up display positions 17. General Structure of Gamesmain paint update background game stateparticlechanges objectseffects avatars in view position set agsbadcamera heads in the dataguys position up displaymodels 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 ModesPAC-MAN: choice of 3 control modes:Swipe (best) Accelerometer (okay)D-Pad (sucks) 21. Touch Input whenever the user needs to touch the screen, theyre blocking what they can see ne in puzzle games less ne in platformers/fps/non-puzzle keep the users ngers 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 InputTake out your iPhone 24. Chart of Bubble Levels low-pass lter Accelerometer output1.000.75 output 0.500.250 time t 25. Accelerometer input use a lter function that works for your game maximize controllability and sensitivity play around with it until you (and your friends) feel its right 26. Accelerometer input position.x += 8.0 * acceleration.x; TwitterGame: we used tilt to move left/ right simple: adjust the avatars 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 dont require the user to tilt the device to an angle where they can no longer see the screen iterate until your controls feel right dont 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 Jumpan illustrated tour of TwitterGames code 30. From Swipe to Jump touchesEndedGame EAGLViewController touchesBegan 31. From Swipe to Jump touchesEndedGame EAGLViewController touchesBegan 32. From Swipe to Jump touchesEndedGame EAGLViewController touchesBegan 33. From Swipe to Jump touchesEndedGame EAGLViewController touchesBegan 34. From Swipe to Jump touchesEndedGame EAGLViewController touchesBegan 35. From Swipe to Jump touchesEndedGame EAGLViewController touchesBegan 36. From Swipe to Jump touchesEndedGame EAGLViewController touchesBegan 37. From Swipe to Jumppaint update 38. From Swipe to Jumpin the Avatar class: 39. From Swipe to Jump the Avatars 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 JumpCan you see what would happen if we instead checked whether the avatars 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 doesnt do anything but networking 48. NetworkingTask ToolReadgetting/posting to a NSURLConnectionURL Loading System webserver interacting with aCFNetwork Programming gameserver using a constant CFSocketGuide connection creating a local peer-to-peerGameKit Programming GameKit game connectionGuide 49. Outline Game demo General Architecture of games Input Modes Code tour Networking Sound Tips & Tricks 50. Sound Task ToolRead Games where sound timing AV Foundation Framework is not essential AVAudioPlayerReference 3D Games OpenAL OpenAL.org Games where sound timingAudio Queue Services is essential AudioQueueReferenceAudioToolbox/ System Sound ServicesUI/Menu Sounds AudioToolbox.hReference 51. Sound Use AVAudioSession to tell the device how to handle your apps 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 Doesnt need to be nice, only needs to approximate what you want Helps you work out issues you hadnt 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 theyfeel right Have lots of tweakable constants Dont spend too much time being true to theoretical physics Iterate on your input handling sections 57. OpenGL 58. OpenGL ES 1.1 59. Immediate Modeposition 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 ArraysMain MemorypositionOpenGL colortex coord positioncolortex coord positioncolortex coord positioncolortex 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 xed-function pipeline Programmable pipeline ONLY No implicit vertex attributes 66. Vertex Specicationattribute vec4 position;attribute vec4 color;attribute vec2 texCoord;... 67. Fragment Shaderprecision mediump float;void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } 68. Fragment Shaderprecision 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 objects name1,// number of strings&vertexSource,// array of stringsNULL);// 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 ArraysMain Memory Attrib 0Attrib 1 OpenGL value 0Attrib 2 value 0 value 0 value 1value 1 value 1 value 2value 2 value 2 72. glVertexAttribPointer(positionIndex, // attrib index for position 3, // 3 components / vertex GL_FLOAT,// type of data GL_FALSE,// dont 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 andobjects 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 2position 3 tex coord (0, 1)tex coord (1, 1)position 0position 1 tex coord (0, 0)tex coord (1, 0)Position Array p0p1p2 p2 p1p3 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 objects rendering state. 84. Sort each of the objects into buckets keyed by material. Now you dont have to change any state bet ween drawing like objects! How can we reduce state changes / draw calls even Also, because we dont have to change any state bet ween draws, wemore? Texture atlases! can aggregate all the geometry into a single buffer / single draw call.MaterialMaterial MaterialGeometry Buffer Geometry BufferGeometry 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 ObjectsHinted better-vertex-storage 89. Vertex ArraysRAMGPU position 0position 1 Bus position 2 90. Vertex Buffer ObjectsGPU RAM Video MemoryBus position 0 position 0position 1 position 1position 2 position 2 91. Vertex Buffer ObjectsGPU RAM Video MemoryBus position 0 position 0position 1 position 1position 2 position 2 92. Vertex Buffer ObjectsGLuint vboName; glGenBuffers(1, &vboName); glBindBuffer(GL_ARRAY_BUFFER, vboName);glBufferData(GL_ARRAY_BUFFER, // binding pointbufferSize,// size of bufferbufferPointer, // pointer to buffer in RAMGL_STATIC_DRAW); // usage hint 93. STATIC: Written once, used many timesDYNAMIC: Modified a lot, used oftenSTREAM: 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 DataglBindBuffer(GL_ARRAY_BUFFER, vboName);glBufferSubData(GL_ARRAY_BUFFER, offset,// offset into VBO size,// size of dataPointer dataPointer);// pointer to new data 97. Changing VBO DataglBindBuffer(GL_ARRAY_BUFFER, vboName);char *buffer = glMapBuffer(GL_ARRAY_BUFFER,access); // read and/or write/* Manipulate the contents of the buffer... */// Tell GL were done. glUnmapBuffer(GL_ARRAY_BUFFER); 98. GL 101 Texture Atlases Vertex Buffer Objects Interleaved Arrays Texture Compression 99. Interleaved Arrays 100. Non-Interleaved ArraysMemorypositionOpenGL colortex coord positioncolortex coord positioncolortex coord positioncolortex coord 101. Interleaved Arrays Memory OpenGLposition 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 positionglColorPointer(3, GL_FLOAT,sizeof(VertexData),&interleavedData[0].color[0]);glTexCoordPointer(2, GL_FLOAT, sizeof(VertexData), &interleavedData[0].texCoord[0]); 104. in ES 2.0glVertexAttribPointer(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 Rawin_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 levelformat,width, height,0, # border (must be zero!)size,# size of datadataPointer);# 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.comopengl.org 112. Special ThanksLibraries used: Matt Gemmell - MGTwitterEngine Michael Daley and Ben Britten - Sound Engine core Tim Omernick - GLTexture class coreDirect Contributors:Jeff Osborne - Game SoundsDuncan Stanley - Game Design help Wil Shipley - code pimping Twitter and our friends - tweetsTimothy Fitz - debugging help 113. Contact UsAmanda Wixted amanda.wixted@gmail.comDavid Cairns drcairns@gmail.com