cocos2dのイベント設定

cocos2d-x v3.2でタップを制御のやり方より以下の方がメソッドが独立していて書きやすい。

HelloWorldScene.h内でイベントを設定

public:
    (中略)
    void onTap(cocos2d::Ref* sender,cocos2d::extension::Control::EventType controlEvent);
    (中略)
};

ControlButtonを利用して作成したボタンにイベントを設定する場合にはHelloWorldScene.cpp内で以下のように設定(TOUCH_UP_INSIDEを設定)

auto button = ControlButton::create(Scale9Sprite::create("button.png"));
button -> setAdjustBackgroundImage(false);
button -> setPosition(BUTTON_POS_X,BUTTON_POS_Y);
button -> setTitleForState("Start", Control::State::NORMAL);
button -> addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::onTap), Control::EventType::TOUCH_UP_INSIDE);

以下のようにメソッドを作成すればボタンタップのタイミングでログが出力される。

void HelloWorld::onTap(cocos2d::Ref* sender,cocos2d::extension::Control::EventType controlEvent)
{
    log("HelloWorld::onTap()");
}

cocos2d-x 3でControlButtonを利用

cocos2d-x 3でControlButtonをするには以下を追加します

HelloWorldScene.hではcocos2d.hの下でControlButtonが定義されたextensions/cocos-ext.hを読み込みます

#include "cocos2d.h"
#include "extensions/cocos-ext.h"

HelloWorldScene.cppではまずUSING_NS_CCの下あたりでネームスペースを有効にします

USING_NS_CC;
USING_NS_CC_EXT;

そうするとControlButtonクラスが利用可能になります。

auto button = ControlButton::create(Scale9Sprite::create("button.png"));
button->setAdjustBackgroundImage(false);

cocos2d-xでのgetLocationInView()とgetLocation()

cocos2d-xでどうもY座標の取得がうまくいかなかったのですがgetLocationInView()とgetLocation()で挙動が異なるのが原因でした。詳しくは以下を参照

参考:cocos2d-xでの座標系（getLocationとgetLocationInViewについて） | ふつーのエンジニアのブログ

getLocation()はOpenGLの座標系（左下）でとるが、getLocationInView()は画面の座標（左上）で座標を取るようです。

Point touchPoint = Vec2(touch->getLocationInView().x, touch->getLocationInView().y);

Point touchPoint = touch->getLocation();

cocos2d-x v3.2でスプライトがタップされたか判定

以下のようにaddEventListenerWithSceneGraphPriority時にスプライト画像とイベントを関連付けるとタップ時にgetCurrentTarget()でスプライト画像を取得しスプライトがタップされたか判定できるようになる。

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    Size visibleSize = Director::getInstance()->getVisibleSize();
    auto sprite = Sprite::create("card_back.png");
    sprite->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
    addChild(sprite,0);

    //イベントリスナーを作成
    auto listener = EventListenerTouchOneByOne::create();
    
    //タッチ開始
    listener->onTouchBegan = [](Touch* touch, Event* event){
        //target : ターゲットのスプライト
        auto target = (Sprite*)event->getCurrentTarget();
        
        //targetBox : タッチされたスプライトの領域
        Rect targetBox = target->getBoundingBox();
        
        //touchPoint : タッチされた場所
        Point touchPoint = Vec2(touch->getLocationInView().x, touch->getLocationInView().y);
        
        //touchPointがtargetBoxの中に含まれているか判定
        if (targetBox.containsPoint(touchPoint))
        {
            log("tapped!!");
            return true;
        }
        
        return false;
    };
    

    
    //イベントリスナーを登録
    this->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, sprite);
    
    return true;
}

参考：Cocos2d-x v3：スプライトのタップ | Lady Wendy

cocos2d-x v3.2でタップを制御2

cocos2d-x v3.2でタップを制御とは異なるタップ制御方法

hに以下の記述をします。

class HelloWorld : public cocos2d::Layer
{
public:
    (中略)
    bool onTouchBegan(cocos2d::Touch* touch,cocos2d::Event* event);
    void onTouchMoved(cocos2d::Touch* touch, cocos2d::Event* event);
    void onTouchEnded(cocos2d::Touch* touch, cocos2d::Event* event);
};

cppには以下を記述します。

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    //イベントリスナーを作成
    auto listener = EventListenerTouchOneByOne::create();
    listener->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan, this);
    listener->onTouchMoved = CC_CALLBACK_2(HelloWorld::onTouchMoved, this);
    listener->onTouchEnded = CC_CALLBACK_2(HelloWorld::onTouchEnded, this);
    //イベントリスナーを登録
    this->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, this);
    return true;
}
bool HelloWorld::onTouchBegan(Touch *touch, Event *event)
{
    log("TouchBegan");
    return true;
}
void HelloWorld::onTouchMoved(Touch *touch, Event *event)
{
    log("Touch Moved!");
}
void HelloWorld::onTouchEnded(Touch *touch, Event *event)
{
    log("Touch Ended!");
}

参考 : Cocos2d-x v3：シングルタッチを受け付ける | Lady Wendy

cocos2d-x v3.2でタップを制御

cocos2d-x v3.2でタップを制御する方法。.cpp内のHelloWorld::init()などで宣言しておくとタップ時にログが出力されます。

//イベントリスナーを作成
auto listener = EventListenerTouchOneByOne::create();
  
//タッチ開始
listener->onTouchBegan = [](Touch* touch, Event* event){
    log("TouchBegan");
    return true;
};
  
//タッチ中
listener->onTouchMoved = [](Touch* touch, Event* event){
    log("TouchMoved");
};

//タッチ終了
listener->onTouchEnded = [](Touch* touch, Event* event){
    log("TouchEnded");
};
  
//イベントリスナーを登録
this->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, this);



参考: Cocos2d-x v3：シングルタッチを受け付ける | Lady Wendy

cocos2d-x v3.2で定数宣言

cocos2d-x v3.2では#defineで定数宣言を行う。(当然大文字で_区切り)



#define FUGA 1
#define HOGE "HOGE"

出力はそのまま利用できる

CCLOG("FUGA is %d",FUGA);
CCLOG("HOGE is %s",HOGE);

cocos2d-x v3.2でボタンを作成

まずボタンが押された際に実装されるfugaメソッドをHelloWorldScene.hで定義

class HelloWorld : public cocos2d::Layer
{
public:
....
    void fuga(cocos2d::Ref* pSender);
....
};

HelloWorldScene.cppでは以下のように定義。

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    auto closeItem = MenuItemImage::create("CloseNormal.png","CloseSelected.png",CC_CALLBACK_1(HelloWorld::fuga, this));
    closeItem->setPosition(Point(400,50));
    auto menu = Menu::create(closeItem,NULL);
    menu->setPosition(Point::ZERO);
    this->addChild(menu,0);
    return true;
}
void HelloWorld::fuga(cocos2d::Ref* pSender)
{
    CCLOG("fuga");
}

MenuItemImage::create()でボタンのインスタンスを作成するもこのままではボタンとして機能しないのでMenu::create()に渡すことでボタンとして機能するようになります。

cocos2d-x v3.2でアクションを同時に行う

Spawn::create()で複数のアクションを同時に行うことができる

Size visibleSize = Director::getInstance()->getVisibleSize();
auto sprite = Sprite::create("Icon-57.png");
sprite->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
this->addChild(sprite,0);
auto move = MoveBy::create(2,Point(10,10));
auto rotate = RotateBy::create(2, 10);
auto spawn = Spawn::create(move, rotate, nullptr);
sprite->runAction(spawn);

cocos2d-x v3.2でアクション繰り返し行う

Repeat::create(アクション名, 繰り返し回数)で繰り返しアクションを行うことができる。」

Size visibleSize = Director::getInstance()->getVisibleSize();
auto sprite = Sprite::create("Icon-57.png");
sprite->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
this->addChild(sprite,0);
auto move = MoveBy::create(1,Point(10,10));
auto rotate = RotateBy::create(1, 10);
auto seq = Sequence::create(move, rotate, nullptr);
auto repeat = Repeat::create(seq, 3);
sprite->runAction(repeat);

RepeatForever::create(アクション名)にするとアクションを永遠に繰り返し処理を行います。

auto repeat = RepeatForever::create(seq);

cocos2d-x v3.2で2つのアクションを連続して行う

Sequence::create()で2つのアクションを連続して行うことができます。

Size visibleSize = Director::getInstance()->getVisibleSize();
auto sprite = Sprite::create("Icon-57.png");
sprite->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
this->addChild(sprite,0);    
auto move = MoveBy::create(2,Point(100,100));
auto rotate = RotateBy::create(2, 90);
auto seq = Sequence::create(move, rotate, nullptr);
sprite->runAction(seq);

cocos2d-x v3.2で点滅アクション

cocos2d-x v3.2で点滅アクション

Size visibleSize = Director::getInstance()->getVisibleSize();
auto sprite = Sprite::create("Icon-57.png");
sprite->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
this->addChild(sprite,0);
auto blink = Blink::create(1,20);
sprite->runAction(blink);

20回点滅します。

他のアクションはcocos2d-x: Action Class Referenceを参考に。

cocos2d-x v3.2で画像を反転

FlipY::create()を利用すると画像が上下反転します。

Size visibleSize = Director::getInstance()->getVisibleSize();
auto sprite = Sprite::create("Icon-57.png");
sprite->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
this->addChild(sprite,0);
auto flip = FlipY::create(true);
sprite->runAction(flip);

cocos2d-x v3.2で画像のアニメーションを作成する

cocos2d-x v3.2で画像のアニメーションを作成する

MoveBy::create()でアニメーション用のインスタンスを作成できるのでrunAction()で実行すると走ることができる。

Size visibleSize = Director::getInstance()->getVisibleSize();
auto sprite = Sprite::create("Icon-57.png");
sprite->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
this->addChild(sprite,0);
auto move = MoveBy::create(2, Point(100,100));
sprite->runAction(move);

第１引数にはアニメーションの秒数を指定できMoveByでは相対移動つまり現在位置から縦100px横100pxに移動するアニメーションを行う。MoveByをMoveToに変更すれば絶対位置で移動する。

拡大・縮小のアニメーションはScaleBy::create()で作成

auto move = ScaleBy::create(2, 1.5);

回転のアニメーションはRotateBy::create()で作成

auto move = RotateBy::create(2, 90);

参考：cocos2d-xで画像をタップしたアニメーションして位置に移動させる

cocos2d-x v3.2でテキストを配置

cocos2d-x v3.2でテキストを配置。

Size visibleSize = Director::getInstance()->getVisibleSize();
auto label = LabelTTF::create("hello world", "Arial", 24);
label->setPosition(Point(visibleSize.width/2,visibleSize.height - label->getContentSize().height ));
this->addChild(label,0);

参考：cocos2d-x v2.xでテキストを配置

cocos2d-x v3.2で画像の基準点を変更する

cocos2d-x v3.2で画像の基準点を変更する。基準点とはそこを基準に移動や拡大縮小が行われるデフォルトでは中央(Point(0.5,0.5))だが以下のようにsetAnchorPoint()でPoint(0,0)を指定すると基準点は左下に移動し、Point(1,1)を指定すると右上に移動する。

Size visibleSize = Director::getInstance()->getVisibleSize();
auto sprite = Sprite::create("Icon-57.png");
sprite->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
sprite->setRotation(45);
sprite->setAnchorPoint(Point(0,0));
this->addChild(sprite,0);

cocos2d-x v3.2で画像の角度を変更する

cocos2d-x v3.2ではsetRotation()で配置する画像の回転を行うことができる。

Size visibleSize = Director::getInstance()->getVisibleSize();
auto sprite = Sprite::create("Icon-57.png");
sprite->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
sprite->setRotation(45);
this->addChild(sprite,0);

cocos2d-x v3.2で画像のサイズを変更

cocos2d-x v3.2ではsetScale()で配置する画像の拡大縮小を行うことができる。

Size visibleSize = Director::getInstance()->getVisibleSize();
auto sprite = Sprite::create("Icon-57.png");
sprite->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
sprite->setScale(2);
this->addChild(sprite,0);

cocos2d-x v3.2で画像を配置

cocos2d-x ver 2.xと cocos2d-x v3.2で画像を配置が変わっていた。

Size visibleSize = Director::getInstance()->getVisibleSize();
auto sprite = Sprite::create("Icon-57.png");
sprite->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
this->addChild(sprite,0);

CCSize→SizeみたいにCCプリフィックスが消えている点、ccp→Point、sharedDirector()→getInstance()といった細かなクラス名、メソッド名が変わっている模様。

cocos2d-x v3.2のインストール

これまでcocos2d-x v2.2.3で勉強してきたけどせっかくなのでここいらでバージョンアップして勉強したいのでcocos2d-x v3.2にチェンジ。

cd ~/cocos2d/cocos2d-x-3.2/
./setup.py

NDK、SDK、ANTのパスを聞かれるがひとまず無視。

これでcocos newコマンドが使えるの以下のコマンドを打ってプロジェクトを作成。

cocos new -p net.hoge.fuga -l cpp -d  ~/cocos2d/cocos2d-x-3.2/projects HelloWorld 

プロジェクトの位置はcocos2d-x v2.2.3と同じくprojectsディレクトリにしておく。

参考:Cocos2d-x v3.2の開発環境を作ってみた