ProgrammingGuide > 2D Graphics > Building and Transitioning Scenes

Building and Transitioning Scenes

version: Cocos2d-x v3.x
update: Updated about 2 years ago

What is a Scene?

A Scene is a container that holds Sprites, Labels, Nodes and other objects that our game needs. A Scene is responsible for running game logic and rendering the content on a per-frame basis. You need at least one Scene to start your game. You can think of this like a movie. The Scene is what is running and users see what is happening in real-time. You can have any number of Scene objects in your game and transition through them easily. Cocos2d-x provides scene transitions and you can even have scene transitions with cool effects.

Creating a Scene

It is very easy to create a Scene

1
auto myScene = Scene::create();

Remember the Scene Graph?

In Chapter 2 of this guide we learned about a scene graph and how it affects the drawing of our game. The important thing to remember is that this defines the drawing order of the GUI elements. Also remember z-order!

A Simple Scene

Lets's build a simple Scene. Remember that cocos2d-x uses a right handed coordinate system. This means that our 0,0 coordinate is at the bottom left corner of the screen/display. When you start positioning your game elements this is where you should start your calculations from. Let's create a simple Scene
and add a few elements to it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
auto dirs = Director::getInstance();
Size visibleSize = dirs->getVisibleSize();

auto scene1 = Scene::create();

auto label1 = Label::createWithTTF("My Game", "Marker Felt.ttf", 36);
label1->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));

scene->addChild(label1);

auto sprite1 = Sprite::create("mysprite.png");
sprite1->setPosition(Vec2(100, 100));

scene->addChild(sprite1);

When we run this code we shall see a simple Scene that contains a Label and a Sprite. It doesn't do much but it's a start.

Transitioning between Scenes

You might need to move between Scene objects in your game. Perhaps starting a new game, changing levels or even ending your game. Cocos2d-x provides a number of ways to do scene transitions.

Ways to transition between Scenes

There are many ways to transition through your Scenes. Each has specific functionality. Lets go through them. Given:

1
auto myScene = Scene::create();

runWithScene - use this for the first scene only. This is the way to start your games first Scene.

1
Director::getInstance()->runWithScene(myScene);

replaceScene - replace a scene outright.

1
Director::getInstance()->replaceScene(myScene);

pushScene - suspends the execution of the running scene, pushing it on the stack of suspended scenes. Only call this if there is a running scene.

1
Director::getInstance()->pushScene(myScene);

popScene - This scene will replace the running one. The running scene will be deleted. Only call this if there is a running scene.

1
Director::getInstance()->popScene(myScene);

Transition Scenes with effects

You can add visual effects to your Scene transitions

1
2
3
4
5
6
7
8
9
10
auto myScene = Scene::create();

// Transition Fade
Director::getInstance()->replaceScene(TransitionFade::create(0.5, myScene, Color3B(0,255,255)));

// FlipX
Director::getInstance()->replaceScene(TransitionFlipX::create(2, myScene));

// Transition Slide In
Director::getInstance()->replaceScene(TransitionSlideInT::create(1, myScene) );

pageTurn.jpeg (68.9 kB) iven, 2013-01-16 09:25

5_6.jpeg (37.5 kB) walzer@cocos2d-x.org, 2014-12-03 05:47

5_11.jpg (7.3 kB) walzer@cocos2d-x.org, 2014-12-03 05:47

5_7.png (5.7 kB) walzer@cocos2d-x.org, 2014-12-03 05:47

5_8.png (8.5 kB) walzer@cocos2d-x.org, 2014-12-03 05:47

5_9.jpeg (6.5 kB) walzer@cocos2d-x.org, 2014-12-03 05:47

5_1.png (1.6 kB) walzer@cocos2d-x.org, 2014-12-03 05:47

5_2.png (1.6 kB) walzer@cocos2d-x.org, 2014-12-03 05:47

5_3.png (106.2 kB) walzer@cocos2d-x.org, 2014-12-03 05:47

5_4.jpg (70 kB) walzer@cocos2d-x.org, 2014-12-03 05:47

5_10.jpg (7.2 kB) walzer@cocos2d-x.org, 2014-12-03 05:47

5_5.png (106.1 kB) walzer@cocos2d-x.org, 2014-12-03 05:47

Sign up for our newsletter to keep up with the latest developments, releases and updates for Cocos2d-x.