This tutorial assumes basic familiarity with Cocos2d on iPhone.  For Cocos2d introduction, please see this install guide, and Hello World guide.  This tutorial covers Cocos2d version 0.7.1.


Transitions are effects such as: wipe, fade, zoom, and split.  You can use transitions to switch between Cocos2d Scene objects.  Scene class is derived from CocosNode and it is similar to Layer.  You can add other CocosNode, such as Layer(s) and Sprite(s) into a Scene.

To instantiate a transition, use:

+(id) transitionWithDuration:(ccTime) t scene:(Scene*)s;

Where scene is the scene that will transitioned to replace the current scene. time is the number of seconds for the transition.

To apply transition to scenes, the syntax is as follows:

[[Director sharedDirector] replaceScene: 
    [TransitionClass transitionWithDuration:duration scene:nextScene]];

Some transitions has custom parameter(s); for example, FadeTransition has the fade color as extra parameter.

-(id) initWithDuration:(ccTime)duration scene:(Scene*)scene withColorRGB:(unsigned int)rgb;

Creating The Sample Application

There are some cool built-in transitions in Cocos2d, which you can try by running the TransitionsDemo example. For help on running the example, click here. The TransitionsDemo that comes with Cocos2d is very nice but it’s slightly complicated by the use of dynamic class generator. This guide will be more basic and straightforward, and can be considered a prelude to TransitionDemo. We will just be creating two scenes, adding images to them, and transitioning between the two.

  • Create a New Project, Window-Based Application.
  • Name the project Cocos2dTransition (or any name you want, but in this guide, I will be using that name).
  • Import the cocos2d files into the project: cocos2d folder,  external/Chipmunk/src folder.
  • Add OpenGLES and QuartzCore framework.
  • Copy the images required by cocos2d into the project:fps_images.png, Default.png.

For more info, refer to Hello Cocos2d example.

Creating The Scenes

For demonstration purpose, add two Scene objects to Cocos2dTransitionAppDelegate.h

#import "cocos2d.h"
@interface Cocos2dTransitionAppDelegate : NSObject <UIApplicationDelegate, TouchEventsDelegate> {
	UIWindow *window;
	Scene* mScene1;
	Scene* mScene2;

We will be switching back and forth between mScene1 and mScene2. Notice that our class implements the TouchEventsDelegate. This is only necessary because I will be handling touch events in that class. You can find more information about delegation here.

Import two images – these images will be displayed on mScene1 and mScene2, mine are named scene1.png and scene2.png. Make sure the dimensions are 480×320 pixels to match the iPhone screen.


Edit Cocos2dTransitionAppDelegate.m to initialize Cocos2d, create and add the Scenes in applicationDidFinishLaunching method.

- (void)applicationDidFinishLaunching:(UIApplication *)application {    
	// Init the window
	window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
	// cocos2d will inherit these values
	[window setUserInteractionEnabled:YES];	
	[window setMultipleTouchEnabled:NO];
	// before creating any layer, set the landscape mode
	[[Director sharedDirector] setLandscape: YES];
	[[Director sharedDirector] setAnimationInterval:1.0/60];
	[[Director sharedDirector] setDisplayFPS:YES];
	[[Director sharedDirector] attachInView:window];
	[[Director sharedDirector] addEventHandler:self];
	CGSize size = [[Director sharedDirector] winSize];
	int x = size.width;
	int y = size.height;	
	mScene1=[Scene node];
	Sprite* sprite=[Sprite spriteWithFile:@"scene1.png"];
	// Center the image
	sprite.position = cpv(x/2, y/2);
	[mScene1 addChild:sprite];
	[mScene1 retain];
	mScene2=[Scene node];
	sprite=[Sprite spriteWithFile:@"scene2.png"];
	// Center the image
	sprite.position = cpv(x/2, y/2);	
	[mScene2 addChild:sprite];
	// retain, otherwise the reference will be gone
	[mScene2 retain];

	// Start with mScene1
	[[Director sharedDirector] runWithScene: mScene1];	
	[window makeKeyAndVisible];

In the beginning of the program, we’re displaying mScene1.

Adding The Transitions

Now comes what we have been waiting for, the code to do the transition. In this example, we initiate the transition when user touches the screen. The transition we use is ZoomFlipXTransition

-(BOOL)ccTouchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
	// Flip between mScene1 and mScene2
	Scene* nextScene=mScene1;
	if ([[Director sharedDirector] runningScene]==mScene1)

	[[Director sharedDirector] replaceScene: 
		[ZoomFlipXTransition transitionWithDuration:1.2f scene:nextScene]];
	return YES;


You can find all the transition classes in cocos2d/Transition.h. Every transition extends from TransitionScene, which has 2 instance variables: inScene and outScene. TransitionScene will use the currently running scene as the voutScene. You can create custom transitions by deriving from TransitionScene. You can replace ZoomFlipXTransition in the example with the other ones listed in cocos2d/Transition.h (remember, some transitions has additional parameters which need to be added).

Comments are closed.