読者です 読者をやめる 読者になる 読者になる

developer_RYO’s blog

スマホアプリやPCゲーム、音楽やイラストを自由気ままに作っている人の技術ログです

ccos2dxでモーダルウィンドウを実装しました。

こんにちは。

音ゲーとは別に、パズル系のアプリを作っているのですが、
タイトル画面でボタンを押したときにモーダルウィンドウ的なものを実装したかったので、下記のサイトを参考にして
モーダルウィンドウをつくってみました。

[Cocos2d-x] モーダルレイヤを作成する | Sun Limited Mt.

▪️タイトル画面のメニューボタンなどを押したときの処理に、
auto 変数名 = ModalLayer::create();
と書けば、タッチ時にウィンドウが生成されるはずです。

▪️ウィンドウ内でのラベルやボタンの配置などは、void modalHowToPlay() や、
void modalStart()で実装を予定しています。
ゲームの難易度を設定するとき、ゲームの遊び方を説明するときなどで、
必要となるパーツが違ってくると考えております。

▪️モーダルウィンドウがどのような動き(拡大縮小とか)をして生成されるかは
modalMoving()で決めています。もし使いたい人で、動きが気に入らない人はいじってみてください。



ヘッダファイル

//モーダルレイヤーを作成します。

#include "cocos2d.h"

class ModalLayer : public cocos2d::Layer
{
public:
    virtual bool init();
    CREATE_FUNC(ModalLayer);
    
    //モーダルウィンドウが生成したときの動きを決める。
    void modalMoving();
    
    //遊びかた説明用レイヤー設定
    void modalHowToPlay();
    
    //ゲームの難易度レイヤー設定
    void modalStart();
    
    //タイトル画面に戻るレイヤー設定
    void modalBackTitle();
};

cppファイル

#include "ModalLayer.h"
USING_NS_CC;

bool ModalLayer::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    //画面サイズを取り出す。
    auto director = Director::getInstance();
    auto size = director->getWinSize();
    
    ////////////////////////////////////////////////////
    //タッチイベント取得のプライオリティ的なものを設定する。
    //これを設定しないと、モーダルウィンドウの下のレイヤーにあるものにタッチが反応してしまう。
    
    //タッチしたら全部true返すようにする。
    auto listener = EventListenerTouchOneByOne::create();
    listener->setSwallowTouches(true);
    listener->onTouchBegan = [](Touch *touch,Event*event)->bool{
        
        
        return true;
        
    };
    //プライオリティの設定。
    auto dip = Director::getInstance()->getEventDispatcher();
    dip->addEventListenerWithSceneGraphPriority(listener, this);
    dip->setPriority(listener,-1);
    
    
    //設定ここまで。
    //////////////////////////////////
    
    //モーダルウィンドウ画面を設置する。
    auto frame = Sprite::create("Modal.png");
    frame->setPosition(size.width/2,size.height/2);
    this->addChild(frame);
    
    
    ////////////////////////////////////////////
    //閉じるボタンの配置と、押したときの挙動決定。
    
    //閉じるボタンを押したときの挙動を決定。
    auto *closeItem = MenuItemImage::create("Close.png","Close.png",[this](Ref* sender){
        //ここに、閉じるボタンを押したときの挙動を書く。
        this->removeFromParent();
        
    });
    //閉じるメニュー
    auto closeMenu = Menu::create(closeItem, NULL);
    //モーダルウインドウ画像のアンカー位置+画像の縦横幅半分を加えた位置が右上になるはず。
    closeMenu->setPosition(frame->getPositionX() + frame->getContentSize().width/2,
                           frame->getPositionY()+ + frame->getContentSize().height/2);
    this->addChild(closeMenu);
    
    //閉じるボタンここまで。
    ////////////////////////////////////////////
    
    return true;
}

void ModalLayer::modalMoving()
{
    //縮小した状況から、
    //モーダルウィンドウを拡大して表示する。
    this->setScale(0.001);
    auto ease = EaseElasticOut::create(ScaleTo::create(0.37,0.7),1.8);
    this->runAction(ease);
}