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!
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
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
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
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
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
62. Vertex Arrays
Main Memory
position OpenGL
color
tex coord
position
color
tex coord
position
color
tex coord
position
color
tex coord
63. 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
64. OpenGL ES 1.1
• Fewer geometry types
• No display lists
• No direct-to-framebuffer blitting
• No automatic format conversions
• Fixed function pipeline only
72. 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
…
…
…
73. 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);
85. 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.
86. 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
94. Vertex Buffer Objects
GPU
RAM Video Memory
Bus
position 0 position 0
position 1 position 1
position 2 position 2
95. Vertex Buffer Objects
GPU
RAM Video Memory
Bus
position 0 position 0
position 1 position 1
position 2 position 2
96. 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
97. 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
98. 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( ... );
99. 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( ... );
114. glCompressedTexImage2D(GL_TEXTURE_2D,
level, # mipmap level
format,
width, height,
0, # border (must be zero!)
size, # size of data
dataPointer); # pointer to data
118. 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