Simple Game Animation – iPhone Programming Exercise 3

CSE 391 Fall 2012Tony Scarlatos

Putting the pieces together

• In the past few lectures we’ve covered a lot of ground. We learned how to create animation blocks, and move objects around in the view based on variable values generated by a random number generator. We learned how to load sounds. We learned how to populate an array of images using a for loop and to associate that array with an image object. We also learned how to move an object based on a touch event, and how to detect if the object’s bounding box intersected with another object.

• The purpose of this demo is to put some these skills together to make a simple animated game.

The Grave Game• In honor of Halloween I decided to make a demo that would involve a

character moving through a graveyard and jumping over tombstones, and maybe dodging flying bats. In other words, a simple “dodging” game.

• From this basic structure more complex games could be built, where, say, the character moves back and forth and collects tokens as well as avoids hazards.

• For my demo, I envisioned a character that would stay in place, while the background moved behind him, and the obstacles moved toward him. In the film industry, if the camera travels along with the actor, it is called a “trucking shot”. The character does not move in the frame, but the background appears to move. In the game industry this is common in traditional “side-scrolling” games.

Game design• I had to think of the elements I would need

– A spooky sky background picture– Background elements like a scary tree or a mound of tombstones– Obstacles and hazards to avoid, like a tombstone to jump over, or an animated bat

to duck• I needed a character who could

– Walk (the default behavior)– Jump (once, based on some event, then return to the default)– Duck (once, based on some event, then return to the default)– Maybe fall down (based on a collision with an obstacle)

• The game would have 2 views in landscape mode– The game view– The game over view

• Although the game would use 2D sprites, I wanted it to have a 3D look (sometimes called 2 ½ D).

Creating the game assets• The character’s different behaviors were animated using the Poser 3D animation

tool, and rendered as a sequence of .png images with transparent (alpha) backgrounds. They were rendered at much larger scale than needed for the game (about 200%). The image sequences were further cropped, edited, and scaled using the video layer tools in Photoshop.

• The other elements were also created in Photoshop, and I set up a mock view of the game to help me get the proper scale for the elements. The view was 460 X 320 (the aspect ratio of the iPhone screen in landscape mode.)

Frame from the jumping sequence Frame from the bat animationMock view of the game

Setting up the Xcode project

• I chose the Utility Application project template because it provides two views – the main view (for the game) and the flipside view (for the game over screen).

• I imported the folders of my graphics assets by dragging and dropping them on the Resources folder in the Xcode project window.

• I also imported a theme music file (.aif format) by dropping it on the project icon.

• I also had to import the AVFoundation framework by control-clicking on the frameworks folder, and by then choosing Add > Existing Frameworks… > AVFoundation.framework.

The header file

• The header file for the main view (MainViewController.h) is where the objects I needed were created, their properties declared, and custom methods were declared. This was a necessary first step so that I could make connections between objects and methods in Interface Builder.

• I also had to import the AVFoundation class, so that I could use its methods to play the theme music for the game.

• Although I have not implemented all the features of the game as of now, I included all the ones I could think of, but commented some of them out. The significant code is on the next couple of slides, the project itself is on the file server in the Xcode exercises folder of the Mobile Applications group folder.

Image views, image arrays, timers, and an audio player

@interface MainViewController : UIViewController <FlipsideViewControllerDelegate> {

IBOutlet UIImageView *bones;//the container for the skeleton animationsNSMutableArray *walkAnim;NSMutableArray *jumpAnim;//NSMutableArray *duckAnim;//NSMutableArray *dieAnim;//all the different things the character does//IBOutlet UIImageView *bat;//the window for the bat animation//NSMutableArray *batAnim;IBOutlet UIImageView *tombs;//will switch between a couple of imagesIBOutlet UIImageView *bkgd;//will switch between a couple of background elements

NSTimer *bkgdTimer;//moves the background image across the viewNSTimer *tombsTimer;//moves the tombstones across the view//NSTimer *batTimer;//moves the bat across the screenNSTimer *tombsCollisionTimer;//checks for collision with tombs//NSTimer *batCollisionTimer;//checks for collision with bat

AVAudioPlayer *themePlayer;//will play various theme songs//AVAudioPlayer *gameOverPlayer;//plays a sound when a collision is detected}

A button action andthe custom methods

// custom methods- (IBAction) jump;- (void) startSound;- (void) setupArrays;- (void) startTimers;- (void) moveBkgd;- (void) moveTombs;//- (void) moveBat;- (void) checkTombsCollision;//- (void) checkBatCollision;- (void) moveUp;- (void) moveDown;- (void) showWalk;

A couple of other items

• In the MainViewController.m file I had to find the code block beginning with:

(BOOL)shouldAutorotateToInterfaceOrientation:

• And then I added a few lines of code which we already discussed in the Sprite Animation lecture and demo.

• Then I launched Interface Builder by clicking on the MainView.xib file.

Building the interface• The View window was rotated to the landscape mode, and its Background color

was set to black in the Attributes tab of the Inspector window. The info button in the View (which is used to flip to the second the view) was deleted, because that action will be determined by detecting a collision between the obstacle and the character.

• Several Image Views were added – for the sky, for the background element (a tree), for the obstacle (a tombstone), and for the character. Those graphics were added using the dropdown list for the Image property.

• Because the frames of the character animations are not the same aspect ratio (e.g. the jump animation is taller) that image view’s Mode property was changed from the default Scale to Fill to Bottom Right in the Attributes tab of the Inspector window.

• To catch the “tap” event that triggers the jump animation a Rounded Rect button was dropped over the character image object and scaled to cover the character completely (if I had wanted the entire screen to respond to a touch I could have scaled it to fill the whole view). To make the button invisible its Type was set to Custom in the Attributes tab.

Making connections

• In the Document window File’s Owner was selected. In the Connections tab of the Inspector window there were 3 Outlets: bones (for the character), background (for the tree), and tombs (for the headstone). A connector was dragged to each of their respective Image Views in the View window.

• There was one Received Action, jump, which was connected to the button.

• The IB file was saved and I went back to Xcode to implement my methods.

Implementation

• In the MainViewController.m file the first thing to do was to synthesize all the properties I declared in the .h file.

• Then I added some code to the viewDidLoad method so I could invoke some methods when the app starts. They were:

[self startSound];//loads the theme music and other game sounds[self setupArrays];//loads the images into the arrays[self startTimers];//gets the animation and collision detection timers

going

Implementation (sound)Right after the viewDidLoad method, I set up the sound to play. The first line of the method provides the path to the sound resource, the third associates that resource with an instance of the AVAudioPlayer, and gives it the instance name themePlayer. The fourth line starts the song at its beginning, and the last line tells it to play. The code is below:

- (void) startSound{

NSString *themeSongPath = [NSString stringWithFormat:@"%@%@", [[NSBundle mainBundle] resourcePath], @"/gravehop.aif"];

NSError *err;

themePlayer = [[AVAudioPlayer alloc] initWithContentsOfURL: [NSURL fileURLWithPath:themeSongPath] error:&err];

themePlayer.currentTime = 0;

[themePlayer play];

}

Implementation (timers)

Right after the startSound method, I implemented the 3 timers I needed. bkgdTimer animates the background image across the screen every 10 seconds. Its selector (the method called when the timer expires) is moveBkgd, a method defined further down in the code. tombsTimer animates the obstacle, but it fires off every .01 seconds, because it needs to move the object incrementally (which I’ll explain a bit later). Its selector is moveTombs. tombsCollisionTimer fires off almost as fast, every .03 seconds, and it is polling for an overlap (collision) of the image object of the obstacle and the character. Its selector is checkTombsCollision. All the timers were set to repeat indefinitely (repeats:YES). The background and the obstacle are then set to startAnimating. The code is on the next slide.

Timer code- (void) startTimers{

bkgdTimer = [[NSTimer scheduledTimerWithTimeInterval:10 target:self selector:@selector(moveBkgd) userInfo:nil repeats:YES] retain];

[self moveBkgd];

[bkgd startAnimating];

tombsTimer = [[NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(moveTombs) userInfo:nil repeats:YES] retain];

tombsCollisionTimer = [[NSTimer scheduledTimerWithTimeInterval:0.03 target:self selector:@selector(checkTombsCollision) userInfo:nil repeats:YES] retain];

[tombs startAnimating];

}

Implementation (image arrays)• Next, I populated two image arrays, walkAnim and jumpAnim. First, the

arrays were created by allocating memory for them and initializing them. A for loop was used to iterate through all the images, setting the value of i to 1, incrementing i, and stopping when the value of i reached the last image. The value of i was then substituted for the format specifier %d and concatenated with text of the image file’s name (as in w1.png) and put into a string. The string was then used to add the images to the array.

• The walk cycle array, walkAnim, was then associated with the image object bones, given an animation duration of .5 seconds, and set to start animating.

• Code for populating the array and for starting the walk cycle animation is on the next slide.

Walk cycle animation- (void) setupArrays {

walkAnim = [[NSMutableArray alloc] init];

// a loop that lists the walk cycle imagesfor (int i = 1; i < 16; i++){

NSString *pic = [NSString stringWithFormat:@"w%d.png", i];UIImage *img = [UIImage imageNamed:pic];if (img) [walkAnim addObject:img];

}

//set the default animation for the view - the walk cycle[bones setAnimationImages:walkAnim];[bones setAnimationDuration:.5];[bones startAnimating];

}

Switching the animations• When the character jumps he needs to return to the default walking animation

after one jump. The change is triggered by a tap on an invisible button floating above the character, so the method is defined in an IBAction (called jump). The image object bones also needs to move up, out of the way of the obstacle, and then return to its previous position.

• Switching the animation was easy – one image array was exchanged for another in the bones object. But to switch back a timer had to be set, equal to the length of the jump animation, so that when it expired it would switch the animations back. The timer, of course, was set to run only once in response to the button press. The selector for the timer was set to a method called showWalk.

• The animation block that moves the bones object up is part of the jump method. It uses a setAnimationDidStopSelector method to call a method moveDown that moves the bones object back down. The time allocated to the animation is half the duration of the jump animation, moveDown takes the other half. The code for the jump method is on the next slide, showWalk and moveDown are on the following slide.

The jump method- (IBAction) jump{

[bones setAnimationImages:jumpAnim];[bones setAnimationDuration:2];[bones startAnimating];

[NSTimer scheduledTimerWithTimeInterval:1.9 target:self selector:@selector(showWalk) userInfo:nil repeats:NO];

// move the skeleton upbones.frame = CGRectMake(bones.frame.origin.x, bones.frame.origin.y, 121, 180);[UIView beginAnimations:nil context:nil];[UIView setAnimationDuration:1];[UIView setAnimationDelegate:self];[UIView setAnimationDidStopSelector:@selector(moveDown)];bones.frame = CGRectMake(bones.frame.origin.x, bones.frame.origin.y - 85, 121, 180);[UIView commitAnimations];

}

showWalk and moveDown- (void) showWalk{

[bones setAnimationImages:walkAnim];[bones setAnimationDuration:.5];[bones startAnimating];

}

- (void) moveDown{

bones.frame = CGRectMake(bones.frame.origin.x, bones.frame.origin.y, 121, 180);[UIView beginAnimations:nil context:nil];[UIView setAnimationDuration:.5];[UIView setAnimationDelegate:self];bones.frame = CGRectMake(bones.frame.origin.x, bones.frame.origin.y + 85, 121, 180);[UIView commitAnimations];

}

Implementation (move method)

Moving the background image across the screen was simple. It used the standard animation block methods for the UIView. The first line gives the starting key frame position and size of the object. The third line gives the animation duration. The fifth line gives the final key frame coordinates and size. The last line commits the animation. The code is on the next slide.

Move method code

// moves the background steadily across the screen- (void) moveBkgd {bkgd.frame=CGRectMake(460,0,113,163);[UIView beginAnimations:nil context:nil];[UIView setAnimationDuration:10.0];[UIView setAnimationDelegate:self];bkgd.frame=CGRectMake(-100,0,113,163);[UIView commitAnimations];}

Fire and forget• The moveBkgd animation code is fine if we don’t need to know where the object is

in the view between the first and last key frames – the system takes care of that. That kind of method is called “fire and forget”, like a self-guided missile. But if we want to detect a collision with another object then we need to know explicitly where the object is in each “frame” of the animation.

• To force the system to report the position x or y of the image object as it moves across the screen we had to amend the code to use a variable to describe the object’s x and y values as shown below. The tombsTimer is firing off very rapidly, constantly incrementing the animation based on the previous value of x or y.

• One more thing about the moveTombs method – the obstacle has to be reset to its original position (which is actually offscreen to the right) every time it animates off the left side of the screen. To do that a conditional statement was used to check to see what the x position of the obstacle object (tombs) was. If it was less than -100 pixels, then the object was placed back at the right, at 600 pixels. The code for the moveTombs method is on the next slide.

The moveTombs method- (void) moveTombs {

tombs.frame=CGRectMake(tombs.frame.origin.x,tombs.frame.origin.y,50,78);[UIView beginAnimations:nil context:nil];[UIView setAnimationDelegate:self];tombs.frame=CGRectMake(tombs.frame.origin.x -

2,tombs.frame.origin.y,50,78);[UIView commitAnimations];

if(tombs.frame.origin.x < -100){

tombs.frame=CGRectMake(600,222,50,78);

}

}

Checking for collision• Now that the animations were set, all I had to do was check to see

whether the bounding box (frame) of the obstacle object (tombs) is overlapping the bounding box of the character object (bones). This check is called every .03 seconds by the checkTombsCollision timer in the startTimers method described earlier.

• A conditional statement tests to see if a collision is detected, and if it is a method will be executed to stop the theme music from playing, and to flip the view over to the “game over” screen. The code is on the next slide.

• The flipsideViewController method was copied from the code generated by the Utility Application project template when the project was created. It was originally attached to an info button in the main view which was deleted in Interface Builder.

The checkTombsCollision method// checks for collision and takes necessary action when a collision is detected- (void) checkTombsCollision{

if(CGRectIntersectsRect(bones.frame, tombs.frame)){

// stop playing the theme song[themePlayer stop];

// flip the viewFlipsideViewController *controller = [[FlipsideViewController alloc]

initWithNibName:@"FlipsideView" bundle:nil];controller.delegate = self;controller.modalTransitionStyle =

UIModalTransitionStyleFlipHorizontal;[self presentModalViewController:controller animated:YES];

[controller release];

}

}

The flipside view

• So when the obstacle collides with the character, that session of the game is done and the game view flips over to the game over view. I did not do much to the FlipsideView.xib file in Interface Builder. I changed the title to “Good try!” and left the default “Done” button to go back to the game (though I could have renamed the button label “Replay”).

• However, it’s important to reset the game assets to their starting state once the game over view flips back. The custom methods in the flipsideViewControllerDidFinish method reset the theme music to the beginning and start it playing, and also reset the position of the background image and the obstacle. The code is on the next slide.

flipsideViewControllerDidFinish- (void)flipsideViewControllerDidFinish:(FlipsideViewController

*)controller {

[self dismissModalViewControllerAnimated:YES];

themePlayer.currentTime = 0;[themePlayer play];

bkgd.frame=CGRectMake(460,0,113,163);tombs.frame=CGRectMake(600,tombs.frame.origin.y,50,78);

}

Success!

So what’s next?• First, some simple instructions should be added to the game. That could be done with a label

on the main view, or it could be a good use of the currently empty panel of the flipside view, in which case code would have to be written to start the game in the flipside view mode instead of the main view. The button label in the flipside view would simply be “Play” to start the game session.

• To make the game more interesting, each time the view flips the game could toggle between hazards (the flying bat or the tombstone). The background image could toggle between the tree and the grave mound. The music could alternate between a few randomly selected themes. The dodging animation and the falling sequence of the character would have to be implemented. A game over sound could implemented when a collision is detected.

• Keeping score might be nice, and the display of the score could be in the flipside view along with the game rules. Saving the score to a .plist, so it persists between game sessions might also be a good idea. A login that saves to an array of players and their scores would be cool.

• Some students have suggested that the target bounding box of the character is too big. That could be addressed by creating a smaller target that floats above the character like the jump button does. Collision would then be checked between the obstacle and the smaller target.

• Let’s see how it goes by the end of the semester!