art-ts-start-i

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

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

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

左のものが、そのイメージです。


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

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

TitleScene.h

#ifndef __TITLE_SCENE_H__
#define __TITLE_SCENE_H__

#include "cocos2d.h"

class TitleScene : public cocos2d::CCLayer
{
public:
    virtual bool init();
    static cocos2d::Scene* createScene();
    CREATE_FUNC(TitleScene);

    virtual void menuStartCallback(Ref* unused);
};
#endif // __TITLESCENE_H__

TitleScene.cpp

#include "TitleScene.h"
#include "GameScene.h"

using namespace cocos2d;

Scene* TitleScene::createScene()
{
    auto scene = Scene::create();
    auto layer = TitleScene::create();

    scene->addChild(layer);

    return scene;
}

bool TitleScene::init()
{
    if (Layer::init() == false)
    {
        return false;
    }
    Size winSize = Director::getInstance()->getWinSize();

    auto pBg     = Sprite::create("img/background.jpg");
    pBg->setPosition(Vec2(
        winSize.width  * 0.5,
        winSize.height * 0.5
    ));
    this->addChild(pBg, 50);

    auto pStartItem = MenuItemImage::create(
        "start_on.png",
        "start_off.png",
        CC_CALLBACK_1(TitleScene::menuStartCallback, this)
    );
    pStartItem->setPosition(Vec2(
        winSize.width  * 0.5,
        winSize.height * 0.5
    ));

    auto pMenu = Menu::create(pStartItem, NULL);
    pMenu->setPosition(Point::ZERO);
    this->addChild(pMenu);

    return true;
}

void TitleScene::menuStartCallback(Ref* unused)
{
    auto scene = GameScene::createScene();
    TransitionFade* tran = TransitionFade::create(1.8f, scene);
    Director::getInstance()->replaceScene(tran);
}

ボタン

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:ディレクトリ構成変更と自動読み込み
cocos2d-xを使ってオリジナルアプリを作ってみます。 実装するアプリは「簡単なパズルゲーム」にする予定です。 環境 ...

起動シーンの変更

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

- #include "GameScene.h"
+ #include "TitleScene.h"

~略~

-     auto scene = GameScene::createScene();
+     auto scene = TitleScene::createScene();

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


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

icon-ths-app
atuwebが実装した次世代お経アプリTap Hannya Shingyoを、ぜひDLしてください。

スポンサーリンク
ad_336
ad_336
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク
ad_336