If you run the example, you will notice that when you touch the placard it grows a little and then you can drag it. This first response is captured in the touchesBegan event:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
   UITouch *touch = [touches anyObject];
   if ([touch view] != placardView) {
      ...
      return;
   }
   CGPoint touchPoint = [touch locationInView:self];
   [self animateFirstTouchAtPoint:touchPoint];
}

Notice that you do not have a single touch parameter but an NSSet of touches. The first thing this example does is distill this down to one touch within the line:

UITouch *touch = [touches anyObject];

Now a check is performed to see if the view that is responsible for reporting the touch is the placard; if it is not, the method exits before any animations are started:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
   UITouch *touch = [touches anyObject];
   if ([touch view] != placardView) {
      ...
      return;
   }
   CGPoint touchPoint = [touch locationInView:self];
   [self animateFirstTouchAtPoint:touchPoint];
}

Next, locationInView is used to convert the position of the touch into a new position that is relative to the Main View:

CGPoint touchPoint = [touch locationInView:self];

Finally, an animation is performed and you see the button grow on the screen:

[self animateFirstTouchAtPoint:touchPoint];

As you drag your finger on the screen, you experience the placard sliding across the screen. This behavior is achieved by responding to the touchesMoved event:

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
   UITouch *touch = [touches anyObject];
   if ([touch view] == placardView) {
      CGPoint location = [touch locationInView:self];
      placardView.center = location;
      return;
   }
}

Most of the setup code in touchesMoved is the same as in touchesBegan. All you need to do is reset the center of the placard to the center of the touch:

placardView.center = location;

When you remove your finger from the screen, you see the placard spring back to the center of the screen. This behavior is achieved by responding to the touchesEnded event:

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
   UITouch *touch = [touches anyObject];
   if ([touch view] == placardView) {
      self.userInteractionEnabled = NO;
      [self animatePlacardViewToCenter];
      return;
   }
}

Most of the setup code in touchesEnded is the same as in touchesBegan. After the common setup is complete, you will want to turn off any user interaction until the placard returns to its original location. This is accomplished with the following line:

self.userInteractionEnabled = NO;

Now that interaction is disabled, you can begin the animation. In our example this is accomplished by a call to the instance method animatePlacardViewToCenter:

[self animatePlacardViewToCenter];

It is important that you restore user interaction when the animation is complete. It is not shown here, but when the animation is complete, user interaction is restored. You can accomplish this by setting the value of the property userInteractionEnabled to YES, as shown below:

self.userInteractionEnabled = YES;

The touchesCancelled event is fired when the touch sequence is cancelled by a system event, such as an incoming phone call. You should respond to this event, but your goal should be to clean up and get out as quickly as possible:

- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
   placardView.center = self.center;
   placardView.transform = CGAffineTransformIdentity;
}

Notice that we are simply setting the placard back to its original state with no glitz or animations. The player will probably not even see this happen, so keep it short and sweet.

For this project we have chosen to use the Utility Application template. This template has a small information icon in the bottom-right corner (Figure 3.7). When you click this icon the screen flips, revealing an information screen (Figure 3.8).

Figure 3.7. Click the small "i" info icon to bring up the info screen.

You can use the info screen to do the following:

Figure 3.8. After the info icon is clicked, the info screen is displayed.

Hopefully you have already downloaded the code from http://appsamuck.com and are ready to follow through. If you have been using Xcode and developing for the iPhone, you already know how to create new projects. However, if you have not, we'll take a moment at the beginning of the application to walk you through the steps of creating a project and a new class for some of the shorter, less involved items. As we progress to larger items, we'll assume you are following along and just cover the relevant material and methods.

Here are the steps you need to follow to create a utility app the same way we started AmuckSlider. Launch Xcode and choose File

Figure 3.9. Creating a new utility application

You will be prompted to name your project. We named ours AmuckSlider, but choose whatever name you like. When the project is created, several files are created for you. To get started, let's go ahead and complete our Info View.

You will find the source you will want to modify for the Info View in the files FlipsideViewController.h and FlipsideViewController.m. Most of the information in this screen is static, but two elements are not. First, we need the high score to change to reflect the player's current best score. Second, we need a button that sends a message to the controller whenever it is clicked so we can send an e-mail to a friend bragging about our score. Start by opening up FlipsideViewController.h. You will need an IBOutlet to reference the highScoreLabel, and you will need an IBAction to respond to your button click. When you open FlipsideViewController.h, you see the following code:

#import <UIKit/UIKit.h>
@interface FlipsideView : UIView {
}
@end

Add a label and action to the code so that it looks like this (additions are in bold):

#import <UIKit/UIKit.h>
@interface FlipsideView : UIView {
   IBOutlet UILabel *highScoreLabel;
}
@property (nonatomic, retain) UILabel *highScoreLabel;
IBAction onEmailButtonClick;
@end

Now we need to make some completer changes to FlipsideViewController.m. When you open this file it will look like this:

#import "FlipsideViewController.h"
@implementation FlipsideViewController
- (void)viewDidLoad {
   [super viewDidLoad];
   self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];
}
- (void)didReceiveMemoryWarning {
   [super didReceiveMemoryWarning];
}
- (void)dealloc {
   [super dealloc];
}
@end

Again, add code for a label and action so that it looks like Listing 3.1.

#import "FlipsideViewController.h"
@synthesize highScoreLabel;
@implementation FlipsideViewController
- (void)viewDidLoad {
   [super viewDidLoad];
   NSString* highScore = [Helper getUserValueForKey:
      @"highscore" withDefault:@"0"];
   highScoreLabel.text = [NSString stringWithFormat:

      @"High Score: %@", highScore];
   self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];
}
- (void)onEmailButtonClick {
   NSString* highScore = [Helper getUserValueForKey:
      @"highscore" withDefault:@"0"];
   NSString *emailBody = [NSString stringWithFormat:
      @"Do you think you can beat my high score at AmuckSlider?
         My current high score is:%@", highScore];
   [Helper sendEmailWithSubject:@"Beat this score!" withBody:emailBody];
}
- (void)didReceiveMemoryWarning {
   [super didReceiveMemoryWarning];
}
- (void)dealloc {
   [highScoreLabel release];
   [super dealloc];
}
@end

You probably noticed that sendEmailWithSubject and getUserValueForKey are method calls from the static class Helper. As you know, it's best to encapsulate code that you will be using time and time again. The full listings for the methods sendEmailWithSubject and getUserValueForKey are right here:

+ (void)sendEmailWithSubject:(NSString*)aSubject withBody:(NSString*)aBody{
   NSString *urlString = [NSString stringWithFormat:
      @"mailto:?subject=%@&body=%@", aSubject, aBody];
   urlString = [urlString stringByReplacingOccurrencesOfString:
      @" " withString:@"%20"];
   NSURL* mailURL = [NSURL URLWithString: urlString];
   [[UIApplication sharedApplication] openURL: mailURL];
}
+ (NSString*)getUserValueForKey:(NSString*)aKey
   withDefault:(NSString*)aDefaultValue {
   NSString *result = [[NSUserDefaults standardUserDefaults]
      stringForKey: aKey];
   if (result == nil || [result isEqualToString:@""]) {
      return aDefaultValue;
   }
   return result;
}

We want our game to have several different levels to keep players' interest, and we need to store data for each of our levels. In addition, we want our game to have different degrees of challenge, such as easy, medium, and hard. Since this is a puzzle game and you have to be clever to figure out the patterns, we have decided to make the degree of challenge a literal degree. The levels of difficulty are Bachelors for easy, Masters for medium, and Doctorate for hard. We have eight levels for each degree, for a total of 24 levels.

We need to set up some interfaces to define this model. The ultimate goal is to create an easy way for us to get level data and to separate that concern from the rest of the system. In order to host the class model, we've created a new pair of files, Game.h and Game.m. In these files we have defined a few interfaces and enumerations to fulfill our requirements.

The whole purpose of the Game class is to implement the following methods:

+ (Difficulty)getBestDifficulty;
+ (int)getBestLevelForDifficulty:(Difficulty)aDifficulty;
+ (int)getCurrentLevelIndex;
+ (void)setCurrentLevelIndex;
+ (Level*)getLevelAtLevelIndex:(int)aLevelIndex;

These methods will help us easily access information necessary to the game system. Here is a short description of what these methods do:

@interface Game : NSObject {
   Level *levels[24];
}
+ (Difficulty)getBestDifficulty;
+ (int)getBestLevelForDifficulty:(Difficulty)aDifficulty;
+ (int)getCurrentLevelIndex;
+ (void)setCurrentLevelIndex;
+ (Level*)getLevelAtLevelIndex:(int)aLevelIndex;
@end

Level *levels[24];

+ (Level*)getLevelAtLevelIndex:(int)aLevelIndex {
  return [Game getInstance].levels[aLevelIndex];
}

+ (int)getCurrentLevelIndex {
   return [[Helper getUserValueForKey:@"currentlevel"
      withDefault:@"0"] intValue];
}
+ (void)setCurrentLevelIndex:(int)aLevelIndex {
   int bestIndex = [[Helper getUserValueForKey:@"currentlevel"
      withDefault:@"0"] intValue];
   if (bestIndex < aLevelIndex)
      [Helper setUserValue:[NSString stringWithFormat:@"%d", aLevelIndex]
      forKey:@"bestlevel"];
   [Helper setUserValue:[NSString stringWithFormat:@"%d", aLevelIndex]
      forKey:@"currentlevel"];
}

+ (Difficulty)getBestDifficulty {
   int bestIndex = [[Helper getUserValueForKey:@"currentlevel"
      withDefault:@"0"] intValue];
   return (Difficulty)floor(bestIndex / 3);
}
+ (int)getBestLevelForDifficulty:(Difficulty)aDifficulty {
   int bestIndex = [[Helper getUserValueForKey:@"currentlevel"
      withDefault:@"0"] intValue];
   int offset = [self getBestDifficulty] * 8;
   return bestIndex - offset;
}

typedef enum {
   empty,
   blank,
   arrow
} TileType;

typedef struct {
   int location;
   TileType tileType;
} Tile;

typedef enum {
   bachelors,
   masters,
   doctorate
} Difficulty;

typedef struct {
   Difficulty difficulty;
   int tileSize;
   int gridSize;
   Tile tiles[16];
} Level;

Now we need to erect a menu so the user can start the game, select a difficulty level, and all those good things. In puzzle games, it is at times best to lock the player out of advanced levels at first and have them build up to them. If you fail to do this, many players will rush to the difficult levels first and quickly get bored with the game. There is just something about the way we are programmed—if we are challenged to defeat levels in sequence, we are always lured by the temptation to attempt just one more level. So in the spirit of keeping the challenge high, we have chosen to require the player to defeat the levels in sequence the first time through. Once a challenge has been beaten, a player can go back and replay a previous level.

You could take this idea a step further by allowing the player to achieve badges for accomplishing specific items. A badge system keeps players coming back to replay existing levels after they get good at the game. For example, the second time through the game would challenge the player to try and finish faster or with fewer moves. You could award an "Ace" badge if the player beats a level with minimal moves or award a "Speedster" badge if he beats the level in record time. But before any of this is possible, we must begin by setting up a menu system.

Follow these steps to create the Menu View by adding a new view controller and view XIB:

Now let's add some controls to the view. Double-click the MenuView.xib file to open the menu user interface in Interface Builder. If you have downloaded the code and are following along, you should see a screen that looks like the one shown in Figure 3.10.

Figure 3.10. Menu View in Interface Builder

Notice in the previous figure that the third button is blurry. That's because the text from two different buttons is overlapping. This is not a problem, because we manage which button is shown at run-time in the class MenuViewController. When you click New Game from the Game View, you are presented with a menu that has the buttons Levels and Help on it (Figure 3.11).

Figure 3.11. First page of the menu screen

When you click Levels, you are presented with the three levels of difficulty: Bachelor, Masters, and Doctorate (Figure 3.12).

Figure 3.12. Choosing the level of difficulty from the menu screen

After choosing the difficulty, you will be presented with levels One through Eight (Figure 3.13). Finally, you can click the Help button to display a list of instructions.

Notice that this is not a very attractive set of screens. We will come back later and polish up the menu. You will find that if you spend time polishing as you go along you will get caught up in the details too early in the process. If you do this you can lose your focus on the big picture and have trouble getting reoriented at each stage of the process.

Another problem with polishing too early is that if you have to rethink or change anything, you will have to throw away work and time that you cannot recoup. Take it from us: Get the app working and functional, then come back and polish it up. You will save time and find the polishing process fun and rewarding.

Figure 3.13. Choosing the level from the menu screen

Now open the file MenuViewController.h and you will see the following:

@protocol MenuViewDelegate <NSObject>
@optional
   -(void)loadLevel:(int)levelIndex;
@end
@interface MenuViewController : UIViewController {
   Difficulty difficulty;
   int level;
   id <MenuViewDelegate>delegate;
   UIButton *levelNumberButton[8];
   IBOutlet UIButton *levelButton;

   IBOutlet UIButton *helpButton;
   IBOutlet UIButton *bachelorsButton;
   IBOutlet UIButton *doctorateButton;
   IBOutlet UIButton *mastersButton;
}
@property (nonatomic, retain) id /*<UIAlertViewDelegate>*/ delegate;
- (IBAction)onLevelClick;
- (IBAction)onHelpClick;
- (IBAction)onBachelorsClick;
- (IBAction)onDoctorateClick;
- (IBAction)onMastersClick;
- (void)showRoot:(bool)aHidden;
- (void)showDifficulity:(bool)aHidden;
- (void)showLevels:(bool)aHidden;
@end

We have used two styles of building a user interface on this controller in order to give you a little variety. The buttons defined with IBOutlet UIButton*... are connected at design time using Interface Builder. When connecting with Interface Builder, you will need to connect the IBOutlet and the IBAction using the same method described in the Hello World example from Chapter 2. The other style used is to create the buttons at run-time when the MenuViewController class is instantiated. After these buttons are created, they are stored in this array:

UIButton *levelNumberButton[8];

In the example code file MainViewController.m you will find the method initLevelNumberButtons (Listing 3.2). This method creates the buttons that are stored in the array.

- (void)initLevelNumberButtons {
   int btnTopOffset = 65;
   int btnHeight = 37;
   int btnWidth = 137;
   int btnTopMargin = 9;
   int btnEvenLeft = 20;
   int btnOddLeft = 164;
   for (int i=0; i<8; i++) {
      int btnRow = i/2;
      int btnLeft = i%2 == 0 ? btnEvenLeft : btnOddLeft;
      int btnTop = ((btnHeight + btnTopMargin) * btnRow) + btnTopOffset;
      CGRect buttonFrame = CGRectMake(btnLeft, btnTop, btnWidth, btnHeight);

      levelNumberButton[i] = [UIButton buttonWithType: UIButtonTypeRoundedRect];
      levelNumberButton[i].frame = buttonFrame;
      levelNumberButton[i].hidden = true;
      levelNumberButton[i].tag = i+1;
      [levelNumberButton [i] addTarget:self action:
         @selector(onLevelNumberButtonClick:)
         forControlEvents:UIControlEventTouchUpInside];
      [levelNumberButton [i] setTitle:buttonNames[i]
         forState:UIControlStateNormal];
      [self.view addSubview: levelNumberButton [i]];
   }
}

Take notice of the following line from above:

[levelNumberButton [i] addTarget:self action:
   @selector(onLevelNumberButtonClick:)
   forControlEvents:UIControlEventTouchUpInside];

This line attaches the selector onLevelNumberClick to the button's TouchUpInside event. All eight buttons are assigned to the same method. However, we are using the tag property of the button to distinguish which button was clicked. This is what the onLevelNumberButtonClick method looks like:

- (void)onLevelNumberButtonClick:(id)sender {
   UIButton *btn = (UIButton*)sender;
   int levelIndex = (int)btn.tag;
   [self selectLevel:levelIndex];
}

Since we have all the buttons on the same view at the same time, it is simple to just hide and show the appropriate buttons by changing the button's "hidden" property. This gives the player the feeling that he is paging through options while keeping all of the view logic in one class.

Once the player has made a selection, we need to report his choice back to the main Game View. This is where the protocol that you saw at the top of MenuViewController.h comes into play:

@protocol MenuViewDelegate <NSObject>
@optional
   -(void)loadLevel:(int)levelIndex;
@end

This protocol defines an interface that the implementing classes can define to receive messages from. In this case, the MainViewController implements the method loadLevel as defined by the protocol. The selectLevel method in MenuViewController calls the loadLevel of the delegate, which sends the message to the implementing class instance referenced by the delegate:

- (void)selectLevel:(int)levelIndex {
   [delegate loadLevel:levelIndex-1];
}

We recommend that you completely finish the game logic before polishing up the Game View. However, since we are guiding you through a complete example, let's take a break from discussing implementation and look at how our screens are going to look after we polish them up. In this example we are going to add a better background image and a little animation to spice it up a bit. You will be amazed how a few simple changes can add interest. Go back to the AmuckSlider source link (http://appsamuck.com/gamedevbook/amuckslider) and this time download the "After Polish" version of the source code.

To polish up the menus, we will add a background image to the Menu View. You can do this in Interface Builder without touching this code. For each of the buttons we will add a background image to add a little spice there, too. This is a little more complicated because you need to tell the button how to treat the edges of the background image. You will see that a background image has been assigned to each button similar to the line below:

UIImage *buttonBackground = [[UIImage imageNamed:@"menuButtonBackground.png"]
   stretchableImageWithLeftCapWidth:12.0 topCapHeight:12.0 ];
[levelButton setBackgroundImage:buttonBackground
   forState:UIControlStateNormal];

The trick to this is creating the UIImage with the imageNamed:stretchableImageWithLeftCapWidth:topCapHeight: signature. Figures 3.14, 3.15, and 3.16 show what the finished product looks like.

Figure 3.14. Polished first page of the menu screen

Figure 3.15. Choosing the level of difficulty from the polished menu screen

Figure 3.16. Choosing the level from the polished menu screen

We could leave it alone now because it looks good, but let's add just a bit more excitement. When a button in clicked, add a little animation to the process to make the click feel more interactive. Figure 3.17 shows the animation midway through its progress, but you really need to run the app to get the full effect.

Figure 3.17. Button animation still from the polished menu screen

For one final touch as part of polishing the menu, you can add a default.png image to your project. When you launch your app, the iPhone OS displays this image while the player is waiting for the app to load. Apple asks that you do not use this image as a splash screen. Apple prefers that you use an image that looks like the first page your player will see. The best way to do this is to take a screen shot of your root menu screen and save it in your project with the name default.png. If you have never taken a screen shot before, it's easy. Hold down the Home button and then click the on/off button located at the top of your device. You should see the screen flash, and then you will find the screen shot in the Camera Roll of the Photos app.

Once you have a screen shot you can add it to your app as a resource with the name Default.png.

Apple recommends that you use an image that looks like the first page users will see. However, this may make the app feel unresponsive to users during initial startup, because they will see a screen where they expect to be able to tap buttons yet they cannot because they are looking at an image instead of a UI. We have found placing the text "loading... " in the center of the screen helps players understand what to expect.

Now that we have some content on the info screen, a way to persist and retrieve game data, and a menu, it's time to build the Game View. For simplicity we will place most of the game logic for AmuckSlider in the class MainViewController and a little view logic in the class TileView. In more complicated examples you will want to take time to break up your concerns into relevant classes.

Go ahead and review the classes MainViewController and TileView from the unpolished version of the source code. (Again, this source can be found at http://appsamuck.com/gamedevbook/amuckslider.) Now we will review all the key pieces of game and view logic found in these files. When you are done you will understand what makes AmuckSlider tick.

UIImage *arrowImage = [UIImage imageNamed:@"arrowImage.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:arrowImage];
// make the arrow image half the size of the TileView so that when it is
// rotated it will not wander outside the bounds of the tile.
imageView.frame = CGRectMake(aSize/4, aSize/4, aSize/2, aSize/2);
[imageView release];
[imageView setHidden:true];
[self addSubview:imageView];
self.arrowView = imageView;
[self updateArrowPoint];

- (void)updateArrowPoint {
   // if this tile in not an arrow never show it
   if (tileType != arrow) return;
   [self updateArrowPointToIndex:self.index fromIndex:self.location];
}
- (void)updateArrowPointToIndex:(int)toIndex fromIndex:(int)fromIndex {
   // if the tile is in its home location then hide the arrow
   if (toIndex == fromIndex){
      [self.arrowView setHidden:true];
      return;
   }
   [self.arrowView setHidden:false];
   // calculate the angle
   float angle = [self getArrowDirectionToIndex:toIndex fromIndex:fromIndex];
   CATransform3D rotationTransform = CATransform3DIdentity;
   rotationTransform = CATransform3DRotate(rotationTransform, angle, 0.0, 0.0,
      1.0);
    self.arrowView.layer.transform = rotationTransform;
}

- (float)getArrowDirectionToIndex:(int)toIndex fromIndex:(int)fromIndex {
   CGFloat toX = toIndex % dimension;
   CGFloat toY = toIndex / dimension;
   CGFloat fromX = fromIndex % dimension;
   CGFloat fromY = fromIndex / dimension;
   double rise = toY - fromY;
   double run = toX - fromX;
   float angle = atan2(rise, run);
   return angle;
}

+ (CGRect)getRectForLocation:(int)aLocation withDimension:(int)aDimension
      withSize:(int)aSize{
   int x = [TileView getXForLocation:aLocation withDimension:aDimension];
   int y = [TileView getYForLocation:aLocation withDimension:aDimension];
   return CGRectMake(x*aSize+x, y*aSize+y, aSize, aSize);
}
+ (int)getXForLocation:(int)aLocation withDimension:(int)aDimension {
   return aLocation % aDimension;
}
+ (int)getYForLocation:(int)aLocation withDimension:(int)aDimension {
   return aLocation / aDimension;
}

@interface MainViewController : UIViewController <MenuViewDelegate> {
   int currentLevelIndex;
   Level currentLevel;
   int emptyTile;
   TileView *tiles[100];
   MenuViewController *menuViewController;
}
-(void)loadLevel:(int)levelIndex;
@end

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]){
      for (int i=0; i<25; i++) tiles[i]=nil;
      currentLevelIndex =[Game getCurrentLevelIndex];
    }
    return self;
}
-(void)loadLevel:(int)levelIndex {
   currentLevelIndex = levelIndex;
   [Game setCurrentLevelIndex:levelIndex];
   [menuViewController.view removeFromSuperview];
   [self clearTiles];
   currentLevel = [Game getLevelAtLevelIndex:levelIndex];
   for (int i=0 ; i<(currentLevel.gridSize*currentLevel.gridSize)-1; i++) {
      Tile tile = currentLevel.tiles[i]; //[currentLevel getTileAtIndex:i];
      TileView *tileView = [[TileView alloc] initWithIndex:i
         atLocation:tile.location withSize:currentLevel.tileSize
         withDimension:currentLevel.gridSize withType:tile.tileType];
      tiles[i] = tileView;
      [self.view addSubview:tiles[i]];
   }
   emptyTile = currentLevel.gridSize*currentLevel.gridSize-1;
}
- (void)viewDidLoad {
   [super viewDidLoad];
   menuViewController = [[MenuViewController alloc] initWithNibName:
      @"MenuView" bundle:nil];
   menuViewController.delegate = self;
   [self.view addSubview:menuViewController.view];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
   UITouch *touch = [touches anyObject];
   for (int i=0 ; i<(currentLevel.gridSize*currentLevel.gridSize)-1; i++) {
      if ([touch view] ==tiles[i]) {
         if ([self tileCanMoveToIndexFromIndex:tiles[i].location]) {
            CGPoint location = [touch locationInView:self.view];
            CGFloat maxX, minX, minY, maxY;
            CGRect movingTileRect = [TileView
               getRectForLocation:tiles[i].location
               withDimension:currentLevel.gridSize
               withSize:currentLevel.tileSize];
            CGRect emptyTileRect = [TileView getRectForLocation:emptyTile
               withDimension:currentLevel.gridSize
               withSize:currentLevel.tileSize];
            CGRect slideRect = CGRectUnion(movingTileRect, emptyTileRect);
            CGFloat centerPadding = (currentLevel.tileSize) / 2;
            minX = slideRect.origin.x + centerPadding;
            minY = slideRect.origin.y + centerPadding;
            maxX = slideRect.origin.x + slideRect.size.width - centerPadding;
            maxY = slideRect.origin.y + slideRect.size.height - centerPadding;
            if (location.x > maxX)
               location.x = maxX;
            if (location.y > maxY)
               location.y = maxY;
            if (location.y < minY)
               location.y = minY;
            if (location.x < minX)
               location.x = minX;
            tiles[i].center = location;
            return;
         }
      }
   }
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
   UITouch *touch = [touches anyObject];
   for (int i=0 ; i<(currentLevel.gridSize*currentLevel.gridSize)-1; i++) {
      if ([touch view] == tiles[i]) {
         if ([self tileCanMoveToIndexFromIndex:tiles[i].location]) {
            int oldLocation = tiles[i].location;
            int newLocation = emptyTile;
            // only move to the new location if the center of the moving tile is
            // inside the empty tile
            CGRect emptyTileRect = [TileView getRectForLocation:emptyTile
               withDimension:currentLevel.gridSize
               withSize:currentLevel.tileSize];
            if (CGRectContainsPoint(emptyTileRect, tiles[i].center)) {
               [self moveTile:tiles[i] toLocation:newLocation];
               emptyTile = oldLocation;
            }
            else {
               [self moveTile:tiles[i] toLocation:oldLocation];
            }
         }
         break;
      }
   }
   [self testDidWin];
}

Reviewing the utility methods

The moveTile method is used to snap a tile into place. First, it begins the animation. Next, we set the location of the tile. By setting the location index of the tile view, we will internally update its frame. Finally, we commit the animation. This produces our nice little effect of snapping the tile into place:

- (void)moveTile:(TileView*)tileView toLocation:(int)aLocation {
   [UIView beginAnimations:nil context:nil];
   [UIView setAnimationDuration:0.25];
   tileView.location = aLocation;
   [UIView commitAnimations];
   [tileView updateArrowPoint];
}

You will see the method tileCanMoveToIndexFromIndex used a lot. As expected, this method returns true if a tile can make a legal move from its current index to the empty tile index. This is calculated by checking to see if the tile in question is adjacent to the empty tile:

- (bool)tileCanMoveToIndexFromIndex:(int)index {
   int fromX = [TileView getXForLocation:index
      withDimension:currentLevel.gridSize];
   int fromY = [TileView getYForLocation:index
      withDimension:currentLevel.gridSize];
   int toX = [TileView getXForLocation:emptyTile
      withDimension:currentLevel.gridSize];
   int toY = [TileView getYForLocation:emptyTile
      withDimension:currentLevel.gridSize];
   if (fromX == toX && (fromY+1 == toY || fromY-1 == toY) )
      return true;
   if (fromY == toY && (fromX+1 == toX || fromX-1 == toX) )
      return true;
   return false;
}

The method tilesInCorrectLocation checks to see if all arrow tiles are currently seated in their correct location. We can determine this by comparing the tile's index to the tile's location. If this is the case for every arrow tile, this method returns true:

- (bool)tilesInCorrectLocation {
   for (int i=0 ; i<(currentLevel.gridSize*currentLevel.gridSize)-1; i++) {
      TileView *tileView = tiles[i];
      if (tileView.tileType == arrow && tileView.location != i)
         return false;
   }
   return true;
}

The last method we will review in this example is testDidWin. This method is called at the completion of each move (look at the earlier method touchesEnded). If the method tilesInCorrectLocation returns true, we know that the player has completed the level.

If we pass this condition, we see an alert view that proclaims the player's success. Finally, we call loadLevel to automatically load the next level in the sequence. When the player dismisses the alert, he can begin playing the next level:

- (void)testDidWin {
   if (![self tilesInCorrectLocation]) return;
   NSString *message = [NSString stringWithFormat:
      @"You have just completed level %d on to the next level",
      currentLevelIndex+1];
   UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:
      @"Level Complete!" message:message delegate:nil cancelButtonTitle:
      @"OK" otherButtonTitles:nil];
   [alertView show];

   [alertView release];
   [Helper setUserValue:[NSString stringWithFormat:
      @"%d", currentLevelIndex] forKey:@"currentlevel"];
   currentLevelIndex++;
   [self loadLevel:currentLevelIndex];
}

Now you have been over all of the important details of how this application works. This is a simple puzzle app, but it illustrates how easy it can be to bring ideas to life on the iPhone. Most everything else you will find in the source is just the standard scaffolding necessary in all the applications you will build. Here is what the AmuckSlider looks like before any polishing (Figure 3.18).

Figure 3.18. AmuckSlider Game View before polishing

Tip

Try to prevent your code from nesting too deep. Change your logic so that you exit instead of nesting if-statements. You will thank yourself because the code will be much easier to maintain.

Polishing the Game View

So far you have been looking at the source from the unpolished version of this application. Now let's look at ways we can add excitement to the user's experience in the Game View just like we did for the Menu View. Like the Menu View, it does not take much to make the screen look a lot snazzier. Simply adding a few images and animations will do the trick. After a little image treatment you'll see how much more interesting the game board can be.

Here are the things we added to accomplish a better look:

• A background image to the whole Game View

• A semi-opaque background image to each tile

• A much more interesting arrow image

• A glass effect in front of the arrow

• A green glow image that is visible when a tile is seated in its correct location

We also added a few animations to make the game more interesting:

• The arrow spins to its correct location instead of snapping at the end of each turn.

• The arrow fades out as the green glow fades in when the tile is in the correct location.

• A puff effect shoots out from around a tile when it pops into the correct location.

• When a level is completed, the puff effect replays for each arrow tile.

That is about it for polish. You will need to add an application icon before you are ready to publish an application to the App Store. For this application we have chosen to show a small two-by-two grid version of the AmuckSlider game board. You need two images to submit a game: One needs to be 57 × 57 pixels (Figure 3.19) and the other should be 512 × 512 pixels (Figure 3.20).

Figure 3.19. Small 57 × 57 icon used for AmuckSlider

Figure 3.20. Large 512 × 512 icon used by AmuckSlider

Note

Apple suggests that the large icon should not be a stretched version of the small one. The large icon is displayed in iTunes and will not have the quality you will want to attract buyers if it is stretched and dithered. Also, there is a good chance your app will be rejected if you try to submit a stretched image.

Figures 3.21 and 3.22 show the images we used for AmuckSlider.

Figure 3.21. iPhone Home screen with AmuckSlider installed

Figure 3.22. AmuckSlider Game View after several rounds of polishing