How To Create Simple Game With A Custom Picker In iPhone?

We are going to have a little fun with the fifth content view. We’re going to see how to add image data to a picker, write a little game that uses a picker with five components.

Step 1: Create a new project from Xcode and select view-base application template.

Step 2: Adding the following code to the controller Header file.


#import <uikit/UIKit.h>

@interface CustomPickerViewController : UIViewController

IBOutlet UIPickerView *picker;
IBOutlet UILabel *winLabel;

NSArray *column1;
NSArray *column2;
NSArray *column3;
NSArray *column4;
NSArray *column5;


@property (nonatomic,retain) UIPickerView *picker;
@property (nonatomic,retain) UILabel *winLabel;
@property (nonatomic,retain) NSArray *column1;
@property (nonatomic,retain) NSArray *column2;
@property (nonatomic,retain) NSArray *column3;
@property (nonatomic,retain) NSArray *column4;
@property (nonatomic,retain) NSArray *column5;




Step 3: Double click .xib file to open the file in Interface Builder. Add a label, a picker, and a button. Give the button a title of spin. Next select label , and use the Fonts palette (Alt+T)to make the label’s text nice and big. After getting the text the way you want it, delete the word Label from it , since we don’t want any text displayed until the first time the user wins. After that, make all the connections to outlets and actions. You need to connect the file’s owner’s picker outlet to the picker view, the file’s owner’s winLabel outlet to the label,and the button’s touch up inside event to the spin action. There one additional thing that you need to do. Select the picker, and bring up the attributes inspector. You need to uncheck and checkbox labeled User Interacface Enabled . Now save it, go back to Xcode.

Step 4: We need to add the images that we’ll be using in our game. We’ve included a set of six image files(seven.png, bar.png, crown.png, cherry.png, lemon.png, and apple.png) in your resources folder.

Step 5: We need to add following code to our controller file. First method is spin method fires when the user touches the Spin button . We first declare a few variables that will help us keep track of whether the user has won. Second method is viewDidLoad, first thing we do is load six different images. We do using this using a convenince method on the UIImage class class called imageNamed:


BOOL win = NO;
int numInRow = 1;
int lastVal = -1;
for(int i = 0; i= 3)
win = YES;

winLabel.text = @"WIN!";
winLabel.text = @"";
- (void)viewDidLoad {

UIImage *seven = [UIImage imageNamed:@"seven.png"];
UIImage *bar = [UIImage imageNamed:@"bar.png"];
UIImage *crown = [UIImage imageNamed:@"crown.png"];
UIImage *cherry = [UIImage imageNamed:@"cherry.png"];
UIImage *lemon = [UIImage imageNamed:@"lemon.png"];
UIImage *apple = [UIImage imageNamed:@"apple.png"];

for(int i =1; i<=5; i++) { UIImageView *sevenView = [[UIImageView alloc] initWithImage:seven]; UIImageView *barView = [[UIImageView alloc] initWithImage:bar]; UIImageView *crownView = [[UIImageView alloc] initWithImage:crown]; UIImageView *cherryView = [[UIImageView alloc] initWithImage:cherry]; UIImageView *lemonView = [[UIImageView alloc] initWithImage:lemon]; UIImageView *appleView = [[UIImageView alloc] initWithImage:apple]; NSArray *imageViewArray = [[NSArray alloc] initWithObjects: sevenView,barView, crownView,cherryView,lemonView,appleView,nil]; NSString *fieldName = [[NSString alloc] initWithFormat:@"column%d",i]; [self setValue:imageViewArray forKey:fieldName]; [fieldName release]; [imageViewArray release]; [sevenView release]; [barView release]; [crownView release]; [cherryView release]; [lemonView release]; [appleView release]; } srandom(time(NULL)); } -(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView { return 5; } -(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component { return [self.column1 count]; } -(UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view { NSString *arrayName = [[NSString alloc] initWithFormat:@"column%d",component+1]; NSArray *array = [self valueForKey:arrayName]; return [array objectAtIndex:row]; }


 Step 6: Now compile your application and you can play your application on Simulator. ( see  figure 1)

Figure 1: Our five component picker.

You can downloaded SourceCode from here CustomPicker 2

Leave a Comment:

joanne says December 15, 2010

my application crashed when i first created it. i edited the codes a bit but now the picker is not shown. its just a blank view with just the button. also, i’ve used my own pictures but the pictures are too big. any idea how to resize it?

abhishek says March 19, 2012

this tutorial was very helpful
something that i was looking for…
but there is one thing i want to change here
PLZ HELP ME with it
see instead of the SPIN BUTTON i want the user to be able to move the pickers and then i want the check function to be called…
can u plz tell me how to do that…


bhavesh says November 9, 2012

any other game code pls link add your code is so usefull so anoter link add pls .

bhavesh says November 9, 2012

any other game code pls

Add Your Reply