Triangle Shape Cut Transiiton
原作者：http://discuss.cocos2d-x.org/t/cocos3-0-tutorial-create-the-new-scene-or-layer-transition-which-i-called-triangle-shape-cut-triansition/14264#hunter_hb
英文论坛原帖：http://discuss.cocos2d-x.org/t/cocos3-0-tutorial-create-the-new-scene-or-layer-transition-which-i-called-triangle-shape-cut-triansition/14264
这篇教程将要介绍的是创建新场景或者说是图层转变我将其称之为”Triangle Shape Cut Transiiton”你可能已经在很多流行的游戏里看过这种效果了。开始吧~
这个项目是建立在
cocos2d-x 3.0
之上的。你能在附件中下载代码。
假设你们已经知道如何创建一个cocos2dx 3.0的新项目。
使用Visual Studio集成开发环境打开win32项目，新项目有两个类：AppDelegate和HelloWorldScene。
我们创建一个新类GameScene。（确保新建的类放在Classes目录下。）我们使用HelloWorldScene和GameScene来制作三角形场景转变效果"Triangle Shape Cut Triansition"
我们在
HelloWorldScene.cpp
中的
init
函数最后端添加代码。
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".
```
接下来我们添加一个函数
"transitionToGameScene"
到
HelloWorld
类中（你能通过查看注释来更好的理解代码。）
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; // 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 = Point(-size.width * 1.5f, -size.height / 2);
triangle = Point(size.width * 1.5f, -size.height / 2);
triangle = 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)));
}
```
接下来为类
HelloWorld
添加函数
toGameScene
void HelloWorld::toGameScene()
{
//get the game scene and run it.
auto scene = GameScene::createScene();
Director::getInstance()->replaceScene(scene);
}
```
接下来我们在
GameScene.h
类
GameScene
中修改类
GameScene
。
public Layer { public: GameScene(void); ~GameScene(void);
CREATE_FUNC(GameScene);
static Scene* createScene();
virtual bool init() override;
void toGameScene();
void startGame();
};`
```
在GameScene.cpp的init函数中：
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;
}`
```
在GameScene.cpp中的toGameScene里。
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; // init the triangle vertexes.
triangle = Point(-size.width * 1.5f, -size.height/2);
triangle = Point(size.width * 1.5f, -size.height/2);
triangle = 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.
}
```
现在我们运行项目并观赏奇妙的转变效果。（附件里的文件”demo.png”就是用来展示的，并且你可以在附件中下载代码。）
http://discuss.cocos2d-x.org/uploads/default/6313/f48b062700645362.zip