How to create animated app intro « cocos2d for iPhone

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

How to create animated app intro

(12 posts) (6 voices)

Started 2 years ago by Negativi
Latest reply from kenny

Tags:

Negativi
Member

Hello,
I want to know how can I make these animated app intros.

Usually, I use the Default.png image, but it has no animation.

I want to show, for example, 3 logos when the app loads. These logos are PNG Images. How can I add a animation (fade effect, for example) between these 3 images, and then load the application menu ?

So, can someone help me ? I need this to send my application to App Store, thanks !

OBS: Sorry for my english, I am Brazilian.

Posted 2 years ago #
Steve Oldmeadow
Administrator

I just have an intro scene that I load before the menu and when it is finished transition to the menu scene. I just load the logos as sprites and use standard cocos2d actions to animate them. Your english was perfect BTW - don't apologise.

Posted 2 years ago #
Negativi
Member

Ok, So I just have to add like a IntroScene and IntroLayer which will contain my image transitions, and then, when the animation finishes, I just have to load my GameScene ?
Thanks.

Posted 2 years ago #
Steve Oldmeadow
Administrator
Yeah, at the moment you should be kicking off the menu scene so instead of doing that kick off your intro scene. Then when that finishes transition to your menu scene. There are various ways to determine when the intro is finished. I schedule a selector to fire after a certain time period (see below) but you could also call a function when your last action completes.
```
[self schedule: @selector(timeout:) interval:2.0];
```
```
-(void) timeout: (ccTime) dt {
  [self stopAllActions];
  [[Director sharedDirector] replaceScene: [FadeTransition transitionWithDuration:1.0 scene:[MainMenuNode scene]]];
}
```
Posted 2 years ago #
Negativi
Member

Thank you so much Steve, you really helped me !
Sorry for wasting your time,
Bye !

Posted 2 years ago #
Greenkirby21
Member

hey, do u still need help? I can post my code on here if u want. i do exactly that. I have an intro layer, and then once it is done, i play my game scene

Posted 2 years ago #
kenny
Member

Hi Greenkirby21,

Yes, I would like to see the code, because I would like to do the same.

Thanks,

lmrkllc

Posted 2 years ago #
kenny
Member

Negativi,

Did you automate the display of your logos?? or do you have to click on the screen so the next logo shows?? If you automated, do yo u mind posting the code??

Thanks,

lmrkllc

Posted 2 years ago #
PhilM
Member

You could just use a scheduler to run after say 3 seconds, cancel itself, and trigger the next transition.

Posted 2 years ago #
kenny
Member

Thanks PhilM!!! Works!!!

lmrkllc

Posted 2 years ago #

vitoralmeidasilva
Member

Another nice idea is to draw opaque sprites executing a fadein action.

Something like this:

// if you have two splash screens

// load and display your first logo
Sprite *bg = [Sprite spriteWithFile:@"first_logo.png"];
bg.transformAnchor = cpvzero;
[self addChild:bg z:0];
[self schedule: @selector(goToOtherSplashScreen:) interval:2.0f];

// go to the other splash screen
- (void)goToOtherSplashScreen:(ccTime)dt {
    [self unschedule:_cmd];

    Sprite *bg = [Sprite spriteWithFile:@"second_logo.png"];
    bg.opacity = 0.0f; // inittially invisible
    bg.transformAnchor = cpvzero;
    [self addChild:bg z:1];

    id fadeIn = [FadeIn actionWithDuration:1.0f];
    id delay = [DelayTime actionWithDuration:1.0f];
    id goToMenu = [CallFunc actionWithTarget:self selector:@selector(goToMainMenu)];
    id sequence = [Sequence actions:fadeIn, delay, goToMenu, nil];
    [bg runAction:sequence];
}

// go to the main menu
- (void)goToMainMenu {
    [[Director sharedDirector] replaceScene:[FadeTransition transitionWithDuration:1.0f scene:[MenuScene scene] withColorRGB:0xffffff]]; // fade transition
}

This makes a nice effect before the [[Director sharedDirector] replaceScene: [FadeTransition transitionWithDuration:1.0 scene:[MainMenuNode scene]]];
call.

How to create animated app intro

Reply