iPhone SDK: Learning About Touch Events & Basic Game Animation

One of most common actions used for an iPhone or iPad application is the touch event. An event is not useful if it doesn’t trigger a meaningful action. This tutorial covers how to attach a touch event to a custom button and how to trigger the animation of an object. In the end, the result is a simple on-screen game controller, which can be extended to the limits of your imagination.

Step 1: Create a New Project

Open Xcode and start a new project. Select View-Based Application. Name the app "jumping," so you can follow along easily.

Step 2: Import the Project Resources

After downloading the attached project file, open the "Images" folder. Here you will find all the image resources we need for this project, including three sprite images of Ryu from Streetfighter as created by PanelMonkey. You will need to copy the images into the project resource folder by dragging them from the folder in Finder and into the "Groups & Files" pane in Xcode.

In the Xcode prompt that will appear, be sure to check the box labeled "Copy items into destination group's folder (if needed)."

All the images needed for the project should now be copied to the same folder where the project file is. Now, to keep the resource folder clean, let's group all of the images we just imported together. Select all the images by holding down command and clicking on each file. Now left-click or ctrl + click and select "Group" from the resulting menu. Name the group whatever you wish. I named mine "images."

Build and run the app in the current state. There should be no compiling errors and the simulator should show a plain, grey screen.

Step 3: Modify jumpingAppDelegate.m

Inside jumpingAppDelegate.m, modify the didFinishLaunchingWithOptions method by adding the following line:

The addButton method will be called later in order to, you guessed it, add the button to the view. The first thing to notice is that this is a custom button. Secondly, buttonPressed is the name of a method that will be called when the touch event is fired.

Go ahead and define a temporary buttonPressed method by inserting the following:

- (void)buttonPressed {
NSLog(@"Button pressed");
}

NSLog() will send a message to the console, which can be accessed from the menu, under Run (cmd + shift + R).

Our new button should appear on screen after the view has loaded. In order for this to occur, add the following method:

This method comes by default for view controllers. We're adding a background image and sending the addButton message.

Save your work and then build and run the project. You should see the background image and the red button. If the console window is open, touching the button should display a message in the console via NSLog().

Step 6: Adding a Character to the Screen

In order to initialize our UIImageView object, add the following in jumpingViewController.m, above addButton method:

The first method added removes any images associated to the player object. We use this to clean the previously used animation frames. The second method adds a simple animation to our player object. This will appear while the object is moving.

Build and run. Press the red button now and our character should jump and land back on the ground. That’s it!

Conclusion

Now you should have a basic understanding of some of the most used classed like: UIButton, NSLog, UIImageView and how to execute animations. A similar approach can be applied to add other buttons on the screen, which can trigger different events, so your target object can perform other actions. Do feel free to contact or follow me on Twitter @tudorizer.

Co-founder of Odeon (www.od-eon.com), specialized in UI for very advanced content management and social networks. I’ve been working on both server-side and client-side coding for as long as I remember. Equipped with my trusty Mac and a hefty load of curiosity, I fight a daily battle with lines of code, product development, all resulting in great fun. Mobile platforms, on top of the trending topic, fascinate me because they bring the user experience to a new level.