複数のシーン作成と画面遷移を実装してみます。

メインゲームを実装する前ですが、ゲームの顔となるタイトルシーンを実装してみましょう。
形から入ってます。

まずは、スタートボタンを配置しただけの簡単な画面を追加します。

完成イメージ

シンプルなタイトルシーン 完成イメージ
シンプルなタイトルシーン 完成イメージ

画像と文字だけのシンプルな画面ですね。
寂しい、、、

実装

タイトルシーン用のファイルを追加する

以下のファイルを新規作成します。

  • TitleScene.h
 1#ifndef __TITLE_SCENE_H__
 2#define __TITLE_SCENE_H__
 3
 4#include "cocos2d.h"
 5
 6class TitleScene : public cocos2d::CCLayer
 7{
 8public:
 9    virtual bool init();
10    static cocos2d::Scene* createScene();
11    CREATE_FUNC(TitleScene);
12
13    virtual void menuStartCallback(Ref* unused);
14};
15#endif // __TITLESCENE_H__
16
  • TitleScene.cpp
 1#include "TitleScene.h"
 2#include "GameScene.h"
 3
 4using namespace cocos2d;
 5
 6Scene* TitleScene::createScene()
 7{
 8    auto scene = Scene::create();
 9    auto layer = TitleScene::create();
10
11    scene->addChild(layer);
12
13    return scene;
14}
15
16bool TitleScene::init()
17{
18    if (Layer::init() == false)
19    {
20        return false;
21    }
22    Size winSize = Director::getInstance()->getWinSize();
23
24    auto pBg     = Sprite::create("img/background.jpg");
25    pBg->setPosition(Vec2(
26        winSize.width  * 0.5,
27        winSize.height * 0.5
28    ));
29    this->addChild(pBg, 50);
30
31    auto pStartItem = MenuItemImage::create(
32        "start_on.png",
33        "start_off.png",
34        CC_CALLBACK_1(TitleScene::menuStartCallback, this)
35    );
36    pStartItem->setPosition(Vec2(
37        winSize.width  * 0.5,
38        winSize.height * 0.5
39    ));
40
41    auto pMenu = Menu::create(pStartItem, NULL);
42    pMenu->setPosition(Point::ZERO);
43    this->addChild(pMenu);
44
45    return true;
46}
47
48void TitleScene::menuStartCallback(Ref* unused)
49{
50    auto scene = GameScene::createScene();
51    TransitionFade* tran = TransitionFade::create(1.8f, scene);
52    Director::getInstance()->replaceScene(tran);
53}
54

ボタン

MenuItem系のクラスを利用すると、コード上にタップイベントを拾うコードの実装が不要なため、とても簡単にボタンを実装することができます。

MenuItemImageはcocos2d-xでプロジェクトを生成した直後のサンプルソースにも入っているので、使い方もすぐにわかりますね。

ボタンが押下されたときの処理指定について、

2.x系ではmenu_selectorを使います。

3.x系ではCC_CALLBACK_1を使いますが、2.x系と異なりコールバックで呼び出す関数で引数を取る点に注意してください。

CC_CALLBACK_Nは1 - 4まであって、引数の数によって使い分けるようです。
以下を参考にしました。

技術は熱いうちに打て!
【cocos2d-x】CC_CALLBACKを使いこなす
http://blog.dalt.me/973

画面遷移

TitleScene::menuStartCallbackに画面遷移の処理を実装します。

画面遷移といっても、遷移させる先のシーンを生成して、DirectorにreplaceSceneを指示してあげるだけなので、こちらも簡単です。

画面が一瞬で切り替わるのは味気ないので、今回画面がフェードで切り替わる演出(トランジション)を入れています。
こちらもTransitionクラスで簡単に実装。

Transitionクラスにはほかにも数種類ありますが、よく使うのはフェード、クロスフェードでしょうか。 あまり派手な演出は、ちょっと使いにくいですよね。

トランジションのサンプルは、Cocoa部さんがGIFアニメ付きで以下がまとめてくださいっていました。

Cocoa部
【GIFアニメ付き】CCTransitionによる画面遷移アニメーション一覧を作ってみた – Cocos2d-x -
http://cocoabu.com/cctransition

ファイルの配置

cppファイル、hファイルは動的に読み取るよう実装済みのため、あとはClassesディレクトリにファイルを追加すればOKです。
動的配置は以下を参照してください。

[cocos2d-x]WindowsでAndroidアプリ開発日誌1:ディレクトリ構成変更と自動読み込み
atuweb 開発ブログ

起動シーンの変更

AppDelegate.cppを修正し、アプリ起動直後に表示するシーンを変更しましょう。

1- #include "GameScene.h"
2+ #include "TitleScene.h"
3
4~略~
5
6-     auto scene = GameScene::createScene();
7+     auto scene = TitleScene::createScene();
8

これでシーンの追加と画面遷移が実装できました。


背景と画像のみの画面のためコードもシンプルですが、cocos studioを利用すればもっと簡単に実装できますので、次のご紹介いたします。