Gaming App1 Using Basic Animations

Introduction

This is a very simple article for beginners who want to create a game in iPhone. Here I will use very simple, basic animation. In this article I will use three custom buttons, three labels and two image views. We use a button or label from outlets but the image view is used in code. Here I will make a very simple or interesting game "StreetFighter". Here we have two players using a UIImage view but here we use actions like jump, kick and punch for only one player.

Here when we click on the jump button player1 jumps using animation. For this we use two images which are set in the form of a frame.

When we click on the Punch button player1 gives a punch on the player2 face; for this we set the player1 action punch frame using the cgrect() method and set the images synchronously.

In the same way when we click on the kick button it does the action dependng on the command set in code.

For more detail see the following procedure.

Step 1

Open Xcode by double-clicking on it.

Step 2

Create a New XCode Project by clicking on it.

Step 3

Now select Single View Application and click on "Next".

Step 4

Now give your Product Name and Company Identifier, then click on "Next".

Step 5

Select the location where you want to save your project to and click on "Create".

Step 6

Here we write code:

AppDelegate.h

//

// jumpingAppDelegate.h

// StreetFighter

//

// Created by Sachin Bhardwaj on 05/01/13.

// Copyright (c) 2013 Sachin Bhardwaj. All rights reserved.

//

#import <UIKit/UIKit.h>

@class jumpingViewController;

@interface jumpingAppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@property (strong, nonatomic) jumpingViewController *viewController;

@end

AppDelegate.m

//

// jumpingAppDelegate.m

// StreetFighter

//

// Created by Sachin Bhardwaj on 05/01/13.

// Copyright (c) 2013 Sachin Bhardwaj. All rights reserved.

//

#import "jumpingAppDelegate.h"

#import "jumpingViewController.h"

@implementation jumpingAppDelegate

- (void)dealloc

{

[_window release];

[_viewController release];

[super dealloc];

}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

sleep(3);

self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];

// Override point for customization after application launch.

self.viewController = [[[jumpingViewController alloc] initWithNibName:@"jumpingViewController" bundle:nil] autorelease];

self.window.rootViewController = self.viewController;

[self.window makeKeyAndVisible];

return YES;

}

- (void)applicationWillResignActive:(UIApplication *)application

{

// Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.

// Use this method to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates. Games should use this method to pause the game.

}

- (void)applicationDidEnterBackground:(UIApplication *)application

{

exit(0);

// Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.

// If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.

}

- (void)applicationWillEnterForeground:(UIApplication *)application

{

// Called as part of the transition from the background to the inactive state; here you can undo many of the changes made on entering the background.

}

- (void)applicationDidBecomeActive:(UIApplication *)application

{

// Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.

}

- (void)applicationWillTerminate:(UIApplication *)application

{

// Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.

}

@end

ViewController.h

//

// jumpingViewController.h

// StreetFighter

//

// Created by Sachin Bhardwaj on 05/01/13.

// Copyright (c) 2013 Sachin Bhardwaj. All rights reserved.

//

#import <UIKit/UIKit.h>

@interface jumpingViewController : UIViewController{

UIImageView *player;

UIImageView *player2;

}

@property (nonatomic, retain) UIImageView *player;

@property (nonatomic, retain) UIImageView *player2;

@end

ViewController.m

//

// jumpingViewController.m

// StreetFighter

//

// Created by Sachin Bhardwaj on 05/01/13.

// Copyright (c) 2013 Sachin Bhardwaj. All rights reserved.

//

#import "jumpingViewController.h"

@interface jumpingViewController ()

@end

@implementation jumpingViewController

@synthesize player;

@synthesize player2;

- (void)viewDidLoad

{

[super viewDidLoad];

[self initPlayer];

[self initPlayer2];

}

- (void)didReceiveMemoryWarning

{

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

- (void)normalStance {

[self.player setImage:[UIImage imageNamed:@"punch1.png"]];

[self.player2 setImage:[UIImage imageNamed:@"ryu.png"]];

}

- (void)initPlayer {

self.player = [[UIImageView alloc] initWithFrame:

CGRectMake(200, 350, 77.0, 94.0)];

[self normalStance];

// explicitly opaque for performance

self.player.opaque = YES;

[self.view addSubview:self.player];

}

- (void)initPlayer2 {

self.player2 = [[UIImageView alloc] initWithFrame:

CGRectMake(10, 350, 77.0, 94.0)];

[self normalStance];

// explicitly opaque for performance

self.player2.opaque = YES;

[self.view addSubview:self.player2];

}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {

// Return YES for supported orientations

return (interfaceOrientation == UIInterfaceOrientationLandscapeRight);

}

- (void)cleanStance {

[self.player setImage:nil];

self.player.animationImages = nil;

}

-(IBAction)kickStance {

[self cleanStance];

NSArray *imageArray = [[NSArray alloc] initWithObjects:

[UIImage imageNamed:@"kick1.png"],

[UIImage imageNamed:@"kick2.png"],

nil];

self.player.animationImages = imageArray;

self.player.animationDuration = 0.3;

self.player.contentMode = UIViewContentModeBottomLeft;

[self.view addSubview:self.player];

[self.player startAnimating];

}

-(IBAction)jumpStance {

[self cleanStance];

NSArray *imageArray = [[NSArray alloc] initWithObjects:

[UIImage imageNamed:@"jump1.png"],

[UIImage imageNamed:@"jump2.png"],

nil];

self.player.animationImages = imageArray;

self.player.animationDuration = 0.3;

self.player.contentMode = UIViewContentModeBottomLeft;

[self.view addSubview:self.player];

[self.player startAnimating];

}

-(IBAction)punchStance {

[self cleanStance];

NSArray *imageArray = [[NSArray alloc] initWithObjects:

[UIImage imageNamed:@"punch1.png"],

[UIImage imageNamed:@"punch2.png"],

nil];

self.player.animationImages = imageArray;

self.player.animationDuration = 0.3;

self.player.contentMode = UIViewContentModeBottomLeft;

[self.view addSubview:self.player];

[self.player startAnimating];

}

-(void)fall:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {

[self cleanStance];

[self normalStance];

[UIView beginAnimations:nil context:NULL];

[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];

[UIView setAnimationBeginsFromCurrentState:YES];

[UIView setAnimationDuration:0.2];

self.player.transform = CGAffineTransformMakeTranslation(0, 0);

[UIView commitAnimations];

}

- (void)jump:(UIImageView *)image {

[self jumpStance];

[UIView beginAnimations:nil context:NULL];

[UIView setAnimationDuration:0.3];

[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];

[UIView setAnimationBeginsFromCurrentState:YES];

// execute fall after the animation ended

[UIView setAnimationDelegate:self];

[UIView setAnimationDidStopSelector:@selector(fall:finished:context:)];

image.transform = CGAffineTransformMakeTranslation(0, -100);

[UIView commitAnimations];

}

- (void)kick:(UIImageView *)image {

[self kickStance];

[UIView beginAnimations:nil context:NULL];

[UIView setAnimationDuration: 0.3];

[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];

[UIView setAnimationBeginsFromCurrentState:YES];

// execute fall after the animation ended

[UIView setAnimationDelegate:self];

[UIView setAnimationDidStopSelector:@selector(fall:finished:context:)];

image.transform = CGAffineTransformMakeTranslation(-160, -40);

[UIView commitAnimations];

}

- (void)punch:(UIImageView *)image {

[self punchStance];

[UIView beginAnimations:nil context:NULL];

[UIView setAnimationDuration: 0.3];

[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];

[UIView setAnimationBeginsFromCurrentState:YES];

// execute fall after the animation ended

[UIView setAnimationDelegate:self];

[UIView setAnimationDidStopSelector:@selector(fall:finished:context:)];

image.transform = CGAffineTransformMakeTranslation(-150, -1);

[UIView commitAnimations];

}

- (IBAction)button:(id)sender{

[self jump:self.player];


}

- (IBAction)button2:(id)sender{

[self punch:self.player];

}

- (IBAction)button3:(id)sender{

[self kick:self.player];

}

- (void)dealloc {

[player release];

[super dealloc];

}

@end

ViewController.Xib

ViewController.Xib-in-iPhone.png

Step 7

Now select the iPhone platform to see the output in the Simulator.

Output

Splash in iPhone:

Splash-in-iPhone.png

Output1 in iPhone:

Output1-in-iPhone.png

Output2 in iPhone:

Output2-in-iPhone.png

Here when we click on the jump button it performs the action of the jump, just like that.

Output3 in iPhone:

Output3-in-iPhone.png
Here when we click on Punch button it performs the punch action, just like that.

Output4 in iPhone:

Output4-in-iPhone.png

Here when we click on the kick button it performs the kick action, just like that.