iPhone Programming Tutorial - Animating a Ball Using An NSTimer

I 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…

You can download the source code here .  If you have any comments or questions, feel free to leave them in the comments of this post.  You may also post them in the forums. Happy iCoding!

iPhone App Advertising Now Available on iCodeBlog.com

After some great input from many of iCodeBlog’s users, I have finally implemented iPhone application advertising on iCodeBlog.  If you notice, in the banner area of the screen, there are six ad spaces to be filled.  Here are the criteria for putting an ad on iCodeBlog.

• It must be an add for an iPhone app.  This means the link must take the users directly to the app’s page on iTunes.
• The icon must be 58 x 58. (Please use your apps icon)
• The ad price is $20/month.  This is an introductory price for a limited time only (Wow, I sound like a McDonalds commercial).
• Once you submit your app, it will be pending approval.  Once approved, it will appear for 1 month.

If you have any questions, comments, or concerns don’t hesitate to post them in the comments section of this post.

iPhone Programming Tutorial - Using UITouch To Drag An Image Around The Screen

In this tutorial, I will be showing you how to use UITouch to get the location of where a user touches on the screen.  We will be using this knowledge to drag a UIImageView around.

Learning how to use UITouch is the first steps in creating applications that are not navigation based (or don’t only use Apple’s built in components.  Later on, we will begin some basic game development that will utilize UITouch.

You will need this image for the tutorial

In this tutorial, we will perform the following tasks:

Adding An Image To The Project

Adding images to your projects is very simple.  All you do is drag them from some folder into your project’s directory in XCode.  XCode will prompt you to add the image to the project and will also ask you if you want to copy the image to the project’s directory.  You can use images for a variety of things in XCode. From inserting them in to UIImageViews to using them for UITabBarItems.

Declaring an IBOutlet for the Image

We create an IBOutlet for the UIImageView so that we can interface with it.  This will allow the code to send messages to the interface.  In this example, we need this to move the image to the location of the touch.

Adding a UIImageView

UIImageViews serve one purpose, and that is to hold an image.  After dragging one on to your view, populating it with an image is easy.  Any images that you have added to your project will show up in the “Image Dropdown” under the Attributes Inspector section for the UIImageView.  Simply select one of these images and watch it appear in your view.

Connect The UIImageView to the IBOutlet

This is the step that connects interface to code.  We simple drag from “new referencing outlet” to the “File’s Owner” object and click on the word “cloud”.  The connection has been made.

Implement the TouchesBegan Method

In this step, we are overriding a method that Apple has already created so that we can add our own functionality.  This method will automatically get called every time the user touches inside of the view.  Notices that it takes an NSSet of touches.  This is a set contains information about every touch on the screen.  So if the uses touches the screen with 2 fingers, this set will contain two touch objects.  For this tutorial we are only interested in one.

Once we get the touch location, we set the center of the image to that location.  The image will now move to any spot that gets touched.

Implement The TouchesMoved Event

This method must be implemented because TouchesBegan only gets called one time when the user touches the screen.  TouchesMoved gets called every time the user “drags” their finger around.  To not duplication code, we just told this method to call the TouchesBegan method because we already wrote all of the movement code in it.

Thank you for reading this tutorial.  If you have any questions or comments, feel free to leave them in the comments section of this post.  You can also download the sample code here.  Also, if you haven’t already done so, subscribe to the RSS feed here as I will be adding new tutorials at least once a week.  Happy iCoding!

Application Advertising on iCodeBlog.com

Now that iCodeBlog has been getting a good amount of traffic, I thought it might be time to allow the developers to advertise their apps on the site.  However, I first wanted to make sure that there was sufficient interest.  Also, I wanted to price the ads appropriately.  So, I decided to create a poll to allow you guys decide the pricing scheme.  A bit about the site before you guys place your vote…
 

• Currently, the site is receiving an average of 1,500 unique visitors/day (and growing)
• ~600 RSS subscribers
• It’s the #1 result in Google for “iPhone Programming“
• There would be no more than 6 ads sold/month
• The ads would be icons and would link to their download page in the app store
• They would appear in the top portion of the site (above the fold) near my banner somewhere
• Best site in the World!

iPhone Programming Tutorial - Using A TabBarView To Switch Between Views

In this tutorial I will show you how to develop a UITabBarController which contains a custom UIView from one of the tabs and a UINavigationController with a UITableView dictated byUISegmentControl in the second tab.

This tutorial was contributed by the user cruffenach.  You can check out his website at http://losectrl-gaincommand.com.

If you would like to contribute a tutorial to iCodeBlog.com, contact me brandon@icodeblog.com

The final product of this tutorial should look something like this:

Setting up the User Interface

The first thing we need to do is open up MainWindow.xib. This will launch interface builder and show what our UITabBarController looks like. In the first tab we see a custom UIView that can be changed however we like, but we are more concerned about the second tab.

Clicking on the TabBarController within the instance window of interface builder and then looking to the Inspector will let us set the type of view controller which each tab will be displaying. The first tab uses a ViewController, and for the second tab we want to use a Navigation Controller type because we will be utilizing the navigation bar to hold our segmented control.

Once in the second tab, we will drag a UISegmentedControl out of our library and onto the navigation bar. The UISegmentedControl will change its look depending on the context you place it in. Here we will essentially be making the TitleView of the NavigationItem a UISegmentedView. This will be important when we get into our code.

With that done, we click on the view of the second tab and set it to be identified as a SegmentedTableViewController or type UITableViewController. We will create that class later in xCode. With that set we drag in a UITableView and connect its DataSource and Delegate methods to our view controller which has now been defined as SegmentedTableViewController. That is all we need to do in interface builder.

Going into xCode we do not need to modify any of the generated classes, however we do need to create a new one. Hit Apple + N and create a new UITableViewController called SegmentedTableViewController. This class will have the datasource methods for a UITableView all ready.

In this class we are going to need an int called selectedSegment, this will be updated to represent which segment is selected. Within the main we need to uncomment the viewDidLoad method and enter the following code.

This code gets the UISegmentedControl from the titleView of the navigationItem, and modifies it to add an action so that when the selected segment changes a method called segmentAction is called. The selectedSegment int is set to the initially selected segment and the titleView is reset with the modified UISegmentedControl.

Next we need to create the method which the UISegmentedControl will call. Here is the code for that method, following the same syntax as a IBAction Method.

This code takes the sender which will be out UISegmentedControl and gets the new selectedSegment from it and sets out variable to that value. Finally it tells the UITableView that something has happened and the data in the table needs to be reloaded.

The final steps is to tell the UITableView that is will be displaying 100 cells and telling the returned cell for each row to have some text which is a product of the selected segment. I chose to have each cell read “I AM CELL (selectedSegment * indexPath.row)”. This essentially means that when segment 0 is selected every cell will read.

I AM CELL 0

When segment 1 is selected the cells will read.

I AM CELL 0

I AM CELL 1

I AM CELL 2

….

When segment 2 is selected the cells will read.

I AM CELL 0

I AM CELL 2

I AM CELL 4

I AM CELL 6

….segment. I chose to

The code to make this happens is…

You can download the source for this tutorial here. icodesegmentcontrol