Cocos2d-x

Cocos2d-x モーダルレイヤーの作り方

投稿日:2016年7月25日 更新日:

layer3

この記事ではCocos2d-xによるモーダルレイヤー実装のやり方について説明します。

 

 

モーダルレイヤーとは

モーダルとは操作が完了するまで親への操作を受け付けなくさせるという意味の言葉です。つまりモーダルレイヤーとは「そのレイヤーが存在している間、そのレイヤーでしかタップ操作を受け付けないレイヤー」のことです。

 

それでは具体的にモーダルレイヤーの仕組みを見ていきましょう。

 

 

レイヤーを重ねてモーダルレイヤーの仕組みを理解する

レイヤーを重ねる

Cocos2d-xではレイヤーの上にスプライトを重ねて画面を構成します。このレイヤーは何枚も重ねることが可能です。

 

例えば、メインのゲーム画面上にメニューのような画面を表示させたい場合、「メニュー画面レイヤー」を作成して「メインのゲーム画面レイヤー」に追加することで、メニュー画面が作成できます。

layers

 

 

レイヤーを重ねることの不都合

ただし、単純にレイヤーを追加するだけでは不都合を引き起こす場合があります。両方のレイヤーにタップイベントリスナーが設定されている場合、メニュー画面だけを操作したいのに、メインのゲーム画面の操作も一緒に行ってしまうのです。

 

layer3

これを回避するには、メニュー画面レイヤーをモーダルレイヤーとして実装すれば良いのです。

 

それでは実際のモーダルレイヤーのコードを見ていきましょう。

 

 

モーダルレイヤーのコード

 

ModalLayer.h


#define kModalLayerPriority -1

#include <stdio.h>;
#include <cocos2d.h>;

class ModalLayer : public cocos2d::Layer{
public:

    virtual bool init();

    // touch
    virtual bool onTouchBegan(cocos2d::Touch* pTouch, cocos2d::Event* pEvent);
    virtual void onTouchEnded(cocos2d::Touch* pTouch, cocos2d::Event* pEvent);
    virtual void onTouchMoved(cocos2d::Touch* pTouch, cocos2d::Event* pEvent);
    
    
    CREATE_FUNC(ModalLayer);
    
};

 

 

 

ModalLayer.cpp

#include "ModalLayer.h"

using namespace cocos2d;

bool ModalLayer::init(){
    if(!Layer::init()){
        return false;
    }
  
    // event listener
    auto listener = EventListenerTouchOneByOne::create();
    listener->setSwallowTouches(true);
    listener->onTouchBegan = CC_CALLBACK_2(ModalLayer::onTouchBegan, this);
    listener->onTouchEnded = CC_CALLBACK_2(ModalLayer::onTouchEnded, this);
    listener->onTouchMoved = CC_CALLBACK_2(ModalLayer::onTouchMoved, this);
    
    this->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, this);
    this->getEventDispatcher()->setPriority(listener, kModalLayerPriority);
    
    return true;
}

bool ModalLayer::onTouchBegan(Touch* pTouch, Event* pEvent){
    return true;
}

void ModalLayer::onTouchMoved(Touch* pTouch, Event* pEvent){
    
}

void ModalLayer::onTouchEnded(Touch* pTouch, Event* pEvent){
    
}

 

 

モーダルレイヤー実現の仕組み

ポイントは以下の2点です。

・listener->setSwallowTouches(true)

優先度の高いイベントだけを実行するメソッドです。

今回の場合、「メニュー画面レイヤー」は「メインゲーム画面レイヤー」に対して前面ノードです。この時、この2つのレイヤーのイベントリスナーの優先度の関係は「メニュー画面レイヤー」>「メインゲーム画面レイヤー」となっています。※後から追加されたほうが前面ノード扱いとなります。

 

・onTouchBegan{return true;}

モーダルレイヤ側のonTouchBeganは処理の最後に必ずtrueを返す必要がありますtrueを返すことで初めてonSwallowTouches(true)の効果が得られます。もし、onTouchBeganがfalseを返した場合、下位レイヤーであるメインゲーム画面レイヤーまでタッチイベントが透過してしまいます。

 

 

このモーダルレイヤをメインゲーム画面レイヤーにaddChildしている間、モーダルレイヤのみの操作が可能になります。後はモーダルレイヤ上に実現したい処理を追加してください。

 

 

まとめ

モーダル化したいレイヤー側でsetSwallowTouches(true)とonTouchBegan{return true;}を記述することでモーダルレイヤーの実装が可能となります。

 

 

また、コードの丸暗記だけでなく、このような仕組みを知っておくことで、他の言語でも理解の応用が効くようになるのではないでしょうか。

 

PrainGoogleAdSense

PrainGoogleAdSense

-Cocos2d-x
-

執筆者:


comment

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

関連記事

アプリ 購入画面

Cocos2d-x SDKBoxを使ってアプリ内課金をするやり方 プログラム実装~実機テストまでの13の手順

この記事では、Cocos2d-xのSDKBoxを利用したiOSアプリ内課金のプログラム実装から実機テストのやり方まで、一連の流れで説明します。     アプリ課金の実機テストを、実 …

SDKBoxを使ってアプリ内課金をするやり方 インストール編

この記事では、アプリ課金のためのSDKBoxインストールのやり方を説明します。   環境 XCode:7.3.1 Cocos2d-x:3.9     SDKBoxについて …

エフェクト

Cocos2d-x エフェクトアニメーションの終了と同時にエフェクトを消す方法

この記事では、アニメーションを表示し終わった後に、アニメーション表示を消す方法を紹介します。   ゲーム中であれば、アニメーションが1ループしたら消してしまいたいことも多いと思います。 方法 …

cocos2dx

Cocos2d-x カスタムイベントを削除するタイミング

こんにちは、akiです。 この記事ではカスタムイベントを削除するタイミングについて説明します。   掲題の通り、カスタムイベントを登録した場合、不要になった際に明示的に削除してやる必要があり …

タイムチャート

ゲーム制作 Cocos2d-x関連 第15回 「ダメージエフェクトの演出」

おそらくここが一番大変なところですが、ゲーム完成までもう一歩です!   第12回 「ボールヒットエフェクトの表示」でヒットエフェクトを表示しました。その時とやり方はほぼ同じですが、エフェクト …