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…
