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:
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.
Advertisement
Open up XCode and create a View Based Application. Name this application iTennis.
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.
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:
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.
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:
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:
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:
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.
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!
im having trouble with the labels connection, when i drag down toward the file owner it only come up with View, and that it there is no player score or computers score, i dont know why this has happened, it works with the images but it wont work with the labels and even the texts
Im having trouble Connecting “New Referencing Outlet” and “File’s Owner”, which is displayed in the video. This is needed to connect the racquets, scores and ball. Obviously this is one of the most vital parts in this application, though I cant do it.
*** Terminating app due to uncaught exception ‘NSInternalInconsistencyException’, reason: ‘-[UIViewController _loadViewFromNibNamed:bundle:] loaded the “iTennisViewController” nib but the view outlet was not set.’
The chances are you followed the tutorial but havn’t set the view connection itself.
If you look through your connections, all your major objects should be connected, but i found with mine that I was missing the “view” connection at the bottom. You want to drag this one to the “view” box in your iTennisViewController.xib window.
Once this is connected, save, and rebuild and run your project!
You da’ man!.. Amazing walk-through Xcode.. As a first time app developer I was pretty intimidated..(still kind of am actually), but this tutorial definitely opened my eyes… Props! and I could help notice the inconsiderate moron that tried to sell your exact game to apple..lol.. hope you have him on his knees begging for mercy.
Question, I’m trying to change the game from portrait to landscape, I’ve already rotated my images and switched interface builder to landscape, but what do I need to alter in the code? P.S. when I simulate it, it is in portrait with the court squeezed into landscape. Thanks!
Hello,
I am new to xcode and c programming and iphone programming. I have sucessfully “built” this tutorial but it says that it “failed to launch simulated application: iPhone Simulator failed to install the application.” I have it set to iPhone Simulator 3.1 and have tried 3.0 as well.
[...] of Brandon’s most popular articles is the “iPhone Game Programming Tutorial” in which he gives step-by-step instructions on how to build an iPhone game called iTennis (a [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] Yeah, that’s right: stolen code. The code came from a tutorial site called iCodeBlog, and the tutorial containing this code was written by Brandon Trebitowski. A company on the App Store called [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] Devs”. La versione originale inglese del tutorial è disponibile a questo indirizzo: “iPhone Game Programming Tutorial, Part 1 – iCodBlog“. I meriti quindi relativamente alla versione inglese, sono del legittimo [...]
[...] might recognize this “game” from a tutorial that I wrote about writing an iPhone game (link). One thing to note here is the company name is BlaBlaIncTech (not iCodeBlog) meaning I did not [...]
[...] Part one explains basic use of xCode and Interface Builder. He also demonstrated some basic game design framework. Part two talks about user interactions. Part three discusses about putting a Splash screen to an applicaiton. [...]
[...] I named this application “Galactic Pong” but in essence it is just a edited version of “iTennis” but the author of that tutorial. You can access that tutorial here. [...]
[...] iPhone Game Programming – Part one of a 4-part series on creating your first iPhone Game. Create a simple pong style game and learn about collision detection, sounds, AI and user interaction in the process. [...]
163 Comments
im having trouble with the labels connection, when i drag down toward the file owner it only come up with View, and that it there is no player score or computers score, i dont know why this has happened, it works with the images but it wont work with the labels and even the texts
please get back to me a soon as possible
Thanks very helpful !
Hi,
how can i modify the app to play against your friends through bluetooth?
Tommy
Hey guys,
Im having trouble Connecting “New Referencing Outlet” and “File’s Owner”, which is displayed in the video. This is needed to connect the racquets, scores and ball. Obviously this is one of the most vital parts in this application, though I cant do it.
All help will be greatly appreciated!
In answer to a lot of the problems with
*** Terminating app due to uncaught exception ‘NSInternalInconsistencyException’, reason: ‘-[UIViewController _loadViewFromNibNamed:bundle:] loaded the “iTennisViewController” nib but the view outlet was not set.’
The chances are you followed the tutorial but havn’t set the view connection itself.
If you look through your connections, all your major objects should be connected, but i found with mine that I was missing the “view” connection at the bottom. You want to drag this one to the “view” box in your iTennisViewController.xib window.
Once this is connected, save, and rebuild and run your project!
Hey Brandon,
You da’ man!.. Amazing walk-through Xcode.. As a first time app developer I was pretty intimidated..(still kind of am actually), but this tutorial definitely opened my eyes… Props! and I could help notice the inconsiderate moron that tried to sell your exact game to apple..lol.. hope you have him on his knees begging for mercy.
N.
Great writeup!
Question, I’m trying to change the game from portrait to landscape, I’ve already rotated my images and switched interface builder to landscape, but what do I need to alter in the code? P.S. when I simulate it, it is in portrait with the court squeezed into landscape. Thanks!
Hi Brandon,
how would you limit the width that the paddles could move ?
so the ball could squeeze between the paddle and the side of the screen ?
thanks
Chimpy
Greta site man! Keep the tutorials coming!
Hello,
I am new to xcode and c programming and iphone programming. I have sucessfully “built” this tutorial but it says that it “failed to launch simulated application: iPhone Simulator failed to install the application.” I have it set to iPhone Simulator 3.1 and have tried 3.0 as well.
@Brandon quicktime movie wont play to show the setting up of the UI!
Hii,
Can u please send me the whole code on my E-mail address that i can study n learn more thing.
Hi Narender,
I will Try to do this And its working. can you please send me the racquet_yellow code….
on my email add please.
27 Trackbacks
[...] iPhone Game Programming Tutorial – Part 1 | iCodeBlog [...]
[...] 33. iPhone game programming [...]
[...] tutorial has three parts, the first part deals with the creation of different folders within the main project folder. The second part [...]
[...] iPhone Game Programming Tutorial: This multipart tutorial offers a way to learn OpenGL and Quartz for iPhone development. [iCode] [...]
[...] of Brandon’s most popular articles is the “iPhone Game Programming Tutorial” in which he gives step-by-step instructions on how to build an iPhone game called iTennis (a [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] Yeah, that’s right: stolen code. The code came from a tutorial site called iCodeBlog, and the tutorial containing this code was written by Brandon Trebitowski. A company on the App Store called [...]
[...] ripoff of code provided by the iCodeBlog, a site known for its free iPhone coding tutorials. The original tutorial, written by Brandon Trebitowski, was apparently compiled and submitted by Peter Sheen of [...]
[...] Devs”. La versione originale inglese del tutorial è disponibile a questo indirizzo: “iPhone Game Programming Tutorial, Part 1 – iCodBlog“. I meriti quindi relativamente alla versione inglese, sono del legittimo [...]
[...] iPhone Game Programming Tutorial – Part 1 [...]
[...] iTennis这个教程还不错，虽然没用上什么华丽复杂的功能，但是一步一步跟着做下去，对于怎么做出一个iPhone游戏还是很有帮助的。这也是我除了Hello World之外第一个自己尝试的iPhone App了。虽然Object-C的挺多语句还不很习惯，也有一些不理解的地方，但确实感受到了，开发iPhone的项目门槛并不高。这也给自己树立了信心，有机会好好学习和开发iPhone软件。如果有时间，我也自己写一个关于自己开发软件的教程。 [...]
[...] might recognize this “game” from a tutorial that I wrote about writing an iPhone game (link). One thing to note here is the company name is BlaBlaIncTech (not iCodeBlog) meaning I did not [...]
[...] Part one explains basic use of xCode and Interface Builder. He also demonstrated some basic game design framework. Part two talks about user interactions. Part three discusses about putting a Splash screen to an applicaiton. [...]
[...] iPhone Game Programming Tutorial: This multipart tutorial offers a way to learn OpenGL and Quartz for iPhone development. [iCode] [...]
[...] iPhone Game Programming Tutorial: Part 1 Here’s a complete tutorial for creating a Pong-like iPhone game. [...]
[...] iPhone Game Programming Tutorial: Part 1 Here’s a complete tutorial for creating a Pong-like iPhone game. [...]
[...] I named this application “Galactic Pong” but in essence it is just a edited version of “iTennis” but the author of that tutorial. You can access that tutorial here. [...]
[...] iPhone Game Programming Tutorial – Part 1 | iCodeBlog (tags: iphone programming) [...]
[...] up XCode and create a View Based Application. Name this application iTennis. After you unzip all of the images, drag them into the project [...]
[...] iPhone Game Programming Tutorial: Part 1 Here’s a complete tutorial for creating a Pong-like iPhone game. [...]
[...] iPhone Game Programming – Part one of a 4-part series on creating your first iPhone Game. Create a simple pong style game and learn about collision detection, sounds, AI and user interaction in the process. [...]