• TOP
  • >
  • その他
  • >
  • シーンを移動する

シーンを移動する

今回はシーンとシーンとの移動について紹介をしたいと思います。
また、このシーンの移動に関しては、ただ入れ替えるのではなく、色々なエフェクトを使うことができます。これを利用すればよりゲームらしく見えるでしょう。

シーンの移動

まずは、「シーンの移動」からです。
cocos2dxでは、このシーンの移動はとても簡単にできます。

//Ver3.x
Director::getInstance()->replaceScene(HelloWorld::createScene());


//Ver2.x
CCDirector::sharedDirector()->replaceScene(HelloWorld::scene());

この一行だけです。
HelloWorld::scene()の所を、あなたの好きなシーンに入れ替えれば大丈夫です。
これを、メニューを押した時や、ゲームをクリアした時などに挿入してあげれば、シーンを移動出来ます。

シーンの移動に特殊なエフェクトをかける

先ほど説明した方法で、シーンの移動はできるのですが、いきなりシーンが切り替わるなど、実際にゲームで利用するには少し味気ないです。
そこで、cocos2dxでは、このシーンの移動に色々なエフェクトをかけることができます。

以下のようなクラスを利用します。
  • TransitionFade
  • TransitionFlipAngular
  • TransitionShrinkGrow
  • TransitionMoveInB
  • TransitionMoveInT
  • TransitionMoveInL
  • TransitionMoveInR
  • TransitionFadeTR
  • TransitionFadeUp
  • TransitionFlipX
  • TransitionFlipY
  • TransitionPageTurn
  • TransitionCrossFade
では、この中からいくつか説明をします。


TransitionFade

まずは、シーンの移動の際にフィードアウト、フィードインを設定出来ます。
使い方はとても簡単です。
  • 引数1:フィードの時間
  • 引数2:移動先のシーン
  • 引数3:フィードの色(オプション)

//Ver3.x
Director::getInstance()->replaceScene(TransitionFade::create(1.0f, HelloWorld::createScene(), Color3B::WHITE));


//Ver2.x
CCDirector::sharedDirector()->replaceScene(CCTransitionFade::create(3.0f,HelloWorld::scene()));
//フィードの色を設定する場合
CCDirector::sharedDirector()->replaceScene(CCTransitionFade::create(3.0f, HelloWorld::scene(), ccc3(0, 0, 0)));



TransitionMoveInB CCTransitionMoveInT

TransitionMoveInクラスを使えば、シーンが指定された方向から移動してきます。
TransitionMoveInの後に下記の用にシーンの移動方向を設定します。
  • TransitionMoveInB:シーンが下から移動してくる
  • TransitionMoveInT:シーンが上から移動してくる
  • TransitionMoveInR:シーンが右から移動してくる
  • TransitionMoveInL:シーンが左から移動してくる
具体的なコードは以下のようになります。
第一引数で、移動時間を設定します。
//Ver3.x
//下からシーンが移動。
Director::getInstance()->replaceScene(TransitionMoveInB::create(1.0f,HelloWorld::createScene()));

//上からシーンが移動。
Director::getInstance()->replaceScene(TransitionMoveInB::create(1.0f,HelloWorld::createScene()));


//Ver2.x
//下からシーンが移動。
CCDirector::shoaredDirector->replaceScene(CCTransitionMoveB::create(2.0f,HelloWorld::scene()));

//上からシーンが移動。
CCDirector::shoaredDirector->replaceScene(CCTransitionMoveT::create(2.0f,HelloWorld::scene()));




TransitionFadeBL CCTransitionFadeTR

小さい四角形が折り重なるようにして、シーンが変わります。
方向は下記の通りです。
  • TransitionFadeBL:右上から、左下へ
  • TransitionFadeTR:左下から、右上へ
こんな感じでシーンが遷移します。(CCTransitionFadeTRクラス)


具体的なコードは以下のようになります。
//Ver3.x
Director::getInstance()->replaceScene(TransitionFadeTR::create(1.0f, HelloWorld::createScene()));


//Ver2.x
 CCDirector::sharedDirector()->replaceScene(CCTransitionFadeTR::create(2.0f, HelloWorld::returnscene()));

CCTransitionCrossFade

シーンの透明度を変化させて、シーンを移動します。
//Ver3.x
Director::getInstance()->replaceScene(TransitionCrossFade::create(1.0f,HelloWorld::createScene()));

//Ver2.x
CCDirector::sharedDirector()->replaceScene(CCTransitionCrossFade::create(1.0f,  HelloWorld::returnscene()));

            

経営育成ゲーム「わたしの動物園」をリリースしました!

cocos2dxを使って作成したアプリを作成しました。
無料で遊べますので、ぜひゲーム作りの参考にしてみて下さい!

【Sponsored Link】

更新履歴