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.
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
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!
- Posted by brandontreb on 18 Mar 2009 in iPhone Game Programming, iPhone Programming Tutorials, iphone
- Digg |
- Del.icio.us |
- Stumble |
- 78 Comments »
78 Responses
christopher truman Says:
March 18th, 2009 at 2:34 pm
WOW! Fantastic tutorial! I especially enjoyed learning to add a splash page which is a nice touch for any game.
Will you be uploading the source for download?
andy1492 Says:
March 18th, 2009 at 3:34 pm
hy, i’m new in programming with the iphone sdk and i LOVE your 3 tutorials …
its perfect for beginning, also if you didn’t develop with objective-c
thx 
John Says:
March 19th, 2009 at 4:21 am
Hey, this is great, thank you. When is the next tutorial going to be uploaded as i only have until end of march to complete my own project and i want to incorporate audio in mine.
Creating a Splash Screen « Playing with Radiance Says:
March 19th, 2009 at 8:35 am
[...] iCodeBlog » Blog Archive » iPhone Game Programming Tutorial Part 3 – Splash Screen. [...]
Nasser Says:
March 19th, 2009 at 10:37 am
Wow, didn’t know it is that simple.
typo report:
it is not a typo actually but the IBOutlet of SplashViewContrller *view controller in property declaration is not required since it is created with code.
Nasser Says:
March 19th, 2009 at 10:41 am
sorry i forgot to thank you so thank you very very much
i have learned a lot from you Brandon.
thank you again
feel free to delete both posts.
Alex Says:
March 19th, 2009 at 9:47 pm
Thanks for another great tutorial.
Anyone know how to improve the collision detection?
Chintan Says:
March 20th, 2009 at 1:14 am
@Alex…
For improved collision detection, you will have to use Cocos2d framework for iphone games. You can have pixel level collision detection by using cocos2d.
John Says:
March 20th, 2009 at 3:45 am
Hey, how do you add a main menu screen after the splash screen. The main menu will enable you to select the button start new game??
Brandon Says:
March 20th, 2009 at 8:35 am
@John,
From this tutorial, that should be pretty straight forward. Just transition this to a menu view. Then, in your menu view, load your main view when a new game button gets tapped.
XCool Says:
March 21st, 2009 at 8:53 am
Great tutorial! Clean, simple and useful. Exactly what I’ve been looking for… 
Brandon Says:
March 23rd, 2009 at 1:56 pm
@dude ??, what was your question and why are you so mad at the world?
alan Says:
March 23rd, 2009 at 2:37 pm
Thanks for the tutorial, very helpful. After the animation ends, its supposed to transition back to the xxViewController.xib, however mine just shows up as a blank view, even though I’ve made changes to the xxViewController.xib through interface builder. I’m sure its something simple and an error on my part, but any ideas?
iPhone development Tutorials « The Brook Song - ঝর্ণার গান Says:
March 24th, 2009 at 10:58 pm
[...] 37. Game tutorial-3 [...]
John Says:
March 26th, 2009 at 9:04 am
I am stuck on how to make the menu menu screen (where you can select start game) appear after the splash screen?? How do i do this
Jtdreisb Says:
March 26th, 2009 at 1:15 pm
This was exactly what I needed to give me a jump start into writing my own code thanks alot.
Christopher Says:
March 26th, 2009 at 4:41 pm
Curious if you could make a video of what this is supposed to look like after its done.
I have a feeling what im seeing on my screen isnt what should be happening.
=\
Grant Says:
March 26th, 2009 at 5:10 pm
This is a great tutorial for people like me who know very little about programming. Thanks.
I have a question. I sometimes get the error ‘context’ undeclared (first use in this function). I was wondering what to do about that.
Alex Says:
March 27th, 2009 at 12:07 pm
Hey, nice tutorial, buuut…
i gues splash screens suck. In your example you’re stealing bout 5 seconds of the users valuable time with just some boring animations. is that really necessary?
for an on-the-go experience the should provid its valuable content as fast as possible wothout keeping the user waiting…
my 2 cents.
Alex
jbwk Says:
March 27th, 2009 at 6:47 pm
I agree with Alex. The only acceptable reason to display a splash screen is when you are loading game resources. In this example code you are only boring the user with an unnecessary delay.
As Apple writes in the user interface guidelines: Avoid splash screens whenever possible.
joelrb Says:
March 28th, 2009 at 11:54 am
Hi! Thanks for a great tutorial.
I have this code in my previous project for animating two views (fade in/out). I tried this in your code and it works also:
- (void)fadeView
{
CGContextRef context = UIGraphicsGetCurrentContext();
[UIView beginAnimations:nil context:context];
[UIView setAnimationDuration:0.75];
if ([viewController.view superview]) {
[self.view bringSubviewToFront:splashImageView];
[splashImageView setAlpha:1.0];
}
[splashImageView setAlpha:0.0f];
viewController.view.alpha = 1.0;
[splashImageView removeFromSuperview];
[UIView commitAnimations];
}
John Says:
March 31st, 2009 at 5:38 am
Hey, can someone help me to create a main menu screen. Also, when is the next tutorial coming out?
Kris Says:
April 1st, 2009 at 12:58 pm
This is a great tutorial. Thanks for the information.
I’m stuck on changing the background color so that the splash image fades to black. Currently, as you are likely aware, it fades to white. I’ve tried setting the background color through various channels with no luck.
Any help with this would be greatly appreciated.
Thanks,
Kris
kyle Says:
April 1st, 2009 at 3:05 pm
would it be at all possible to increase the speed of the ball as gameplay goes on?
Tulius Says:
April 4th, 2009 at 9:44 pm
Hi!
Do you think you could make a splash screen tutorial for a Tab Bar View instead of a regular view?
I am trying to make it work, but I keep getting an exception with this message: “this class is not key value coding-compliant for the key tabbarController”.
Thanks in advance!
mj Says:
April 5th, 2009 at 5:52 am
I think the point being made is that maybe you don’t need a splash screen for THIS GAME but you might and it’s all part of the tutorial. Apple uses them ALL THE TIME, even in MobileMail.
Wanna bet how many iTennis games hit the store this week?
Rome Says:
April 5th, 2009 at 9:26 am
From Part 2, when a point is scored and tapToBegin appears and the ball is centered, it actually puts it below the “net”, closer towards the yellow racquet. I think this is because of the display bar on the top. Any ideas how to actually center the ball even with the display bar displayed? Thanks
Rome Says:
April 5th, 2009 at 1:13 pm
Hmm, disregard my previous post. It seems to be centering now, yet I don’t think I changed anything…
Thanks for pt. 3 of the tutorial though! This really helps a lot.
iPhone game development guide: On the go tutorial | iPhone Footprint Says:
April 13th, 2009 at 8:49 am
[...] The second part talks about user interaction, Simple game AI, game logic etc.The third and the final part contains integration of the [...]
Lame-o Says:
April 15th, 2009 at 2:57 pm
Brandon,
Righteous tutorial!
Dude,
You are an asshole!
John,
Learn something on your own!
John Says:
April 16th, 2009 at 8:29 am
I really need help to create a main menu screen. Can someone help?
coder4real Says:
April 19th, 2009 at 9:50 am
Any one have ideas on doing this when your Game is an Opengl ES view? I have a simple game that does all the drawing in opengl ES. I created this based of the Opengl ES template provided. I tried commenting out all of the openGL code from the delegate and unconnecting the “openGL view” connection in the interface builder but the drawView() method is still getting called when the app is initialized. I’m not even instantiating an instance of this view so there must be something that the template set up that I don’t know about. Any ideas on how I can stop the drawView method from being called by default so I can call it myself after the splash screen has finished?
Thanks!
iNewbie Says:
April 20th, 2009 at 11:14 am
Hi guys,
I am so glad to see such a great example of a basic iPhone game. I followed the tutorial carefully, but what I got is a working splash screen followed by a empty court that doesn’t respond to clicks in the simulator. I had a friend tried my code but ended up with exactly the same thing.
What I have missed?
Thanks!
Aben10 Says:
April 23rd, 2009 at 2:47 pm
Great tutorial!!!!! Thanks. my ball is still gettiing trapped on the racquet. Can u or anyone help find the problem?, i have the new code u posted but still getting trapped. thanks for the help and keep up the great work.
Ken Says:
April 25th, 2009 at 4:30 pm
I have a question in loadView about the allocs for the splash view and the iTennisViewController. In both cases, there was no release. Is it not needed in these cases? Who does the releasing?
James Revolti Says:
April 27th, 2009 at 11:29 am
Congratulations!
This tutorial is very usefull!
Thanks!!
chris Says:
April 27th, 2009 at 7:34 pm
The ball is still getting stuck will you update the tutorial please!!!
links for 2009-04-28 | diamondTearz Says:
April 28th, 2009 at 6:02 pm
[...] iCodeBlog » Blog Archive » iPhone Game Programming Tutorial Part 3 – Splash Screen (tags: iphone splashscreen) [...]
Уроки iPhone SDK: (Часть 3) Программирование игр на iPhone. “Пишем” игру iTennis. Экранная заставка. | LookApp.ru - обзоры программ и игр для iPhone Says:
May 18th, 2009 at 9:52 pm
[...] Текст оригинальной статьи на английском языке [здесь] [...]
iCensr [navigation layout part 1] | Uploading Says:
May 21st, 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 [...]
holografix Says:
June 10th, 2009 at 10:13 am
Amazing tutorial mate, covers basics mechanics of a game AND basic cocoa touch mechanics!
One teeny little question…
Why do you set the Alpha of the splash screen back to 1.0 in the finishedFading method?
Myspace: Cocos2d-iPhone Says:
June 18th, 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 [...]
Part 3 of iPhone Game Programming Tutorial Posted On iCodeBlog | brandonTreb.com Says:
June 24th, 2009 at 12:34 pm
[...] = ‘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 [...]
Abu Bashar Says:
July 6th, 2009 at 1:10 am
This is really very good tutorial to learn the gaming consept and start doing development. also iCodeblog have rich tutorials for the beginners and advance iphone developers.
Many Thanks
O. Says:
July 6th, 2009 at 8:49 am
Hi, thanks for that great tutorial!
In loadView, shouldn’t
-> “splashView.frame = CGRectMake(0,0,320,240);”
be
-> “splashView.frame = CGRectMake(0,0,320,480);” ?
Also, I guess tat instead of hardcoding the values in it would be possible to use the appFrame Rect values isn’t it?
Thanks!
O.
p0stal Says:
July 10th, 2009 at 7:47 am
Here’s a much easier way to create a splash screen (1 line of code!)
Name your splash screen image “Default.png” put it in your resources folder then simply add the line “sleep(3)” in your [name]appdelegate.m under
- (void)applicationDidFinishLaunching:(UIApplication *)application {
ie:
- (void)applicationDidFinishLaunching:(UIApplication *)application {
sleep(3) /* 3 is the number of seconds you want it to last for */
}
adam Says:
July 16th, 2009 at 3:28 pm
Hey why can’t i see his video for quickly using the interface buidler in part 1 of your tutorial
Techy Says:
July 17th, 2009 at 7:57 am
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
DevTutorial #15 – Creiamo il nostro primo gioco, Pong! (Parte III) - Bubi Devs Says:
July 27th, 2009 at 9:08 am
[...] “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 [...]
Spicy iPhone » Blog Archive » iPhone Game Programming Tutorial Part 4 - Basic Game Audio Says:
August 27th, 2009 at 2:50 pm
[...] 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 [...]
iPhone Game Programming Tutorial Part 4 – Basic Game Audio | Iphone Study Blog Says:
September 4th, 2009 at 10:02 am
[...] 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 [...]
Дмитрий Шеметов Says:
October 7th, 2009 at 11:42 pm
По правде говоря, сначала не очень то до конца понял, но перечитав второй раз дошло – спасибо!
Лаврентий Андреев Says:
October 21st, 2009 at 11:54 pm
Занятно пишете, жизненно. Все-таки, для того, чтобы делать по-настоящему интересный блог, нужно не только сообщать о чем-то, но и делать это в интересной форме:)
Мечислав Шумилов Says:
October 22nd, 2009 at 2:41 am
Чем-то это отдает напеванием свирели в предновогоднюю ночь, чем то похоже на праздникк, чем-то на казино… Ну сами продолжите дальше
Mr.Carrot42 Says:
October 22nd, 2009 at 5:48 pm
The court should try to determine beforehand, as best it can, if the victim is subject to battered women’s syndrome. ,
iPhoneGeek 爱疯极客 Says:
November 5th, 2009 at 2:43 am
[...] Mar 2009 原文见：iPhone Game Programming Tutorial Part 3 – Splash Screen 游戏, 编程 编程, 教程, 游戏 [...]
deepp Says:
November 6th, 2009 at 3:02 am
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
deepp Says:
November 6th, 2009 at 4:52 am
ohh i got it….its my silly mistake…. i was drawing it other way around….its solved…
Tommy Myers Says:
November 21st, 2009 at 7:36 am
How do i make the first and second image the same amount of seconds of showing?
anonymous Says:
January 12th, 2010 at 9:58 pm
for some reason my pics disappear according to alert Help???!!!
Phil Says:
January 31st, 2010 at 1:13 pm
Thank you very, very, very much for taking the time to post these tutorials, they are a great help.
Chris Says:
February 1st, 2010 at 6:40 pm
I’m getting this error:
iTennisAppDelegate.m:18: error: ‘SplashViewController’ undeclared (first use in this function)
Help?
Leave a Reply
Subscribe
Categories
Tutorials
Archives
