The code for this could be used in many game applications.  Games such as pong, brick breaker, etc… I will soon do an iPhone game programming tutorial series.  For now, here is a quick tutorial to get you started and excited…

You will need to download this image for this tutorial:

[qt:http://icodeblog.com/wp-content/uploads/2008/10/Animation.mov 640 416]

Here are the steps involved in creating this application:

Start With a View-Based Application

We will not need any navigation components for this app.  All we need is a view that we can add a UIImageView to.

Add The Ball Image To Your Project

You can use any image you would like for this.  I used my mad skills in Photoshop to create a shiny red ball for you to use.  This will be the image that we will be “bouncing” around the screen.

Add An IBOutlet For the Ball

This step is necessary as it allows us the link the ball we add to the view in Interface Builder to the code.  This is so we can update the position of the ball at each timestep.

Add The Ball To The View In Interface Builder

All we need to draw the ball on the screen is a UIImageView.  Since we added the ball.png file to our project, it should appear in the drop-down in the attributes section of the UIImageView.  Also, at this step, we need to connect the UIImageView to the ‘ball’ variable by dragging from ‘new referencing outlet’ in the connection inspector of the UIImageView to the ‘File’s Owner’ object.

Add The Code To Initialize The NSTimer

An NSTimer is very simple to use.  It simple requires that you specify an interval (I used .05) and a function to call at each time-step.  The function we are calling in this tutorial is the onTimer function.  This is a function that we create and will contain the logic to move the ball.

Moving The Ball

This code is all fairly straight forward.  First we add the pos.x and pos.y values (14.0 and 7.0) to the center of the ball object this causes the ball to move diagonally.  Next we simply check to see if the ball has collided with the wall.  If the ball does collide with the wall, we simple reverse the pos.x or the pos.y.

That concludes the animation tutorial.  I hope that you go out an make lots of great games after this… Soon, I will start another tutorial series where I we will be creating a full blown game.  If you have any suggestions for games, please leave them in the comments.  Make sure that they are fun but not too in depth, we need to limit the series.  Think in terms of pong, asteroids, etc…

You can download the source code here .  If you have any comments or questions, feel free to leave them in the comments of this post.  You may also post them in the forums. Happy iCoding!

[qt:http://icodeblog.com/wp-content/uploads/2008/10/UITouch.mov 640 416]

In this tutorial, I will be showing you how to use UITouch to get the location of where a user touches on the screen.  We will be using this knowledge to drag a UIImageView around.

Learning how to use UITouch is the first steps in creating applications that are not navigation based (or don’t only use Apple’s built in components.  Later on, we will begin some basic game development that will utilize UITouch.

You will need this image for the tutorial

In this tutorial, we will perform the following tasks:

Adding An Image To The Project

Adding images to your projects is very simple.  All you do is drag them from some folder into your project’s directory in XCode.  XCode will prompt you to add the image to the project and will also ask you if you want to copy the image to the project’s directory.  You can use images for a variety of things in XCode. From inserting them in to UIImageViews to using them for UITabBarItems.

Declaring an IBOutlet for the Image

We create an IBOutlet for the UIImageView so that we can interface with it.  This will allow the code to send messages to the interface.  In this example, we need this to move the image to the location of the touch.

Adding a UIImageView

UIImageViews serve one purpose, and that is to hold an image.  After dragging one on to your view, populating it with an image is easy.  Any images that you have added to your project will show up in the “Image Dropdown” under the Attributes Inspector section for the UIImageView.  Simply select one of these images and watch it appear in your view.

Connect The UIImageView to the IBOutlet

This is the step that connects interface to code.  We simple drag from “new referencing outlet” to the “File’s Owner” object and click on the word “cloud”.  The connection has been made.

Implement the TouchesBegan Method

In this step, we are overriding a method that Apple has already created so that we can add our own functionality.  This method will automatically get called every time the user touches inside of the view.  Notices that it takes an NSSet of touches.  This is a set contains information about every touch on the screen.  So if the uses touches the screen with 2 fingers, this set will contain two touch objects.  For this tutorial we are only interested in one.

Once we get the touch location, we set the center of the image to that location.  The image will now move to any spot that gets touched.

Implement The TouchesMoved Event

This method must be implemented because TouchesBegan only gets called one time when the user touches the screen.  TouchesMoved gets called every time the user “drags” their finger around.  To not duplication code, we just told this method to call the TouchesBegan method because we already wrote all of the movement code in it.

Thank you for reading this tutorial.  If you have any questions or comments, feel free to leave them in the comments section of this post.  You can also download the sample code here.  Also, if you haven’t already done so, subscribe to the RSS feed here as I will be adding new tutorials at least once a week.  Happy iCoding!