I have noticed recently many people wanting to create games for the iPhone and are unsure where to start. A common misconception is that you must use OpenGL ES to create any game with graphics. I am going to show you today how you can do some simple animation by moving a ball around the screen. We will not be using OpenGL ES to move the ball. We will simply be using an NSTimer and a UIImageView.

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:

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!