【iPhoneアプリ】「cocos2d for iPhone」でゲームアプリを作ってみる(CCSceneとCCLayerを使って画面遷移をする)


概ねタイトルとおりです。今回は画面遷移を作ってみます。
ゲームを作るにあたって色々と苦労する画面遷移ですが、
cocos2dでは簡単に行うことができます(^ω^)



CCSceneとCCLayerのセットで一つの画面が作られる


ゲームを作るときには、複数の画面を管理する必要があります。
タイトル画面があり、ゲームメイン画面があり、ゲームオーバー画面などなど。

cocos2dでは必ず、
一つのCCSCeneと、一つ以上のCCLayerで画面が構成されます。

CCLayerは一枚以上であれば何枚でも重ねられます。
(お絵かきソフトの「レイヤー」みたいなものです)
特定の種類を一つのレイヤーにまとめておくとレイヤー単位で非表示、表示をできるので便利です。

そしてCCLayerの上にいままでのようにCCSpriteやCCMenu,CCLabelなどの
オブジェクトを配置して画面を作っていきます。

【iPhoneアプリ】「cocos2d for iPhone」でゲームアプリを作ってみる(CCSceneとCCLayerを使って画面遷移をする):CCScene,CCLayerのイメージ図

画面の遷移はpushSceneメソッドとreplaceSceneメソッドを使う


cocos2dのテンプレートを作成すると、
IntroLayerという名前のCCLayerがあるCCSceneが最初に作られ、
時間が経つとHelloWorldLayerという名前のCCLayerがあるCCSceneに遷移します。

最初のイントロ画面を作成はAppDelegateの中の「pushScene」メソッドで行われます。
次に、イントロ画面から「replaceScene」メソッドで遷移をします。

ここで注意しなければならないのは、
一番最初にCCSceneを作成する時には「pushScene」メソッドを使い
次の遷移からは「replaceScene」メソッドを使うということです。


【iPhoneアプリ】「cocos2d for iPhone」でゲームアプリを作ってみる(CCSceneとCCLayerを使って画面遷移をする):画面遷移イメージ



CCLayerを継承したクラスを作成して新規画面を作成する


新しく画面を作る場合はCCLayerを継承したクラスを作成します。
今回は「SampleScene」クラスという名前にしました。

次に、sceneメソッドを追加します。

・ヘッダファイル(SampleScene.h)
@interface SampleLayer : CCLayer {
    
}
+(CCScene *)scene;
@end



・実装ファイル(SampleScene.m)
+(CCScene *)scene{
    CCScene     *scene = [CCScene node];
    SampleLayer *layer = [SampleLayer node];
    [scene addChild:layer];
    
    return scene;
}



以上が書けたら、試しに「AppDelegate.m」を以下のように修正してみましょう

・AppDelegate.m(77行目あたり)
	// Assume that PVR images have premultiplied alpha
	[CCTexture2D PVRImagesHavePremultipliedAlpha:YES];

	// and add the scene to the stack. The director will run it when it automatically when the view is displayed.
	[director_ pushScene: [SampleLayer scene]];

	
	// Create a Navigation Controller with the Director
	navController_ = [[UINavigationController alloc] initWithRootViewController:director_];
	navController_.navigationBarHidden = YES;



IntoroLayerではなく新しく作った画面が表示されます。
(まだ何もないので真っ黒な画面が表示されるだけですが…)

これらの処理は、新しく画面を作る時は必ず必要になります。
HolloWorldLayerにもIntroLayerにも同じ記述がありますね。
コピペでOKです(^ω^)

画面の遷移に特殊効果を付ける


単にreplaceSceneメソッドを使って遷移するだけでは、
一瞬で画面が切り替わるだけで、ちょっと見栄えがよくありません(´・ω・`)

cocos2dでは画面遷移の時の色々な効果が付けられる仕組みがあります。

たくさんあるのですがその中の一例を

クラス名効果
CCTransitionFade
CCTransitionFade
フェードイン
クロスフェード
CCTransitionFlipX
CCTransitionFlipY
画面をX,Y軸方向に回転する
CCTransitionPageTurnページめくり
CCTransitionFadeTR
CCTransitionFadeBL
左下、右上からタイルをめくる
CCTransitionRotoZoom画面が縮小して消える
CCTransitionSlideInL
CCTransitionSlideInB
CCTransitionSlideInR
CCTransitionSlideInT
次画面が左、下、右、上からスライドする

使用例(CCTransitionFade)
 CCTransitionFade *trans = [CCTransitionFade transitionWithDuration:1.0 scene:[【遷移先のCCLayer】scene]];
 [[CCDirector sharedDirector] replaceScene:trans];



公式サイトのサンプルプログラムで一通りの遷移効果は見られるので、
それを見ながら気に入ったものを探すのがいいでしょう(^ω^)


サンプルプログラム


IntroLayerとHollowWorldLayerを削除して新しいLayerを2つ作り
・CCTransitionFade
・CCTransitionFlipX
・CCTransitionSlideInB
・CCTransitionPageTurn
を使って遷移したりするサンプルを作ってみました。


【GitHub】
github.com/ouka-tenshi/iOS-Sample/tree/master/Cocos2dSceneTransSample


【実行結果】
【iPhoneアプリ】「cocos2d for iPhone」でゲームアプリを作ってみる(CCSceneとCCLayerを使って画面遷移をする):サンプルプログラム1

【iPhoneアプリ】「cocos2d for iPhone」でゲームアプリを作ってみる(CCSceneとCCLayerを使って画面遷移をする):サンプルプログラム2

【iPhoneアプリ】「cocos2d for iPhone」でゲームアプリを作ってみる(CCSceneとCCLayerを使って画面遷移をする):サンプルプログラム3




       |
       |
 : : :::::::,. -─´、て
::: :: :::Σco===、!,_
: : :: :::::l´i(ノリハノリ)      次回からいよいよゲームを作り始めます。ここまで長かったなあ…
 : : :::::ルlリ⊃⊂ヽ
 : : ::::(( //xxxxヽ、─────────────────
    /~~~
  ./


関連記事

コメントは受け付けていません。