cocos2d-x シーン遷移アニメーションのサンプル

cocos2d-xではシーンを遷移するときにアニメーションをさせることができます。
現時点(v3.17)で標準で用意されているアニメーションについて紹介します。
動画を用意したので参考にして下さい。

TransitionFade (BLACK)

フェードアウト、フェードイン(フェードの色を指定することが可能。このサンプルは黒を指定)

TransitionFade::create(2.0f, scene, Color3B::BLACK);

TransitionFade (WHITE)

フェードアウト、フェードイン(フェードの色を指定することが可能。このサンプルは白を指定)

TransitionFade::create(2.0f, scene, Color3B::WHITE);

TransitionRotoZoom

回転してズームアウト、回転してズームイン

TransitionRotoZoom::create(2.0f, scene);

TransitionJumpZoom

ズームアウトしてジャンプアウト、ジャンプインしてズームイン

TransitionJumpZoom::create(2.0f, scene);

TransitionMoveInL

元のシーンに重なるように、次のシーンが左から移動

TransitionMoveInL::create(2.0f, scene);

TransitionMoveInR

元のシーンに重なるように、次のシーンが右から移動

TransitionMoveInR::create(2.0f, scene);

TransitionMoveInT

元のシーンに重なるように、次のシーンが上から移動

TransitionMoveInT::create(2.0f, scene);

TransitionMoveInB

元のシーンに重なるように、次のシーンが下から移動

TransitionMoveInB::create(2.0f, scene);

TransitionSlideInL

元のシーンを追い出すように、次のシーンが左からスライド

TransitionSlideInL::create(2.0f, scene);

TransitionSlideInR

元のシーンを追い出すように、次のシーンが右からスライド

TransitionSlideInR::create(2.0f, scene);

TransitionSlideInT

元のシーンを追い出すように、次のシーンが上からスライド

TransitionSlideInT::create(2.0f, scene);

TransitionSlideInB

元のシーンを追い出すように、次のシーンが下からスライド

TransitionSlideInB::create(2.0f, scene);

TransitionShrinkGrow

元のシーンを縮小しながら、次のシーンを拡大

TransitionShrinkGrow::create(2.0f, scene);

TransitionFlipX

画面を水平方向に反転

TransitionFlipX::create(2.0f, scene);

TransitionFlipY

画面を垂直方向に反転

TransitionFlipY::create(2.0f, scene);

TransitionFlipAngular

画面を水平方向に半分、垂直方向に半分、反転(少し傾きながら水平方向に反転する)

TransitionFlipAngular::create(2.0f, scene);

TransitionZoomFlipX

画面を水平方向に反転させながら、ズームアウト・ズームイン

TransitionZoomFlipX::create(2.0f, scene);

TransitionZoomFlipY

画面を垂直方向に反転させながら、ズームアウト・ズームイン

TransitionZoomFlipY::create(2.0f, scene);

TransitionZoomFlipAngular

画面を水平方向に半分、垂直方向に半分、反転させながら、ズームアウト・ズームイン(少し傾きながら水平方向に反転しつつズームアウト・ズームイン)

TransitionZoomFlipAngular::create(2.0f, scene);

TransitionCrossFade

クロスフェード(元のシーンのフェードアウトと次のシーンのフェードインを同時に)

TransitionCrossFade::create(2.0f, scene);

TransitionTurnOffTiles

タイル状にランダムに置換

TransitionTurnOffTiles::create(2.0f, scene);

TransitionSplitCols

画面を分割し、奇数列は上方向へ、偶数列は下方向へ、移動

TransitionSplitCols::create(2.0f, scene);

TransitionSplitRows

画面を分割し、奇数行は左方向へ、偶数行は右方向へ、移動

TransitionSplitRows::create(2.0f, scene);

TransitionFadeTR

左下から右上に向かってタイル状にフェード

TransitionFadeTR::create(2.0f, scene);

TransitionFadeBL

右上から左下に向かってタイル状にフェード

TransitionFadeBL::create(2.0f, scene);

TransitionFadeUp

下から上に向かってブラインド状にフェード

TransitionFadeUp::create(2.0f, scene);

TransitionFadeDown

上から下に向かってブラインド状にフェード

TransitionFadeDown::create(2.0f, scene);

TransitionPageTurn

ページをめくるような動作

TransitionPageTurn::create(2.0f, scene, false);

TransitionPageTurn (backwards)

ページをめくるような動作(後ろから前)

TransitionPageTurn::create(2.0f, scene, true);

TransitionProgressRadialCCW

反時計回りで放射状に遷移

TransitionProgressRadialCCW::create(2.0f, scene);

TransitionProgressRadialCW

時計回りで放射状に遷移

TransitionProgressRadialCW::create(2.0f, scene);

TransitionProgressHorizontal

進捗バーのように、水平方向に徐々に遷移

TransitionProgressHorizontal::create(2.0f, scene);

TransitionProgressVertical

進捗バーのように、垂直方向に徐々に遷移

TransitionProgressVertical::create(2.0f, scene);

TransitionProgressInOut

中央から外側に向かって徐々に遷移

TransitionProgressInOut::create(2.0f, scene);

TransitionProgressOutIn

外側から中央に向かって徐々に遷移

TransitionProgressOutIn::create(2.0f, scene);

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください