Advertisement

iPhone SDK: Learning About Touch Events & Basic Game Animation

by

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:

This will allocate a new view controller. This step is necessary because we won’t be using Interface Builder to create our view for us.

Step 4: Modify jumpingViewController.h

In the view controller header file (jumpingViewController.h), inside the interface, declare a new property by adding:

Then, before @end, add:

This will allow us to use "player" as a class property for an image.

The header file should now look like this:

Step 5: Modify jumpingViewController.m

Our next step is to add the graphical and interface elements to this view.

Open the jumpingViewController.m file and delete the existing commented methods. Leave the ones that are not commented.

At the top, after @implementation jumpingViewController, add:

Update the dealloc method to the following:

Next, insert the following method:

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:

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:

This code will both initialize a UIImageView object and add it to the main view. The normalStance method will turn out to be useful later.

We will now send the initPlayer message to the main view. We do this by modifying the loadView method as follows:

Build and run. A character appeared on the screen, right?

Step 7: Making Our Character Jump

Now for the fun part. Above addButton, add:

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.

After the jumpStance method, add:

This method actually moves the player object. First it changes the image set, then moves it by 40 pixels vertically.

The line:

Adds an easing effect to the animation, so it looks more realistic.

Change the buttonPressed method to look like this:

Build and run. By pressing the button now, the character will jump, but will remain frozen in mid air. Good progress! Let’s get him down now.

Step 8: Finalizing the Character Animation

Above the previously added jump method, add:

This method sets the character back to the normal state and moves it back to the initial position.

Now, change the jump method to look like:

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.

Advertisement