This is part of an ELC Tech Network

iPhone Game Programming Tutorial Part 3 – Splash Screen

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.

Advertisement

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!

This entry was posted in iPhone Game Programming, iPhone Programming Tutorials, iphone. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

93 Comments

  1. Posted July 17, 2009 at 7:57 am | Permalink

    These are great tutorials! I was going to go farther in depth to them by figuring out the code lol, but ever since the website move a lot of the images in the newer tutorials are gone, so you might want to upload them again..

    Thank You for all the time and work you put into all these tutorials to help newbies like me =D

    Techy

    • Toni
      Posted March 12, 2010 at 3:54 pm | Permalink

      How should the source code be if i don’t want a fader to go from the splash screen to the mainscreen? I want to tap the splash screen to go to the mainscreen.

  2. kyle
    Posted August 16, 2009 at 7:30 pm | Permalink

    Thanks for putting the time into these great tutorials!

  3. Posted October 5, 2009 at 1:29 pm | Permalink

    tnndxqocdcku

  4. Posted October 7, 2009 at 11:42 pm | Permalink

    По правде говоря, сначала не очень то до конца понял, но перечитав второй раз дошло – спасибо!

  5. Posted October 8, 2009 at 5:00 am | Permalink

    respect

  6. Posted October 9, 2009 at 7:59 am | Permalink

    Спасибо! Пригодится…..

  7. Posted October 21, 2009 at 11:54 pm | Permalink

    Занятно пишете, жизненно. Все-таки, для того, чтобы делать по-настоящему интересный блог, нужно не только сообщать о чем-то, но и делать это в интересной форме:)

  8. Posted October 22, 2009 at 2:41 am | Permalink

    Чем-то это отдает напеванием свирели в предновогоднюю ночь, чем то похоже на праздникк, чем-то на казино… Ну сами продолжите дальше

  9. Posted October 22, 2009 at 5:48 pm | Permalink

    The court should try to determine beforehand, as best it can, if the victim is subject to battered women’s syndrome. ,

  10. deepp
    Posted November 6, 2009 at 3:02 am | Permalink

    Hi Brandon,i tried using this

    - (void)loadView
    {
    // Init the view
    CGRect appFrame = [[UIScreen mainScreen] applicationFrame];
    UIView *view = [[UIView alloc] initWithFrame:appFrame];
    view.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
    self.view = view;
    [view release];

    logoImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"logo.jpg"]];
    logoImageView.frame = CGRectMake(0, 0, 320, 480);
    [self.view addSubview:logoImageView];

    splashImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"splash.jpg"]];
    splashImageView.frame = CGRectMake(0, 0, 320, 480);
    [self.view addSubview:splashImageView];

    ballImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"menu.jpg"]];
    ballImageView.frame = CGRectMake(0, 0, 320, 480);
    [self.view addSubview:ballImageView];

    viewController = [[Nine_WarriorsViewController alloc] initWithNibName:nil bundle:[NSBundle mainBundle]];
    viewController.view.alpha = 0.0;
    [self.view addSubview:viewController.view];

    splashCounter =0;

    timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(fadeScreen) userInfo:nil repeats:YES];
    }

    as i am trying to show logo ,splash and then menu page but this is working fine but i am trying to do following in

    - (void) finishedFading
    {
    splashCounter++;
    [UIView beginAnimations:nil context:nil]; // begins animation block
    [UIView setAnimationDuration:0.75]; // sets animation duration
    self.view.alpha = 1.0; // fades the view to 1.0 alpha over 0.75 seconds
    viewController.view.alpha = 1.0;
    [UIView commitAnimations]; // commits the animation block. This Block is done.

    if(splashCounter == 1)
    {
    [logoImageView removeFromSuperview];

    }
    else if(splashCounter == 2)
    {
    [splashImageView removeFromSuperview];

    }
    else if(splashCounter == 3)
    {
    [ballImageView removeFromSuperview];
    [timer invalidate];

    }

    //[timer setFireDate:[NSDate dateWithTimeIntervalSinceNow:1]];
    //timer1 = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(fadeScreen) userInfo:nil repeats:NO];
    }

    but the above method is not working properly as its suppose to delete logo image then splash and then should show menu image

    but it keeps showing menu image all the times with fading effect…..where am i doing wrong??? please help

  11. deepp
    Posted November 6, 2009 at 4:52 am | Permalink

    ohh i got it….its my silly mistake…. i was drawing it other way around….its solved…

  12. Tommy Myers
    Posted November 21, 2009 at 7:36 am | Permalink

    How do i make the first and second image the same amount of seconds of showing?

  13. anonymous
    Posted January 12, 2010 at 9:36 pm | Permalink

    Mine doesn’t open properly please help

  14. anonymous
    Posted January 12, 2010 at 9:58 pm | Permalink

    for some reason my pics disappear according to alert Help???!!!

  15. Phil
    Posted January 31, 2010 at 1:13 pm | Permalink

    Thank you very, very, very much for taking the time to post these tutorials, they are a great help.

  16. Chris
    Posted February 1, 2010 at 6:40 pm | Permalink

    I’m getting this error:
    iTennisAppDelegate.m:18: error: ‘SplashViewController’ undeclared (first use in this function)

    Help?

  17. Chris
    Posted March 1, 2010 at 1:02 pm | Permalink

    I am not able to get the project to launch in the build and run, as soon as the splash screen launches it crashes, I have gone back over all of the tutorials and everything is correct, I have even downloaded your source code and it does the same thing as well i don’t know if I am doing something wrong but I cannot get the product to launch.

    • Posted May 15, 2010 at 9:00 pm | Permalink

      Make sure and review the use of capital letters. Look at your code and make sure the color of the words match the example. If not there is an error, you might need to retype that section.

  18. Posted March 10, 2010 at 2:37 pm | Permalink
  19. Posted March 11, 2010 at 4:35 pm | Permalink

    You don’t need to do all this just for a splash screen. You can just post in your Default.png into Xcode, and then in the ApplicationDidFinishLaunching; method, you would put [sleep 5] (to sleep 5 seconds). During this sleep period, Default.png is shown.

    Of course, if you wanted it to fade out, then your method is better, but for a basic splash screen, you only need one line of code.

  20. Posted March 13, 2010 at 12:52 pm | Permalink
  21. Posted March 15, 2010 at 11:06 am | Permalink
  22. Posted March 16, 2010 at 9:15 am | Permalink

    SEO

  23. Posted March 25, 2010 at 2:24 am | Permalink
  24. Posted March 27, 2010 at 2:32 pm | Permalink
  25. Posted March 31, 2010 at 11:13 am | Permalink
  26. Posted April 27, 2010 at 7:53 am | Permalink

    В рот мне ноги, глупая новость

  27. Posted April 27, 2010 at 4:38 pm | Permalink

    Автор неутомим

  28. Posted April 28, 2010 at 5:45 am | Permalink

    Не поспоришь, веселая новость

  29. Posted May 7, 2010 at 8:25 am | Permalink

    Честное слово, неуместная заметка

  30. Posted May 8, 2010 at 5:43 am | Permalink
  31. Posted May 17, 2010 at 8:59 am | Permalink

    Не спорю, получилась статья

  32. Posted May 17, 2010 at 1:54 pm | Permalink

    Чего и следовало ожидать, написавший кошерно накропал.

  33. Posted May 18, 2010 at 1:28 pm | Permalink

    Черт, плохая статья

  34. Posted May 18, 2010 at 3:27 pm | Permalink

    Должен признать, афтар ништяк опубликовал!

  35. HENEMAN
    Posted May 22, 2010 at 7:20 am | Permalink

    Hello,
    I try to understand this tutorial and there is something i don’t understand…
    When we open the application, we can see a first image which name is “Defaut.png”.
    After, we can see the splash screen.
    But, where is declare this image “Defaut.png” ??

  36. Posted May 24, 2010 at 1:37 am | Permalink

    Супер! Спасибо :0

  37. Mital Pritmani
    Posted June 15, 2010 at 11:44 pm | Permalink

    hello,

    Your tutorials are really Best. I was given to build a game in iphone and didn’t even know objective-c but your tutorials proved best guide for me.

    Thank you so much !!! Please keep adding such tutorials, these will help all the people who are new to iphone like me and also to others.

  38. AD
    Posted June 22, 2010 at 7:27 am | Permalink

    Can you use the same principle for a Game start screen, where when you first run the application it says a variant of “Start game”, “Continue Game”, “Hi-scores”, “Credits”, etc?

    Thanks

  39. devilchills
    Posted June 23, 2010 at 6:29 pm | Permalink

    Very great tutorial, I am very grateful for your hardwork and good intentions. tyvm.

  40. Icke
    Posted August 21, 2010 at 2:57 pm | Permalink

    Ich kann die Source-Dateien nicht “builden”.
    Fehlermeldung: error: There is no SDK with the name or path ‘iphoneos2.2′
    Sollte das Zeug nicht in soweit abwärtskompatibel sein?
    Wie kann ich das beheben (Es wird mir nicht angezeigt, welche Datei genau für den Ärger verantwortlich ist)?
    Ansonsten: Nettes Tut!

  41. Icke
    Posted August 21, 2010 at 4:49 pm | Permalink

    Sh**! I’d had to write in English!
    So: I’m not able to build the source data. I always get this error: There is no SDK with the name or path ‘iphoneos2.2′
    Does the newest version of XCode not support this code or what?
    How can I fix this because XCode doesn’t tell me in which part of the program the error is located.
    But this is a very good tutorial!
    ———————————————–
    Sorry for my bad English.

13 Trackbacks

  1. [...] iCodeBlog » Blog Archive » iPhone Game Programming Tutorial Part 3 – Splash Screen. [...]

  2. [...] 37. Game tutorial-3 [...]

  3. [...] The second part talks about user interaction, Simple game AI, game logic etc.The third and the final part contains integration of the [...]

  4. By links for 2009-04-28 | diamondTearz on April 28, 2009 at 6:02 pm

    [...] iCodeBlog » Blog Archive » iPhone Game Programming Tutorial Part 3 – Splash Screen (tags: iphone splashscreen) [...]

  5. [...] Текст оригинальной статьи на английском языке [здесь] [...]

  6. By iCensr [navigation layout part 1] | Uploading on May 21, 2009 at 12:09 am

    [...] following iCodeBlog’s splash screen tutorial, I threw together a placeholder splash screen, the first draft of the sign in page, and [...]

  7. By Myspace: Cocos2d-iPhone on June 18, 2009 at 8:36 pm

    [...] Cocos2d-iPhone Collection of various links Homepage Google group API reference Notes on Cocos2d iPhone Development Move sprite example Introduction to Cocos2d iPhone Monocles Studio Intro Collision particle Great site with lots of simple examples Game walkthrough Sapus Tongue Sources Coloring Sprites Bounching ball 2 Permadi Splash screen [...]

  8. [...] = ‘brandontreb’; It’s been a while, but I finally posted part 3 of the iPhone Game Programming tutorial series on iCodeblog.com.  The focus of this tutorial was to create a splash page for your game [...]

  9. [...] “Bubi Devs”. La versione originale inglese del tutorial è disponibile a questo indirizzo: “iPhone Game Programming Tutorial, Part 2 – iCodBlog“. I meriti quindi relativamente alla versione inglese, sono del legittimo [...]

  10. [...] a time.  Ok, let’s get started… Make sure you are starting with the base code from the previous tutorial (either use yours or download a fresh copy).  We will be using 2 sounds today, 1 for when the ball [...]

  11. [...] a time.  Ok, let’s get started… Make sure you are starting with the base code from the previous tutorial (either use yours or download a fresh copy).  We will be using 2 sounds today, 1 for when the ball [...]

  12. By iPhoneGeek 爱疯极客 on November 5, 2009 at 2:43 am

    [...] Mar 2009 原文见:iPhone Game Programming Tutorial Part 3 – Splash Screen   游戏, 编程   编程, 教程, 游戏 [...]

  13. [...] iTennis iPhone Game Tutorial – Lesson 03 [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">