iPhone Game Programming Tutorial Part 3 – Splash Screen

March 18th, 2009 Posted by: - posted under:Tutorials

Ok, So it’s time to wrap up this series. Today I will be showing you how to add a few “bells and whistles” that will make your game more complete. Let’s start by adding a splash screen to your game (Again I truly apologize for the lack of graphics skillz. Photoshop and I are not friends).

Creating a Splash Page

We will be adding a splash page that will fade out into our main game screen. Start by downloading this image and adding it to your project’s Resources Folder. Make sure you check the box to copy this image to the project’s directory.

splash

Now we need to add a View Controller to our project that will handle the Splash View. Go ahead and add a new file to your project that is a UIViewController subclass. Name this file SplashViewController. Make sure you check to create the .h file as well.

screenshot_01
Next, we need to change our AppDelegate to load this view controller instead of our main view controller. Open up iTennisAppDelegate.h and change it to look like this:
screenshot_02
We are basically replacing iTennisViewController with SplashViewController. Next, open up iTennisAppDelegate.m and change it to look like this:
screenshot_03
Again, all we are really doing is changeing iTennisViewController with SplashViewController. This is because we want to load the splash page initially and not the main game screen. One main difference to note here is we are allocating a new instance of the SplashViewController. We didn’t have to do that with the iTennisViewController because it was being loaded from a nib and our application initialized it for us. Since we are building SplashViewController programatically (without a nib), we need to instantiate it. Next, let’s implement the Splash View. Open up SplashViewController.h and add the following code:
screenshot_04
Let me explain what’s going on here. First, we see an NSTimer. This will be used to display the splash page for a certain amount of time before fading to our main game screen. Next, there is a UIImageView. This will simply be the imageview of our splash image.
Finally, we see the iTennisViewController. This is the view controller that we replaced inside of our application’s delegate. We will be loading it from our splash view. Now, open up SplashViewController.m and add the following code:
screenshot_05
This is just synthesizing all of our properties. Now, add the following code to our loadView method:
screenshot_07
Lot’s of new code here. First off, since we are loading this view programatically without a nib, we have to create the view. So we get the frame that the application is running in and use it to allocate a new view. Then we set the view of the SplashViewController to this newly created view. We have to create the frame to basically tell the application to create a view that is 320×480.
The next thing we do is create the splashImageView from the Splash.png image. We also need to create a frame for this images. Think of a frame as an empty container that we will put our image in. Next we add the imageview to our main view. This will display it immediately.
Next, we initialize our view main controller by passing it the nib it will load from. Next, the view’s alpha transparency is set to 0.0. This makes it completely invisible. Finally, we add it to our view. Note that it is on top of the splashimageview but is not visible because the alpha transparency is set to 0.0.
Finally, we start the timer. This will show the splash screen for 2 seconds before calling the “fadeScreen” method. Let’s implement the fadescreen method. I must note that I took the fadescreen method from this post.
Add the following code:
screenshot_08
Lots of animation stuff. Pretty well commented so I wont go into it too much. Basically, we fade the view out in fadeScreen, then it calls finishedFading when its done. Finished fading fades the view back in as well as fades viewController’s view back in. It will now display our main view. Make sure you remove the splash from the superview or you will get a weird transition.
That’s it for the splash page. You can Build and Go to see the view transition from a splash to the main game.

That’s all for today. Join me next time when I will show you how to add audio to your game. If you have any questions or comments, feel free to leave them in the comments section or write me on Twitter.

You can download the source for this tutorial here

Happy iCoding!