Beginner iPhone Action Game Programming Tutorial

Welcome to my iPhone action game tutorial. This is a step by step tutorial for creating an iPhone action game.

You can see the result of a game running the code in the video below:

The graphics are a bit different with the tutorial (as some of those in the video are being used in an actual project) but that is the result of running the actual code within the tutorial.

Specificially the tutorial features:

  • Loading/Placing Images
  • Animation
  • Touch Events
  • Text
  • Sound Effects
  • Background Music
  • Buttons
  • Resetting The Game

Now before we start there are a few pre-requisites. You should have a basic understanding of Objective-C and will need a Mac with the iPhone SDK installed. The game was created using iPhone SDK 4.0, and the Sparrow Framework. Also note that I created this to be as easy to follow as possible so I used a minimum number of classes/methods to make it as easy as possible for a beginner to follow – I’ve even exclusively used autorelease objects  so you don’t need to worry about memory management (one of the facets of Objective-C many beginners have trouble with).

In case you’re wondering why I chose to go the route of using the Sparrow Framework it’s because I believe it is the easiest iPhone game development framework available for free for a beginner to start with, and it has already been used in a number of games in the app store.

Please share this tutorial by tweeting it or sharing using one of the buttons at the bottom.  If you have a Dzone account you can vote it up here!

You can navigate through the tutorial by using the page numbers at the bottom of each page.

If you’d like to jump right in you can download a project with all the resources loaded in here.

At the very end of the tutorial you will find the completed project with extensive comments, and at the end of every page you will find a project file that will bring you up to that point of the tutorial.

Otherwise if you’d like to go the route of installing Sparrow, and setting everything up you can visit the Sparrow Framework getting started page here which explains the process of setting up an Xcode project that utilizes the Sparrow Framework. You can get just the game assets (graphics/sound) here.

The tutorial is definitely not perfect, and there are probably some spelling/grammar mistakes, but it is the most extensive single tutorial I’ve seen around and might never be released if I tried to perfect it :)

The first thing we’re going to do is start the game scene by displaying in a background image, adding the score and level text, and playing some music.  Go to page 2 by clicking that number at the bottom of this article to go to that page.

©2010 iPhone iOS 4 iPad SDK Development Tutorials, Programming Tips, News. All Rights Reserved.

.

Share and Enjoy:

RSS
Twitter
Facebook
DZone
HackerNews
del.icio.us
FriendFeed

iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder

Creating iPhone Application: Introduction:

I am going to write series of UITableView tutorials for iPhone (Video Tutorials as well) to help developers and programmers to make a new applications for Apple store. This series of tutorials help you create/build iPhone applications more easily and fast. Following are the list of iPhone tutorials, which I will be posting on this blog:

iPhone Programming Tutorial -Table View- Part 1: Create a Simple UITableView [Populate UITableView With Array]
iPhone Programming Tutorial -UITable View- Part 2: Navigatation in UITableView [Navigatation on UITableView using didSelectRowAtIndexPath]
iPhone Programming Tutorial – Part 3: Grouped UITableView [Using Interface builder]
iPhone Programming Tutorial – Part 4: Tips for UITableView Design [Change UITableView properties i.e background colour, accessory type, add footer and header]
iPhone Programming Tutorial – Part 5: Add, Delete & Re-order UITableView rows
iPhone Programming Tutorial – Part 6: Creating UITableView using UITableViewCell Using Interface Builder
iPhone Programming Tutorial – Part 7: Adding Pictures into your UITableView using Interface builder
iPhone Programming Tutorial Examples Part 8: UITableView & UITableViewCell examples and tips

[Note: If you want more iPhone tutorial’s on UITableView or UITableViewCell, then add a comment on “Request for Beginner iPhone Tutorial” Page]

Idea of this iPhone tutorial:

In my last iPhone tutorial on table, I explain how you can easily design table using UITableViewCell. In this tutorial, I will explain how you can add images and labels to your UITableView. So in this tutorial, i will add few lines in UITableViewCell class and add images to cell xib file.


Final output of this tutorial will look like this. You can watch the video tutorial at the end.

customize UITableView using UITableViewCell
Table design using Interface builder

iphone programming tutorial steps to follow (10 Steps to add pictures):

Follow these steps to achieve the output like above:

Step 1:Open the last tutorial code (You can grab this code from here) and add following 6 images to your project resources folder by dragging in to xcode.

iPhone TutorialiPhone TutorialiPhone TutorialsiPhone SDK tutorialiPhone sdk tutorialiphone sdk tutorials

iphone table view tutorial
add images to iPhone resource folder
iphone tableview
Please make sure, copy check box is selected

Step 2: Now open TableCellView.h file and add one Label & UIImageView

1.IBOutlet UIImageView *productImg;
2.IBOutlet UILabel *descriptionText;

Also Add these two methods definition in TableCellView.h, for setting the values for label and Image.

1.- (void)setDescpText:(NSString *)_text;
2.- (void)setProductImage:(NSString *)_text;

Step 3: Add these methods body in TableCellView.h file

1.- (void)setDescpText:(NSString *)_text;{
2.descriptionText.text = _text;
3.}
4.
5.- (void)setProductImage:(NSString *)_text;{
6.productImg.image = [UIImage imageNamed:_text];
7.}

Step 4: Add two NSArray’s in SimpleTableViewController.h

1.NSArray *imagesList;
2.NSArray *descpList;

Step 5: In SimpleTableViewController.m file, move to viewDidLoad method and overwrite the arryData with these lines of code:

1.arryData = [[NSArray alloc] initWithObjects:@"iPhone",@"iPod",@"MacBook",@"MacBook Pro",@"Mac Mini"@"iPhone 3G S",nil];
2.imagesList = [[NSArray alloc] initWithObjects:@"1.jpg",@"2.jpg",@"3.jpg",@"4.jpg",@"5.jpg",@"6.jpg",nil];
3.descpList = [[NSArray alloc] initWithObjects:@"Price 500$",@"Price 50$",@"Price 1,000$",@"Price 1,200$",@"Price 800$",@"Price 700$",nil];

Step 6: In cellForRowAtIndexPath method, add these two lines before return statement

1.[cell setProductImage:[imagesList objectAtIndex:indexPath.row]];
2.[cell setDescpText:[descpList objectAtIndex:indexPath.row]];

Step 7: Now open TableCellView.xib file in Interface Builder. Select “Table Cell View” and change its height to 65.

iphone table view
change table cell height from interface builder

Step 8: Add UILabel and UIImageView to the cell design like this

iphone table tutorial
add labels and image to cell

Step 9: Map UILabel & UIImageView to TableCellView.h file

iphone uitableview
map label from interface builder to your class
iphone uitableview tutorial
map label from interface builder to your class

Step 10: Last step, open SimpleTableViewController.xib file and select Table. Press cmd + 3 and change the height of row to 70.

iphone table cell tutorial
change table row height from interface builder

Run the application and you will see the final output.

iphone tutorial
final result of customizing table cell from interface builder

Code for iPhone application:

Click here for the code Project code.