|
This tutorial was created to help you quickly learn iPhone graphics,
animation, and how to handle touch events. My first iPhone app
was BubblePop which taught me all of those concepts, so I have recreated my first initial steps as a simple tutorial to help get
you started in the world of iPhone development. You will also get
your hands dirty with XCode, Objective-C, and the Interface Builder which can be
difficult to understand initially.
We are going to make a bubble bounce around the screen and respond to
touch events. We are going to do this in 15 easy steps and with
less than 15 lines of code! Make sure you already have the latest
XCode and iPhone SDK downloaded and installed. Download the free app
Happy Fun Ball so you can see what we are going to create.
1. Open up XCode and Create a View-based Application called Bubble.
2. Select the Target to be Simulator if not already selected and Run (CMD-R)
the application
 
Congrats, you just made your first iPhone application--It's a
flashlight! Notice the Status Bar and Grey/White background. Exit
the application shows the default white icon.
3. Let's edit the file that tells the iPhone operating system a few
characteristics about your application. Open Bubble-Info.plist
and add a new property to have status bar initially
hidden. Adding a new item is done by click the Plus icon or selecting
Add Row from the context menu. Change the name to "Status bar is
initially hidden" from the combo drop down and make sure it is checked. Now when the program launches you
will immediately see the status bar fade away.
4. Save the following 57x57 PNG image and add into the project Resources
as Icon.png. The iPhone uses images named Icon.png as the default icon
of your app. Also save a 128x128 version of this image called Bubble.png
into Resources which we will be using to animate on the screen.
Right click this image and save as Icon.png.
Right click this image and save as Bubble.png
5. Open BubbleViewController.xib and set the Simulated Interface
Elements/Status bar to None and View/Background to black. Also make sure
the view width and height is 320x480.
 
6. Add a UIImageView from the Library Window into the View. This
is done by dragging the UIImageView from the Library window and into the
View. Bring up the properties for the new image view and set
Image to Bubble.png. Change the Image View size to match the image size
of 128x128 and put into the center of the view. Clicking the two buttons
under Placement will automatically do this.
 
7. Now let's run the project again:
 
Notice the icon now has a border around the icon as well as top glare.
That's Apple's way to make sure your icons look good even if your not a
graphic artist. The view correctly displays with a black background and
our bubble image is displayed in the middle.
8. We need to get access to the Bubble Image from within our code so
let's add a UIImageView called bubble to the BubbleViewController. We
add the IBOutlet keyword so Interface Builder will know we want to use
this as an outlet.
9. Now we need to link the bubble in Interface builder with the image
view defined. Right click the File's Owner to bring up properties then
drag from the circle to the right of the bubble outlet to the Bubble
Image View and release. Interface Builder will now connect this at
program startup so we can programmatically access this image view using
the bubble variable.
10. Add a couple float variables dx and dy to BubbleViewController which
will be used as the direction the Bubble is moving.
11. Now it's time to actually do some real coding! Create an
animation function in the BubbleViewController that will reverse the
direction of the Bubble if it falls outside the view's rectangle. A
simple way to do this is to use function CGRectContainsRect on the
bubble's frame and the view's frame. If the bubble is not
contained by the view then it's outside and we need to reverse the
bubble's direction. Once the directions are calculated we then
move the bubble. The last step is to set a 30 fps timer to call
the animation function again.
12. Now uncomment the viewDidLoad function and initialize our direction
and call the animate function we just created. The viewDidLoad
gets called once the view is loaded from the nib file and all the
outlets are setup so this is a great place to do initialization and
start the animation.
13. Build and run! The bubble should be bouncing around the screen.
14. Let's handle the touch move event so we can manipulate the direction
of the bubble. This code will check if your touch was inside the bubble
and if so calculate a new direction the bubble should follow. This
new direction is based on the previous point you touched to the current
point you are touching.
15. Build and run again. Try grabbing and throwing the bubble!
Additional assignments:
1. Add a bounce sound effect that plays whenever the ball bounces off
the screen edge. Extra credit: Adjust the pitch of sound using
OpenAL to match the speed of impact.
2. Track touch position such that the ball can be caught. If you
touch in an area outside of the ball and then the ball enters that area
it will gravitate and stay on top of it.
3. Add accelerometer support so the bubble direction is effected by
gravity.
4. Add multiple balls and do collision detection between them.
Available on the iTunes App Store
This tutorial was used to create the iPhone application
Happy Fun Ball.
Please download for an example of what can be done with this code.
|
