カテゴリー別アーカイブ: cocos2d-x v3

【cocos2d-x v3】 RadioButton の使い方

RadioButton クラスは v3.8 で追加された比較的新しいクラスだ。

  • RadioButtonGroup オブジェクトを生成し、子ノードとしてシーンに追加
  • 選択肢の分だけ、RadioButton を生成し、RadioButtonGroup オブジェクトに 追加し、シーンへも子ノードとして追加する
  • RadioButton オブジェクトにイベントリスナーを指定する
// Create a radio button group
auto radioButtonGroup = RadioButtonGroup::create();
this->addChild(radioButtonGroup);

// Create the radio buttons
for(・・・) {
        RadioButton* radioButton = RadioButton::create("cocosui/radio_button_off.png", "cocosui/radio_button_on.png");
        float posX = startPosX + BUTTON_WIDTH * i;
        radioButton->setPosition(Vec2(posX, winSize.height / 2.0f + 70));
        radioButton->setScale(1.2f);
        radioButton->addEventListener(CC_CALLBACK_2(LabelToggleTypeTest::onChangedRadioButtonSelect, this));
        radioButton->setTag(i);
        radioButtonGroup->addRadioButton(radioButton);
        this->addChild(radioButton);
}

cocos 2d-x タッチイベントリスナーの登録

bool GameLayer::init()
{
.....
    // タッチイベントリスナー
    auto touchListener = EventListenerTouchOneByOne::create();
    touchListener->onTouchBegan = [this](Touch* touch, Event *){
    	auto loc = touch->getLocation();
    	return true;
    };
    touchListener->onTouchMoved = [this](Touch* touch, Event *){
    };
    touchListener->onTouchEnded = [this](Touch* touch, Event *){
    };
    this->getEventDispatcher()->addEventListenerWithSceneGraphPriority(touchListener, this);
.....
}

コマンドラインでアンドロイド開発>android コマンド

Eclipse は重くて使いたくないので、cocos2d-x のアンドロイド版をビルドするときは、
cocos compile -p android -m release
って、何も理解せずやってるおいらだけど、ライブラリを追加しようとかすると、仕組みを理解していないが故に、どうしていいのかさっぱりわからず、いつも困惑しています。

で、人に聞いたり、調べてみるとどうやら アンドロイドSDK に android コマンドってのが含まれていて、それを使うとプロジェクトを作ったり、プロジェクトを修正してり出来そうなことがわかりました。

android コマンドは SDK位置/tools に含まれているので、そこにパスを通せば使えるようになります。
パスを通したら、コンソールで android -h と入力し、以下のようにヘルプが出たら、利用可能です。

C:\Users\ntsuda>android -h

       Usage:
       android [global options] action [action options]
       Global options:
  -h --help       : Help on a specific command.
  -v --verbose    : Verbose mode, shows errors, warnings and all messages.
     --clear-cache: Clear the SDK Manager repository manifest cache.
  -s --silent     : Silent mode, shows errors only.
  (以下略)

cocos2d-x v3 > httpRequest GET

#include "network/HttpClient.h"
USING_NS_CC;
  cocos2d::network::HttpRequest* request = new cocos2d::network::HttpRequest();
  request->setUrl("http://vivi.dyndns.org/test/index.html?from=cocos2d-x");
  //	GET
  request->setRequestType(cocos2d::network::HttpRequest::Type::GET);
  request->setResponseCallback( [this](network::HttpClient* sender, network::HttpResponse* response) {
  	auto data = response->getResponseData();
  	auto sz = data->size();
  });
  request->setTag("GET test1");
  cocos2d::network::HttpClient::getInstance()->send(request);
  request->release();

cocos2d-x v3 > シングルタッチイベントリスナー

cocos2d-x v3 のシングルタッチイベントリスナーのテンプレーと

    // タッチイベントリスナー
    auto touchListener = EventListenerTouchOneByOne::create();
    touchListener->onTouchBegan = [this](Touch* touch, Event *){
    	return true;
    };
    touchListener->onTouchMoved = [this](Touch* touch, Event *){
    };
    touchListener->onTouchEnded = [this](Touch* touch, Event *){
    };
    this->getEventDispatcher()->addEventListenerWithSceneGraphPriority(touchListener, this);

cocos2d-x v3 > 画像を動的に生成

cocos2d-x で高速に動作する Conway’s Game Of Life (ライフゲーム)を作ろうと思い、画像を動的に生成する方法を調べてみた。

動的に画像を生成するには DrawNode::drawDot() を使うと簡単だ。
が、drawDot() は大きさを持ったドットを三角形の組み合わせに分解し、その頂点座標と塗りつぶし色を OpenGL に送るので、Game Of Life 用としては無駄が多く、パフォーマンス的に問題だ。

よって、矩形スプライトを作成し、そのテクスチャパターンを動的に生成する方がよい。

宣言ファイル:

 std::vector<Color3B> m_buffer;  //  テクスチャデータを格納する動的配列
 cocos2d::Texture2D *m_texture;
 cocos2d::Sprite *m_sprite;

実装ファイル:

const int WIDTH = 800;
const int HEIGHT = 1000;
m_buffer.resize(WIDTH*HEIGHT);
for(int i = 0; i != m_buffer.size(); ++i) {
    m_buffer[i].r = 赤色値;
    m_buffer[i].g = 緑色値;
    m_buffer[i].b = 青色値;
}
Size contentSize;
contentSize.width  = WIDTH;
contentSize.height = HEIGHT;
m_texture = new Texture2D();
m_texture->initWithData((const void *)&m_buffer[0], WIDTH*HEIGHT*sizeof(Color3B),
			Texture2D::PixelFormat::RGB888, WIDTH, HEIGHT, contentSize);
m_sprite = Sprite::createWithTexture(m_Texture);
m_sprite->setPosition(位置);
addChild(m_sprite);

Nexus 7 (2013) 800×1000 グリッドサイズの場合、DrawNode::drawDot() を使った場合は数FPSだったのが、上記の方法により約30FPSを実現するのに成功した。

cocos2d-x v3>カードをめくるアニメーション

裏と表の画像を用意し、裏の画像を RotateBy(秒数, 90) し、そこで画像を切りかえ、-90度回転した状態から90度回転するとよい。

    auto card = Sprite::create(裏画像);
    card->setPosition(位置);
    addChild(card);
    auto rot = RotateBy::create(5, Vec3(0, 90, 0));
    auto callFunc = CallFunc::create([this, card](){	//	card が90度回転した時点で呼ばれる
        card->setTexture(表画像);
        card->setRotation3D(Vec3(0, -90, 0));
        auto rot = RotateBy::create(5, Vec3(0, 90, 0));
        card->runAction(rot);
    });
    card->runAction(Sequence::create(rot, callFunc, NULL));

動画:

cocos2d-x ver 3.5 をVSC2013でビルド

某氏の生放送を見に行ったら、彼が cocos2d-x 3.5 のセットアップをすいすいと行っていた。
3.4 にはバグがあって、スクロールがうまくいかないとのことであった。
公式サイトをチェックするといつの間にか v3.5 がリリースされていたので、おいらもダウンロード&VSC2013 でビルドしてみた。

ダウンロードした cocos2d-x-3.5.zip を展開し、cocos2d-x-3.5/build/cocos2d-win32.vc2012.sln をVSC2013で開いて、F7 を押してビルドする。
ただし、例によってテストプログラムで定数が二行につづいているというエラーが出るので、cocos2d-x-3.5/tests/cpp-tests/Classes/LabelTest/LabelTestNew.cpp を さくさくエディタ 等で開き、BOM付きUTF-8 で上書き保存し、ビルドするように。

ビルドが終わったら、F5 を押して実行すると、以下のようなテストプログラムが起動する。

temp

 

テストプロジェクトを実行すると、上記の画面があらわれる。
メニューを選択すると、各機能のデモが実行される。
なお、画面の下の方のメニューを表示するには、画面をタップしてスクロールさせるといいぞ。

3.5 の目玉は3次元のパーティクルの様だ。
参照: COCOS2D-X V3.5 RELEASED

以下は、パーティクル3Dの例。

temp

静止画だと3Dであることがわかりづらいが、イナズマがきらめいているデモだ。
また、たくさんのバグがフィックスされているとのこと。

cocos2d-x > AdMob インターステンシャル広告

本稿では、cocos2d-x アプリに AdMob のインターステンシャル広告(以下、「全面広告」と記述する)を実装するための方法を記述します。
最初に書いておきますが、この方法は数々の素晴らしいアプリをリリースされている愛ふぉん太郎氏にご教授していただいた方法です。
ほんとうにありがとうございました。

手順は以下のとおりです。

1. AdMob 管理画面からインターステンシャル広告のIDを取得しておく
2. 全面広告を表示する Java の関数を実装する
3. 上記 Java 関数をコールする JNI インタフェース関数を実装する
4. 上記のインタフェース関数をコールする。

以下、詳細を説明する。ただし、1. の詳細は省略する。

2. 全面広告を表示する Java の関数を実装する
“AppActivity.java” を以下のように修正。

public class AppActivity extends Cocos2dxActivity {
    private static AppActivity thisptr = null;
    static InterstitialAd interstitialAd;
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState); 
        thisptr = this;
        .....
    }
    public static void launchInterstitial(){
      thisptr.runOnUiThread(new Runnable() {
      @Override
      public void run() {
        //ロード
        interstitialAd = new InterstitialAd(thisptr);
        interstitialAd.setAdUnitId("ca-app-pub-XXXXXXXXXXXXXXXX/XXXXXXXXXX");
        AdRequest adRequestI = new AdRequest.Builder().build();
        interstitialAd.loadAd(adRequestI);
        interstitialAd.setAdListener(new AdListener() {
          @Override
          public void onAdLoaded() {
            interstitialAd.show();
    	  }
    	});
      }
      });
    }
}

3. 上記 Java 関数をコールする JNI インタフェース関数を実装する

class InterfaceJNI
{
public:
  static void launchInterstitial();
};
void InterfaceJNI::launchInterstitial()
{
    JniMethodInfo jmInfo;
    if(JniHelper::getStaticMethodInfo(jmInfo,
        JNICLASSNAME,
        "launchInterstitial",
        "()V"))		//	void ()
    {
        jmInfo.env->CallStaticVoidMethod(jmInfo.classID, jmInfo.methodID);
        jmInfo.env->DeleteLocalRef(jmInfo.classID);
    }
}

4. 上記のインタフェース関数をコールする。

InterfaceJNI::launchInterstitial(); を記述するだけ。