There are no active ads.

Introduction to iOS Development: Programming Pong (Part 1)

How do you develop apps for iOS? It’s a common question that many computer enthusiasts ask, and one we here at TechnoBuffalo hope to answer with this series of posts.

Learning how to develop software can be one of the most intimidating prospects for the average computer user, and with the growing saturation of applications in mobile marketplaces, it is becoming increasingly difficult to get your work noticed. That’s what this series is for, helping you learn iOS development from a conceptual perspective. No prior knowledge of computer programming will be necessary. Over the coming weeks, we’ll examine the iPhone’s ability to deliver immersive, intuitive content, a unique opportunity for both developers and consumers.

Today, we’ll begin programming a fully-functional recreation of Pong for iOS devices using game logic as well as some neat animation. To ensure that there isn’t too much information to absorb, we have divided this tutorial into parts that will be released weekly.

1. First, we must open up Xcode 4, Apple’s latest Integrated Development Environment. Select New Project and follow the on-screen prompts until you are met with the template page. Select View-based Application and make sure that you are targeting the iPhone.

2. After following Xcode’s instructions on setting up the application, entitle the program Pong and save the file in a convenient place, preferably one that can be easily remembered and accessed in the future.

3.  For this tutorial, you will need a few of our images to use in your program. Instead of flustering you with them here, we have used Dropbox to make the images available. Here is the link: http://dl.dropbox.com/u/11416615/PongApplication.zip

4.  Now, you’ll need to drop all of the images you just grabbed into your project. You can do this by simply dragging from Finder into the application’s window. I created a group under the Supporting Files tab, but you can feel free to organize your window as you wish.

5.  Though we’ve never actually discussed its use, the property list, which is typically abbreviated to p-list, is a very useful file that can be found under the resources tab. Head on over there and add a property. Scroll until you find the option that will hide the status bar at launch and select the box to the right. Then, you’ll need to change what interface orientations are allowed in this application. You’ll want to select landscape left and landscape right.

6.  Next, you will head over to your initialization file of your view controller to create some IBOutlets (PongViewController.h). IBOutlets help you to connect code you write with what you will eventually create in Interface Builder. This part gets a bit tedious. Grab a snack if you’re feeling bored.

——————————————————–

——————————————————–

7.  Without Interface Builder, our application would not exist! Head on over to the applications interface file (PongViewController.xib). Click on the window itself and head on over to the attributes and then change the orientation to portrait. Change the status bar to unspecified. Drag an Image View into your project’s window. Check out this view’s attributes and change the image to Court.png.

8.  Next, you will need to drag out another image view. This time, you’ll have to be precise when sizing the image, as this piece will become our paddle. The image that we have provided you with is ten pixels wide and forty pixels tall, if you would like to use that as a point of reference. Make sure to turn the opaque setting off. Repeat this process for the other side as well.

9.  Now, you will need to click on each paddle and head to the Connections pane. Click on New Referencing Outlet and hold control while dragging your cursor to File’s Owner. Make sure to select the appropriate option, either computer or player.

10. Create another Image View, but this time resize the image to be 15 x 15. This will be the ball. Place it in the center of the interface. Again, turn the opaque option off. Then click on the image, control drag from New Referencing Outlet to File’s Owner and select the ball.

That’s enough for this week, be sure to check back next week for the next installment in the creation of a Pong-esque game.

Questions?

If you have any questions about the topics discussed in this lesson, feel free to voice them in the comments below. We will do our best to ensure that you have a relatively painless experience developing for iOS. Stay tuned for the next installment of this series, which is released weekly.

To read previous installments from this series, check the links below.