January 15th, 2009
Posted by: brandontreb (ELC)
- 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:
Â

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.
  Â
Â
Â
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!
Pingback: iPhone Dev - Games/Apps - Top Bookmarks « Java Developer / Fledgling iPod Touch Developer
Pingback: iPhone development Tutorials « The Brook Song - à¦à¦°à§à¦£à¦¾à¦° গান
Pingback: iPhone game development guide: On the go tutorial | iPhone Footprint
Pingback: 100 реÑурÑов Ð´Ð»Ñ iPhone-разработчиков - Краковецкий ÐлекÑандр: заметки прогÑ
Pingback: Developer Steals iPhone App Code, Submits As Own | KRAPPS | a different and funny iPhone app review site
Pingback: Apple Bloog » Blog Archive » Lifted tutorial code winds up in $0.99 App Store tennis game
Pingback: Lifted tutorial code winds up in $0.99 App Store tennis game | iPhone Firmware
Pingback: Lifted tutorial code winds up in $0.99 App Store tennis game | InfoFork.com
Pingback: AppleUsers.org News » Lifted tutorial code winds up in $0.99 App Store tennis game
Pingback: iWyre
Pingback: Apple User’s Blog » Lifted tutorial code winds up in $0.99 App Store tennis game
Pingback: Lifted tutorial code winds up in $0.99 App Store tennis game » Shai Perednik.com
Pingback: Free Tutorial code sold as 99c App on the AppStore » iPhonePulse
Pingback: Lifted tutorial code winds up in $0.99 App Store tennis game
Pingback: DevTutorial #13 – Creiamo il nostro primo gioco, Pong! (Parte I) - Bubi Devs
Pingback: Quick Post: iPhone Game Development Tutorials | Thomas Nicholson iPhone Developer Newbie
Pingback: iPhone/iPod touch游æˆå¼€å‘ | SHUGUO
Pingback: Look Familiar? | Iphone Study Blog
Pingback: iPhone Game Programming Tutorial Suggested Link « Uright Tech Blog
Pingback: Some Great Resources! | My First iPhone Application
Pingback: The Ultimate Toolbox for iPhone Development - Creative Solutions
Pingback: Enlaces para desarrollar en el iPhone | El mundo de IMD
Pingback: My first iphone game! « Learning techie
Pingback: CasdraBlog » Blog Archive » links for 2010-01-29
Pingback: iPhone Game Programming Tutorial – Part 1 « Evolving Minds
Pingback: The Ultimate Toolbox for iPhone Development | c'est la vie
Pingback: The Ultimate Toolbox for iPhone Development | c'est la vie
Pingback: The Complete iPhone Development Toolbox | iPhoneApp Dev Blog
Pingback: Weekly Digest for May 2nd — Hello. My name is Václav VanÄura.
Pingback: Introduction to iPhone Applications | silenceIT Web Design and Marketing, Rich Internet Applications, e-Business IT |
Pingback: iPhone uygulamaları geliÅŸtirmek isteyenler için ücretsiz 100 kurs ve rehber « Kerem PALABIYIK
Pingback: iTennis – iPhone Game Tutorials – iPhone App Academy
Pingback: A period of learning (Part 2) « Animal Tracker (iPhone Game) Blog
Pingback: App development per iOS, i tutorial - TheAppleLounge
Pingback: iPhone Game Programming Series: Blackjack – Part 1: The Deck | iCodeBlog
Pingback: iOS4 Jailbreak » iPhone Game Programming Series: Blackjack – Part 1: The Deck
Pingback: iPhone Game Programming Series: Blackjack – Part 1: The Deck | iCode
Pingback: iConverged » Writing a professional looking Bricks game for the iphone (Part I)
Pingback: iPhone Game Programming Series: Blackjack – Part 1: The Deck | Iphone tutorials
Pingback: iConverged » Tutorial: iPhone Game Programming- professional Bricks (Part I)
Pingback: brandontreb.com » New iPhone Game Programming Tutorial Post On iCodeBlog
Pingback: 100 cursos gratuitos y tutoriales para aspirantes a desarrolladores de Apps para iphone « Programacion « VENDO MI APPLE