Cocos2d-x v3.0-beta2でタイトル画面を作成


Cocos2d-x v3.0-beta2を使ってシンプルなゲームを作ってみる。
今回はゲーム画面へ遷移するボタンを持ったタイトル画面を作成。

前提

  • Cocos2d-x v3.0-beta2がインストール済み
  • C++のMygameCというプロジェクトを作成済み
  • iOSを対象

やりたいこと

  • 画面を縦にしたい
  • 新しいクラスを作成
  • 背景をつけたい
  • ゲーム画面へ移動するボタン
  • ボタンをタップすると音が出る

内容

画面を縦にしたい

Device OrientationのPortraitにチェックをすればOK。
スクリーンショット 2014-01-30 12.35.15

以上。

新しいクラスを追加

タイトル画面としてTitleSceneを作成する。

XcodeでNew Fileを選択。
スクリーンショット 2014-01-30 23.05.42

C++ Classを選択してNext
スクリーンショット 2014-01-30 23.06.47

TitleSceneとして追加。
スクリーンショット 2014-01-30 23.08.50

プロジェクト作成時は、アプリ起動時のシーンがHellowWorldSceneとなっているので、これをTitleSceneに変更

#include "AppDelegate.h"
//TitleScene.hをインクルード
#include "TitleScene.h"

USING_NS_CC;

AppDelegate::AppDelegate() {

}

AppDelegate::~AppDelegate() 
{
}

bool AppDelegate::applicationDidFinishLaunching() {
    // initialize director
    auto director = Director::getInstance();
    auto eglView = EGLView::getInstance();

    director->setOpenGLView(eglView);

    // turn on display FPS
    director->setDisplayStats(true);

    // set FPS. the default value is 1.0/60 if you don't call this
    director->setAnimationInterval(1.0 / 60);

    //HelloWordからTitleに変更
    // create a scene. it's an autorelease object
    auto scene = Title::createScene();

    // run
    director->runWithScene(scene);

    return true;
}

以上。

その他はまとめてソースコードを晒す

TitleScene.h

#ifndef __MyGameC__TitleScene__
#define __MyGameC__TitleScene__

#include "cocos2d.h"


class Title : public cocos2d::Layer
{
public:
    static cocos2d::Scene* createScene();
    //初期化のメソッド
    virtual bool init();
    
    //create()を使えるようにしている。
    CREATE_FUNC(Title);
    void pushStart(Object *pSender); //スタートボタン押下時の処理宣言
};


#endif /* defined(__MyGameC__TitleScene__) */

TitleScene.cpp

#include "TitleScene.h"
#include "StageScene.h"
//音をならすためにinclude
#include "SimpleAudioEngine.h"

//using namespace cocos2d;の略。cocos2dの名前空間を利用
USING_NS_CC;

Scene *Title::createScene(){
    
    // 'scene' is an autorelease object
    auto scene = Scene::create();
    
    // 'layer' is an autorelease object
    auto layer = Title::create();
    
    // add layer as a child to scene
    scene->addChild(layer);
    
    // return the scene
    return scene;

    
}


bool Title::init(){
    
    
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
    
    //画面の座標関係の詳しい説明はここ http://www.cocos2d-x.org/wiki/Coordinate_System
    Size visibleSize = Director::getInstance()->getVisibleSize(); //画面のサイズを取得
    Point origin = Director::getInstance()->getVisibleOrigin();  //マルチレゾリューション対応がどうとか
    
    //背景を設置
    Sprite* background = Sprite::create("background_title.jpg");
    background->setPosition(Point(origin.x + visibleSize.width/2, origin.y + visibleSize.height/2));
    this->addChild(background, 0); //第2引数は表示順
    
    
    //タイトルを設置
    auto lbl_title = LabelTTF::create("タイトル", "HiraKakuProN-W6", 30);
    lbl_title->setPosition(Point(origin.x + visibleSize.width/2,
                                 origin.y + visibleSize.height
                                 -lbl_title->getContentSize().height));
    this->addChild(lbl_title,1);
    
    //スタートボタンを設置
    auto startButton = MenuItemImage::create(
                                           "CloseNormal.png",  // 通常状態の画像
                                           "CloseSelected.png",  // 押下状態の画像
                                           CC_CALLBACK_1(Title::pushStart, this)); // 押下時のアクション
    
    startButton->setPosition(Point(origin.x + visibleSize.width - startButton->getContentSize().width/2 ,
                                 origin.y + startButton->getContentSize().height/2));
    
    //create menu, it's an autorelease object
    auto menu = Menu::create(startButton, NULL);
    menu->setPosition(Point::ZERO);
    this->addChild(menu, 1);
    
    
    
    
    return true;
}

void Title::pushStart(Object *pSender)
{
    // 効果音を鳴らす
    CocosDenshion::SimpleAudioEngine::getInstance()->playEffect("ComedyWhistle.caf");
    
    
    // 遷移先の画面のインスタンス
    Scene *pScene = Stage::createScene();
    
    // 0.5秒かけてフェードアウトしながら次の画面に遷移します
    //    引数1:フィードの時間
    //    引数2:移動先のシーン
    //    引数3:フィードの色(オプション)
    TransitionFade* transition = TransitionFade::create(0.5f, pScene);
    
    //遷移実行  遷移時のアニメーション http://study-cocos2d-x.info/scenelayer/55/
    Director::getInstance()->replaceScene(transition);
}

また、遷移先としてStageSceneクラスを作成しておく。
StageScene.h

#ifndef __MyGameC__StageScene__
#define __MyGameC__StageScene__

#include "cocos2d.h"

class Stage : public cocos2d::Layer
{
public:
    // there's no 'id' in cpp, so we recommend returning the class instance pointer
    static cocos2d::Scene* createScene();
    //初期化のメソッド
    virtual bool init();
    
    //create()を使えるようにしている。
    CREATE_FUNC(Stage);
    void pushBack(Object *pSender); //戻る    
};


#endif /* defined(__MyGameC__StageScene__) */

StageScene.cpp

#include "StageScene.h"
#include "TitleScene.h"

//using namespace cocos2d;の略。cocos2dの名前空間を利用
USING_NS_CC;


Scene *Stage::createScene(){
    
    // 'scene' is an autorelease object
    auto scene = Scene::create();
    
    // 'layer' is an autorelease object
    auto layer = Stage::create();
    
    // add layer as a child to scene
    scene->addChild(layer);
    
    // return the scene
    return scene;
    
    
}



bool Stage::init(){
    
    
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
    
    //画面の座標関係の詳しい説明はここ http://www.cocos2d-x.org/wiki/Coordinate_System
    Size visibleSize = Director::getInstance()->getVisibleSize(); //画面のサイズを取得
    Point origin = Director::getInstance()->getVisibleOrigin();  //マルチレゾリューション対応がどうとか
    
    //背景を設置
    Sprite* background = Sprite::create("stage.jpg");
    background->setPosition(Point(origin.x + visibleSize.width/2, origin.y + visibleSize.height/2));
    this->addChild(background, 0); //第2引数は表示順
    
    
    
    //戻るボタンを設置
    auto backButton = MenuItemImage::create(
                                             "CloseNormal.png",  //表示
                                             "CloseSelected.png",  //タップ時の画像
                                             CC_CALLBACK_1(Stage::pushBack, this));
    
    backButton->setPosition(Point(origin.x + visibleSize.width - backButton->getContentSize().width/2 ,
                                   origin.y + backButton->getContentSize().height/2));
    
    //create menu, it's an autorelease object
    auto menu = Menu::create(backButton, NULL);
    menu->setPosition(Point::ZERO);
    this->addChild(menu, 1);
    
    
    
    
    return true;
}

void Stage::pushBack(Object *pSender)
{
    // 遷移先の画面のインスタンス
    Scene *pScene = Title::createScene();
    
    // 0.5秒かけてフェードアウトしながら次の画面に遷移します
    //    引数1:フィードの時間
    //    引数2:移動先のシーン
    //    引数3:フィードの色(オプション)
    TransitionFade* transition = TransitionFade::create(0.5f, pScene);
    
    //遷移実行  遷移時のアニメーション http://study-cocos2d-x.info/scenelayer/55/
    Director::getInstance()->replaceScene(transition);


}

以上。


投稿者: しんじ

ベトナムでオフショア開発会社経営中 www.bit-vietnam.com 。サービス開発が趣味。web系は主にPHPで、スマホアプリはswiftで。最近はエンジニア向けの英語勉強webアプリ エングリッシュ e-lish.io を作りました。

コメントを残す

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

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)