Building and Transitioning Scenes

What is a Scene?

A Scene is a container that holds Sprites, Labels, Nodes and other objects that your 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

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:

auto dirs = Director::getInstance();
Size visibleSize = dirs->getVisibleSize();

auto myScene = Scene::create();

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

myScene->addChild(label1);

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

myScene->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. Let's go through them. Given:

auto myScene = Scene::create();

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

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

replaceScene() - replace a scene outright.

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.

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.

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

Transition Scenes with effects

You can add visual effects to your Scene transitions

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) );