Getting Started with iPhone Game Development

Getting Started with
iPhone Game
Development
with Amanda Wixted and David Cairns

Outline
• Game demo
• General Architecture of games
• Input Modes
• Code tour
• Networking
• Sound
• Tips & Tricks

TwitterGame demo at

http://amandawixted.com/TwitterGameDemo.mov

General Structure of Games
main

paint update

main

paint update
background

objects
in view

heads
up display

main

paint update
background
game
state
particle changes
objects effects
avatar’s
in view
position

bad camera
heads guys’ position
up display positions

main

paint update
background
game
state
particle changes
objects effects
avatar’s
in view
position
set ﬂags bad camera
heads in the data guys’ position
up display models positions

I/O

Input Modes
how and when to use touch and tilt as game controls

Input Modes

PAC-MAN:
choice of 3 control modes:

Swipe (best)
Accelerometer (okay)
D-Pad (sucks)

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)

Good Examples

• iMech - steering/aiming
wheels out of the way

• Dropship - wheels
anywhere user touches
down, so motion is
relative

Accelerometer Input
Take out your iPhone

Chart of Bubble Level’s
low-pass ﬁlter
Accelerometer output
1.00

0.75

output 0.50

0.25

0

time t

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 it’s right

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

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

From Swipe to Jump
an illustrated tour of TwitterGame’s code

From Swipe to Jump

touchesEnded

Game
EAGLView
Controller

touchesBegan

From Swipe to Jump

paint update

From Swipe to Jump

in the Avatar class:

From Swipe to Jump
the Avatar’s update method, called from the game loop:

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?

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

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

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

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

General Tips & Tricks
Miscellany from experience

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

Have Randomness

• Randomly generated scenery
• User input * random number = just enough
frustration to keep the user interested

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

Immediate Mode
position
color
tex coord

position
color
tex coord OpenGL

position
color
tex coord

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();

Vertex Arrays
Main Memory

position OpenGL
color

tex coord
position

color

tex coord
position

color

tex coord
position

color

tex coord

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

OpenGL ES 1.1

• Fewer geometry types
• No display lists
• No direct-to-framebuffer blitting
• No automatic format conversions
• Fixed function pipeline only

OpenGL ES 2.0

• No ﬁxed-function pipeline
• Programmable pipeline ONLY
• No implicit vertex attributes

Vertex Speciﬁcation

attribute vec4 position;
attribute vec4 color;
attribute vec2 texCoord;
...

Fragment Shader

precision mediump float;

void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

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);

GLuint program = glCreateProgram();
glAttachShader(program, vertexShader);
glAttachShader(program, fragmentShader);

glLinkProgram(program);

glUseProgram(program);

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
…

…

…

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);

• GL 101
• Texture Atlases
• Vertex Buffer Objects
• Interleaved Arrays
• Texture Compression

GL 101

• As few draw calls as possible
• Minimize changes in GL state

position 3 position 2
tex coord (0, 1) tex coord (1, 1)




Position Array

Tex Coord Array



Position Array p0 p1 p2 p2 p1 p3 …

Tex Coord Array (0, 0) (1, 0) (0, 1) (0, 1) (1, 0) (1, 1) …

Material
• Blending Mode
• Lighting parameters
• Texture binding

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.

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

Vertex Buffer Objects
Hinted better-vertex-storage™

Vertex Arrays
RAM
GPU
position 0

position 1
Bus
position 2

GPU

RAM Video Memory
Bus




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

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

Using VBOs… ES 1.1

// Bind our buffer.

// Tell GL where the geometry is.
glVertexPointer(3, GL_FLOAT, 0, // same as before
0x0); // offset into the buffer
glEnableClientState(GL_VERTEX_ARRAY);

glDrawArrays( ... );

Using VBOs… ES 2.0

// Bind our buffer.

// Tell GL where the geometry is.
glVertexAttribPointer(positionIndex, 3, GL_FLOAT, GL_FALSE 0,
0x0); // offset into the buffer
glEnableVertexAttribArray(positionIndex);

glDrawArrays( ... );

Changing VBO Data


glBufferSubData(GL_ARRAY_BUFFER,
offset, // offset into VBO
size, // size of dataPointer
dataPointer); // pointer to new data

Changing VBO Data


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);

Non-Interleaved Arrays
Memory

position OpenGL
color

tex coord
position

color

tex coord
position

color

tex coord
position

color

tex coord

Interleaved Arrays
Memory
OpenGL
position
color
tex coord

position
color
tex coord

position
color
tex coord

position
color
tex coord

Interleaved Arrays
typedef struct {
float position[3];
float color[3];
float texCoord[2];
} VertexData;

VertexData *interleavedData;

… 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]);

… in ES 2.0

glVertexAttribPointer(positionIndex, 3, GL_FLOAT, GL_FALSE,
sizeof(VertexData),
&interleavedData[0].position[0]);

...

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”

Input Requirements

• Must be square
• Dimensions must be a power-of-two
• Must be at least 8 x 8

glCompressedTexImage2D(GL_TEXTURE_2D,
level, # mipmap level
format,
width, height,
0, # border (must be zero!)
size, # size of data
dataPointer); # pointer to data

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

GL Reference
developer.apple.com

lighthouse3d.com

opengl.org

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

Contact Us

Amanda Wixted amanda.wixted@gmail.com

David Cairns drcairns@gmail.com

Getting Started with iPhone Game Development

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (7)

Similar a Getting Started with iPhone Game Development

Similar a Getting Started with iPhone Game Development (20)

Más de John Wilker

Más de John Wilker (20)

Último

Último (20)

Getting Started with iPhone Game Development