iPhone Game Programming Tutorial – Part 1

January 15th, 2009 Posted by: - posted under:Tutorials

This is the first in a multipart series where I will be teaching you to create an iPhone game from the ground up. As many of you know, OpenGL and Quartz have quite a steep learning curve. This tutorial will simplify the development process and not use either one of those technologies. For our graphics, we will simply use UIImageViews.

In this tutorial series, I will teach you about every aspect of developing an iPhone game. The game will include graphics, sounds, game mechanics, and even some simple computer AI.

The game we will be creating is called iTennis. It is essentially Pong with a tennis theme. It will follow all of the same rules and mechanics of Pong. I chose this as a first game tutorial as iTennis does not require any special animation. If there is significant interest, I will move on to a more complex game in a later series. Here is a screenshot of the game we will be making:

screenshot_011

Let’s get started… Here are the images you will need for the project. (I know my Photoshop skillz are weak, so be easy on me). Click the link below to download the zipped images.

iTennis_Images.zip

Open up XCode and create a View Based Application. Name this application iTennis.

screenshot_01
After you unzip all of the images, drag them into the project Resources folder. After you have done this, the resources folder should look like this.
screenshot_02
Now we are ready to start coding. We need to first establish our IBOutlet connections so that we can interact with our images in code. We will also add some of the game variables that we will be using in this tutorial. Open up iTennisViewController.h and add the following code:
screenshot_05
As you can see, we have quite a few IBOutlets. This is because there are many objects we need to interact with. For now, ignore the ballVelocity and gameState variables. Now, we are ready to build our interface. Double click on the file iTennishViewController.xib to open it up inside of Interface Builder. Here is a video of me setting up the interface.
Now that you have made the connections, close Interface Builder and return to XCode. We need to set up some constants. You can hardcode these values in somewhere, but making them constants makes them easier to change when you are tweaking the mechanics of your game. Open up iTennisViewController.m and add the following code.
screenshot_06
Let me explain the purpose of the constants. The first 2 are game states. We use these to determine what is to be shown on screen. Is the game paused, is it running, is it at the title screen? We will add more states later on in the game. The next 2 variables are speeds for the ball to travel. Since the game is 2D, the ball can have an X and Y speed to make up its velocity vector. The next line synthesizes the variables we will use to create their getter and setter methods automatically.
Now let’s write the viewDidLoad method. Add the following code:
screenshot_07
First, we are setting our game state to a paused game state. This is so the game doesn’t start right away when the view loads. Next, we create a vector for the ball’s velocity. Adjust the constants that we defined earlier for a faster or slower ball speed. Finally, we create an NSTimer instance. The first parameter is the timestep. We have set the time step to 0.05 seconds. Adjusting this will change the speed of the entire game. Next we set the target. This is telling the timer where the callback is located. The callback is the next parameter. Basically, we are telling the timer to call self.gameLoop every 0.05 seconds. We don’t need to worry about the userInfo param. The last parameter just tells the timer to repeat.
Now that we have initialized our game, let’s create the game loop. Add the following method:
screenshot_08
First, we are checking to see if the game is in a running state (we don’t want to move the ball in a paused state). If the game is not running, we will show the tapToBegin label. This is just the label defined earlier that tells the user to tap the screen to begin.
If the game is running, we start by moving the ball according to its velocity vector. The next few lines do some bounds checking. If the ball hits the side of the screen, we want to reverse its velocity so that it “bounces”. Without this code, the ball would fly off the screen.
The last bit of code we will need to write is the touchesBegan method. We will use this method to start the game when the game is in a paused state. Add the following code:
screenshot_09
What this does is first checks to see if we are in a paused state. If so, we hide the tapToBegin label and set the game in a running state. This will get the game running. Eventually, we will write the code to control the player paddle in this function.
Finally, being good iPhone developers, we need to clean up the resources that we allocated. Add the following code to the dealloc method.
screenshot_10
That concludes part 1 of our game development tutorial series. If you have any questions or comments, feel free to leave them in the comments section of this post. You can download the source code here. Happy iCoding!