2015年

3月

07日

Cocos2d-x Ver 3.x サイドメニューの作成

モーダルレイヤとui::ScrollViewを使いサイドメニューの画面遷移を作成しました。

Menu1は、元の画面に戻る。

Menu2、Menu3は、次の画面に飛ぶようにしています。

Cocos2dx 3.x C++言語
SideMenuScene.hを次のように変更してみてください。

#ifndef __Sidemenu__SideMenuScene__

#define __Sidemenu__SideMenuScene__


#include "cocos2d.h"

#include "extensions/cocos-ext.h"

#include "ui/CocosGUI.h"


USING_NS_CC;

USING_NS_CC_EXT;

using namespace ui;


class SideMenuScene : public cocos2d::Layer

{

protected:

    void addLayer(Ref *pSender);

public:

    static cocos2d::Scene* createScene();

    virtual bool init();

    

    MenuItemImage* backButton;

    

    // スタートボタン押下時の処理宣言 戻る Object → Ref に変更

    void pushMenu01(Ref *pSender);

    // スタートボタン押下時の処理宣言 戻る Object → Ref に変更

    void pushMenu02(Ref *pSender);

    // スタートボタン押下時の処理宣言 戻る Object → Ref に変更

    void pushMenu03(Ref *pSender);

    

    CREATE_FUNC(SideMenuScene);

};


#endif /* defined(__Sidemenu__SideMenuScene__) */


SideMenuScene..cppを次のように変更してみてください。

#include "SideMenuScene.h"

#include "SecondScene.h"

//音をならすためにinclude

#include "SimpleAudioEngine.h"

USING_NS_CC;


Scene* SideMenuScene::createScene()

{

    auto scene = Scene::createWithPhysics();

    auto layer = SideMenuScene::create();

    scene->addChild(layer);

    

    return scene;

}

bool SideMenuScene::init()

{

    if (!Layer::init())

        return false;

    

    auto director = Director::getInstance();

    auto winSize = director->getWinSize();

    

    // 背景の追加

    auto background = Sprite::create("fire1-1@2x.png");

    background->setPosition(Vec2(winSize.width / 2.0, winSize.height / 2.0));

    this->addChild(background);

    

    //_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

    //サイドメニューボタンを設置

    // ボタンを押した時にメソッドを呼び出す.h = void pushStart01(Ref *pSender); 宣言必要

    backButton = MenuItemImage::create("Back.png" //表示

                                       "BackSelected.png"//タップ時の画像

                                       CC_CALLBACK_1(SideMenuScene::addLayer, this));

    

    backButton->setPosition(Vec2(winSize.width /2 - 260 ,winSize.height/2 + 510));

    

    //create menu, it's an autorelease object

    auto menu = Menu::create(backButton, NULL);

    

    menu->setPosition(Point::ZERO);

    

    this->addChild(menu, 1);

    

    //_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

    

    return true;

}



#define kModalLayerPriority -1


void SideMenuScene::addLayer(Ref *pSender)

{

    // 効果音を鳴らす

    CocosDenshion::SimpleAudioEngine::getInstance()->playEffect("onepoint26.mp3");


    //backButtonを非表示に

    backButton->setVisible(false);

    

    //////////////////////////////

    // layerの生成

    auto layer = Layer::create();

    

    // モーダルレイヤ ここから

    auto listener = EventListenerTouchOneByOne::create();

    listener->setSwallowTouches(true);

    listener->onTouchBegan = [](Touch *touch,Event*event)->bool{

        return true;

    };

    

    auto dip = layer->getEventDispatcher();

    dip->addEventListenerWithSceneGraphPriority(listener, this);

    dip->setPriority(listener, kModalLayerPriority);

    // モーダルレイヤ ここまで

    

    auto size = Director::getInstance()->getVisibleSize();

    ui::ScrollView* sc = ui::ScrollView::create();

    sc->setContentSize(size);

    sc->setBackGroundColor(Color3B(245, 245, 220));

    sc->setBackGroundColorType(Layout::BackGroundColorType::SOLID);

    sc->setBounceEnabled(true);

    sc->setDirection(ui::ScrollView::Direction::VERTICAL);

    sc->setContentSize(Size(400,size.height));

    sc->setInnerContainerSize(Size(400, sc->getContentSize().height + 400 ));

    

    sc->setPosition(Vec2(0,size.height - sc->getContentSize().height ));

    

    auto Sprite00 = Sprite::create("menu.png");

    Sprite00->setPosition(Vec2(Sprite00->getContentSize().width / 2.0f,

                               sc->getContentSize().height - Sprite00->getContentSize().height + 400));

    sc->addChild(Sprite00,1);

    

    

    auto button00 = MenuItemImage::create("menu01.png"// 通常状態の画像

                                          "menu00-hover.png"// 押下状態の画像

                                          CC_CALLBACK_1(SideMenuScene::pushMenu01, this));

    

    auto button01 = MenuItemImage::create("menu02.png"// 通常状態の画像

                                          "menu00-hover.png"// 押下状態の画像

                                          CC_CALLBACK_1(SideMenuScene::pushMenu02, this));

    

    auto button02 = MenuItemImage::create("menu03.png"// 通常状態の画像

                                          "menu00-hover.png"// 押下状態の画像

                                          CC_CALLBACK_1(SideMenuScene::pushMenu03, this));

    

    button00->setPosition(Vec2(button00->getContentSize().width / 2.0f,

                               sc->getContentSize().height - button00->getContentSize().height + 300));

    button01->setPosition(Vec2(button01->getContentSize().width / 2.0f,

                               sc->getContentSize().height - button01->getContentSize().height + 200));

    button02->setPosition(Vec2(button02->getContentSize().width / 2.0f,

                               sc->getContentSize().height - button02->getContentSize().height + 100));

    

    //メニューを作成 自動解放オブジェクト

    auto menu = Menu::create(button00, button01, button02, NULL);

    

    menu->setPosition(Point::ZERO);

    // メニューを追加

    sc->addChild(menu, 1);

    

    layer->addChild(sc);

    

    addChild(layer);

}


// pushStart01ボタン

void SideMenuScene::pushMenu01(Ref *pSender)

{

    CCLOG("pushMenuボタン01");

    // 効果音を鳴らす

    CocosDenshion::SimpleAudioEngine::getInstance()->playEffect("onepoint26.mp3");

    

    // 遷移先の画面のインスタンス

    Scene *pScene = SideMenuScene::createScene();

    

    // 0.5秒かけてフェードアウトしながら次の画面に遷移します

    //    引数1:フィードの時間

    //    引数2:移動先のシーン

    //    引数3:フィードの色(オプション)

    TransitionFade* transition = TransitionFade::create(0.5f, pScene);

    

    // 遷移実行  遷移時のアニメーション

    // 直前のsceneはもう使わないから捨ててしまう方法。基本はこれになります。

    Director::getInstance()->replaceScene(transition);

    

}


// pushStart02ボタン

void SideMenuScene::pushMenu02(Ref *pSender)

{

    CCLOG("pushMenuボタン02");

    // 効果音を鳴らす

    CocosDenshion::SimpleAudioEngine::getInstance()->playEffect("onepoint26.mp3");

    

    // 遷移先の画面のインスタンス

    Scene *pScene = SecondScene::createScene();

    

    // 0.5秒かけてフェードアウトしながら次の画面に遷移します

    //    引数1:フィードの時間

    //    引数2:移動先のシーン

    //    引数3:フィードの色(オプション)

    TransitionFade* transition = TransitionFade::create(0.5f, pScene);

    

    // 遷移実行  遷移時のアニメーション

    // 直前のsceneはもう使わないから捨ててしまう方法。基本はこれになります。

    Director::getInstance()->replaceScene(transition);

}


// pushStart03ボタン

void SideMenuScene::pushMenu03(Ref *pSender)

{

    CCLOG("pushMenuボタン03");

    // 効果音を鳴らす

    CocosDenshion::SimpleAudioEngine::getInstance()->playEffect("onepoint26.mp3");

    

    // 遷移先の画面のインスタンス

    Scene *pScene = SecondScene::createScene();

    

    // 0.5秒かけてフェードアウトしながら次の画面に遷移します

    //    引数1:フィードの時間

    //    引数2:移動先のシーン

    //    引数3:フィードの色(オプション)

    TransitionFade* transition = TransitionFade::create(0.5f, pScene);

    

    // 遷移実行  遷移時のアニメーション

    // 直前のsceneはもう使わないから捨ててしまう方法。基本はこれになります。

    Director::getInstance()->replaceScene(transition);

}


SecandScene.hを次のように変更してみてください。

#ifndef __Sidemenu__SecondScene__

#define __Sidemenu__SecondScene__


#include "cocos2d.h"


USING_NS_CC;


class SecondScene : public cocos2d::Layer

{

public:

    static Scene *createScene();

    virtual bool init();

    CREATE_FUNC(SecondScene);

    

    void makeBackground();

    

    // スタートボタン押下時の処理宣言 戻る Object → Ref に変更

    void pushBack(cocos2d::Ref *pSender);

};


#endif /* defined(__Sidemenu__SecondScene__) */


SecandScene.cppを次のように変更してみてください。

#include "SecondScene.h"

#include "SideMenuScene.h"

//音をならすためにinclude

#include "SimpleAudioEngine.h"


Scene *SecondScene::createScene()

{

    auto scene = Scene::create();

    auto layer = SecondScene::create();

    scene->addChild(layer);

    return scene;

}


bool SecondScene::init()

{

    if (! Layer::init()) {

        return false;

    }

    

    // バックグラウンド

    makeBackground();

    

    //画面サイズを取得

    Size winSize = Director::getInstance()->getVisibleSize();

    

    //戻るボタンを設置

    auto backButton = MenuItemImage::create(

                                            "CloseNormalBack.png"//表示

                                            "CloseSelected.png"//タップ時の画像

                                            CC_CALLBACK_1(SecondScene::pushBack, this));

    

    backButton->setPosition(Point(winSize.width /2 ,winSize.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 SecondScene::makeBackground()

{

    //画面の座標関係の詳しい説明はここhttp://www.cocos2d-x.org/wiki/Coordinate_System

    //画面サイズを取得

    Size winSize = Director::getInstance()->getVisibleSize();

    //マルチレゾリューション対応がどうとか

    Point origin = Director::getInstance()->getVisibleOrigin();

    

    // バックグランドカラー

    auto background = LayerColor::create(Color4B::ORANGE,

                                         winSize.width,

                                         winSize.height);

    //バックグランドカラー追加 第2引数は表示順

    this->addChild(background, 0);

    

    //タイトルを設置

    auto lbl_title = Label::createWithSystemFont

    ("Second", "HiraKakuProN-W6", 100);

    lbl_title->setPosition(Point(origin.x + winSize.width/2,

                                 origin.y + winSize.height

                                 -lbl_title->getContentSize().height));

    this->addChild(lbl_title,1);

}


// pushBackボタン

void SecondScene::pushBack(Ref *pSender)

{

    // 効果音を鳴らす

    CocosDenshion::SimpleAudioEngine::getInstance()->playEffect("onepoint26.mp3");

    

    // 遷移先の画面のインスタンス

    Scene *pScene = SideMenuScene::createScene();

    

    // 0.5秒かけてフェードアウトしながら次の画面に遷移します

    //    引数1:フィードの時間

    //    引数2:移動先のシーン

    //    引数3:フィードの色(オプション)

    TransitionFade* transition = TransitionFade::create(0.5f, pScene);

    

    //遷移実行  遷移時のアニメーション

    Director::getInstance()->replaceScene(transition);

}


GitHub Sidemenu

  

目 次