February 10, 2014

Flappy Block

Flappy Bird Clone using the iOS7 Physics Engine #

#FlappyBird — Need anything else be said? The game is so simple, yet it mixes the right amount of frustration and entertainment that was in the early 90’s nintendo games like Double Dragon 3, and Teenage Mutant Ninja Turtles. With Dong Nguyen announcing that he was taking the game down, I wanted to figure out how hard it would be to replicate the game’s physics and interactions with the new iOS7 physics engine. I’m writing this because it’s apparent that a lot of developers don’t even know that iOS 7 has a built in physics engine – UIKit Dynamics.

Physical Interaction 1: Flap #

Flapping requires three steps. The first step is to create a gesture which recognizes a tap.

UITapGestureRecognizer *singleTapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleSingleTapGesture:)];
[self.view addGestureRecognizer:singleTapGestureRecognizer];
[singleTapGestureRecognizer setNumberOfTapsRequired:1];

Next, we need to make the block flap. Flapping is implemented as an instantaneous push behavior with negative Y force vector(Upwards).

flapUp = [[UIPushBehavior alloc] initWithItems:@[self.block] mode:UIPushBehaviorModeInstantaneous];
flapUp.pushDirection = CGVectorMake(0, -1.1);
flapUp.active = NO;

Lastly we need to add gravity to continuously pull the block down.

gravity = [[UIGravityBehavior alloc] initWithItems:@[self.block]];
gravity.magnitude = 1.1;

Here is what the moving flapping block interaction looks like.

Physical Interaction 2: Move Pipes #

Pipes are also pretty simple. You need to create the pipes out of the view on the right side of the screen and then push them to the left with a negative X force vector(Left). First we create the pipes then we give them some density

pipesDynamicProperties= [[UIDynamicItemBehavior alloc] initWithItems:@[topPipe, bottomPipe]];
pipesDynamicProperties.allowsRotation = NO;
pipesDynamicProperties.density = 1000;

After the pipes are created, push them across the screen.

movePipes = [[UIPushBehavior alloc] initWithItems:@[topPipe, bottomPipe] mode:UIPushBehaviorModeInstantaneous];
movePipes.pushDirection = CGVectorMake(-2800, 0);
movePipes.active = YES;

Here is what the moving pipe interaction looks like.

Physical Interaction 3: Die on Any Collision #

The last step is to add the game end-state using collision behaviors. One thing to note is that there is a left boundary wall off of the screen. This wall is there to trigger a collision behavior to remove the pipes when they are out of view. This collision behavior will also call code to generate new pipes on the right side.

blockCollision = [[UICollisionBehavior alloc] initWithItems:@[self.block]];
[blockCollision addBoundaryWithIdentifier:@"LEFT_WALL" fromPoint:CGPointMake(-1*PIPE_WIDTH, 0) toPoint:CGPointMake(-1*PIPE_WIDTH, self.view.bounds.size.height)];
blockCollision.collisionDelegate = self;

We add the ground collision behavior between the block and the ground.

groundCollision = [[UICollisionBehavior alloc] initWithItems:@[self.block, self.ground]];
groundCollision.collisionDelegate = self;

And finally, after the pipes are created, we add the pipe collision behavior between the pipes and the block.

[blockCollision addItem:topPipe];
[blockCollision addItem:bottomPipe];

Since both the ground and pipes use the same self delegate class, when anything touches the block, the “Game Over” end state will be triggered. Now collisions are added between the block and the ground and between the block and the dynamically created pipes. Here is what the collision interactions looks like.

The code is on GitHub under the MIT License for people who want to learn about how to use the iOS7 physics engine. You can take a look at the source code here: https://github.com/joeblau/FlappyBlock

267

Kudos

267