This tutorial is about how to create the new scene or layer transition which I called “Triangle Shape Cut Triansition”. You must have seen it in some popular games. Let’s begin.
The project is build on cocos2dx3.0. You can download the code in the attached files.
I supposed you have known how to create a new project in cocos2dx3.0.
Use Visual studio IDE to open the win32 project, the new project has 2 class ,AppDelegate and HelloWorldScene.
Create a new class GameScene.(Make sure the new class is locate in /Classes directory.) We will use HelloWorldScene and GameScene to show the “Triangle Shape Cut Triansition”.
We add code at the end of “init” function in HelloWorldScene.cpp.
auto action = Sequence::create(DelayTime::create(10), CallFunc::create(this, callfunc_selector(HelloWorld::transitionToGameScene)), NULL); this->runAction(action); //the code mean that the layer "HelloWorld" run an action which wait 2 second and then call the function "transitionToGameScene".
Next we add a function “transitionToGameScene” for HelloWorld class. ( You can see the comments to help understande the code.)
`void HelloWorld::transitionToGameScene()
{
auto size = Director::getInstance()->getWinSize(); //get the windows size.
auto clipper = ClippingNode::create(); // create the ClippingNode object
auto stencil = DrawNode::create(); // create the DrawNode object which can draw dots, segments and polygons.
Point triangle[3]; // init the triangle vertexes. here my win size is 360x640, so my triangle vertexes init by these values. You can change the values to adapt your scree.
triangle[0] = Point(-size.width * 1.5f, -size.height / 2);
triangle[1] = Point(size.width * 1.5f, -size.height / 2);
triangle[2] = Point(0, size.height);
Color4F green(0, 1, 0, 1);
stencil->drawPolygon(triangle, 3, green, 0, green); //use the drawNode to draw the triangle to cut the ClippingNode.
clipper->setAnchorPoint(Point(0.5f, 0.5f)); // set the ClippingNode anchorPoint, to make sure the drawNode at the center of ClippingNode
clipper->setPosition(size.width / 2, size.height / 2);
clipper->setStencil(stencil); //set the cut triangle in the ClippingNode.
clipper->setInverted(true); //make sure the content is show right side.
Sprite* blackRect = Sprite::create("black_screen.png"); //create a black screen sprite to make sure the bottom is black. the"black_screen.png" is a "black screen" png.
clipper->addChild(blackRect); //to make sure the cover is black.
this->addChild(clipper, 500);
// the Clipping node triangle add some actions to make the triangle scale and rotate.
stencil->runAction(EaseSineOut::create(Spawn::create(ScaleTo::create(2.5f, 0.0f, 0.0f), RotateBy::create(2.5f, 540),
Sequence::create(DelayTime::create(2.5), CallFunc::create(this, callfunc_selector(HelloWorld::toGameScene)), NULL), NULL)));
}`
Next we add a function “toGameScene” for HelloWolrd class.
void HelloWorld::toGameScene() { //get the game scene and run it. auto scene = GameScene::createScene(); Director::getInstance()->replaceScene(scene); }
Next we modify the GameScene class. In the GameScene.h.
`class GameScene : public Layer
{
public:
GameScene(void);
~GameScene(void);
CREATE_FUNC(GameScene);
static Scene* createScene();
virtual bool init() override;
void toGameScene();
void startGame();
};`
**In the GameScene.cpp “init” function **
`bool GameScene::init()
{
if (!Layer::init())
{
return false;
}
auto size = Director::getInstance()->getWinSize();
auto background = Sprite::create("background.png"); //here the background.png is a "red screen" png.
background->setPosition(size.width/2, size.height/2);
this->addChild(background); // add a background sprite to watch more obviously
this->toGameScene(); // the transition animation
return true;
}`
In the GameScene.cpp “toGameScene” function.
`void GameScene::toGameScene()
{
auto size = Director::getInstance()->getWinSize(); // get the win size.
auto clipper = ClippingNode::create(); // get the clipping node.
auto stencil = DrawNode::create(); //get the DrawNode.
Point triangle[3]; // init the triangle vertexes.
triangle[0] = Point(-size.width * 1.5f, -size.height/2);
triangle[1] = Point(size.width * 1.5f, -size.height/2);
triangle[2] = Point(0, size.height);
Color4F green(0, 1, 0, 1);
stencil->drawPolygon(triangle, 3, green, 0, green); // use the drawNode to draw the triangle.
clipper->setAnchorPoint(Point(0.5f, 0.5f)); // set the ClippingNode anchorPoint, to make sure the drawNode at the center of ClippingNode
clipper->setPosition(size.width/2, size.height/2);
clipper->setStencil(stencil); //set the cut triangle in the ClippingNode.
clipper->setInverted(true); //make sure the content is show right side.
Sprite* blackRect = Sprite::create("black_screen.png");
clipper->addChild(blackRect);//to make sure the cover is black.
this->addChild(clipper, 500);
// the Clipping node triangle run some actions to make the triangle cut scale and rotate.
stencil->setScale(0.0f);
stencil->runAction(EaseSineIn::create(Spawn::create(ScaleTo::create(2.5f, 1.0f, 1.0f), RotateBy::create(2.5f, 540),
Sequence::create(DelayTime::create(1.0), CallFunc::create(this, callfunc_selector(GameScene::startGame)), NULL) , NULL))); //when the actions over ,it call the startGame function.
}
`
and now let’s run the project and watch the amazing transition effects.（the attached file “demo.png” is the demo show for the transition. and you can download the demo code in the attached files.）
src_and_res.zip (4.5 KB)
