cocos2d-xのGUIを使う

今回のエンジニアブログを担当する安藤です。
cocos2d-xのGUI群であるCCControlシリーズについてご紹介したいと思います。

● CCControlシリーズ
CCControlButton：伸縮自在なボタン
CCControlSlider：棒の長さで値を設定するGUI
CCControlStepper：プラスとマイナスボタン
CCControlSwitch：OnとOffを切り替えるボタン
CCControlColourPicker：色を選択するGUI
CCControlPotentionmeter：音量調整にあるダイヤルみたいな物

● 前準備
これらGUIはプリセットされているわけではなくResourcesフォルダに画像を準備して、読み取って使用いたします。一見面倒に思えますが、逆を返せば自由に画像を差し替えられるので自分の好きなデザインに変更することが出来ます。
今回はcocos2d-xがサンプルとして用意してある画像を使用したいと思います。

以下のextensionsフォルダを丸ごと作成したプロジェクトのResourcesに移動させてください。
/【cocos2d-xのフォルダ名】/samples/Cpp/TestCpp/Resources/extensions

CCControlシリーズは専用にヘッダーとネームスペースを宣言する必要があります。

// extensionの include namespace  
#include "cocos-ext.h"
using namespace cocos2d::extension;

初期化時にResourcesまでのパスを設定してリソース名を短縮します。

// パスを追加  
CCFileUtils::sharedFileUtils()->addSearchPath("extensions");

これで準備が整いました。実際にコーディングしてみたいと思います。

● CCControlButton
setPreferredSizeの値を変更することによって任意のサイズのボタンを作成することが出来ます。

CCScale9Sprite* sprite = CCScale9Sprite::create("button.png");
CCLabelTTF* label = CCLabelTTF::create("小さいボタン", "Arial", 24);
CCControlButton* pCCButton =  CCControlButton::create(label,sprite);
pCCButton->setPreferredSize(CCSizeMake(200, 40));

実行結果

● CCControlSlider

    CCControlSlider* pSlider = CCControlSlider::create( "sliderTrack.png","sliderProgress.png","sliderThumb.png");
    pSlider->setMinimumValue(0.f);          // スライダー最小値  
    pSlider->setMaximumValue(1.f);          // スライダー最大値  
    pSlider->setMinimumAllowedValue(0.1f);  // スライダー最小移動値  
    pSlider->setMaximumAllowedValue(0.9f);  // スライダー最大移動値  
    pSlider->setValue(0.5f);                // スライダーの初期値

実行結果

● CCControlStepper

CCSprite* minusSprite = CCSprite::create("stepper-minus.png");
CCSprite* plusSprite = CCSprite::create("stepper-plus.png");
CCControlStepper* pStepper = CCControlStepper::create(minusSprite,plusSprite);
pStepper->setMinimumValue(0.f);
pStepper->setMaximumValue(10.f);
pStepper->setValue(0);

実行結果

● CCControlSwitch

CCSprite* maskSprite = CCSprite::create("switch-mask.png");
CCSprite* onSprite = CCSprite::create("switch-on.png");
CCSprite* offSprite = CCSprite::create("switch-off.png");
CCSprite* thumbSprite = CCSprite::create("switch-thumb.png");
CCLabelTTF* onLabel = CCLabelTTF::create("On", "Arial",16);
CCLabelTTF* offLabel = CCLabelTTF::create("Off", "Arial",16);
CCControlSwitch* pSwitch = CCControlSwitch::create(maskSprite,onSprite, offSprite, thumbSprite, onLabel,offLabel);

実行結果

● CCControlColourPicker

CCControlColourPicker *colorPicker = CCControlColourPicker::create();
colorPicker->setColor(ccc3(128, 128, 128));

実行結果

● CCControlPotentionmeter

CCControlPotentiometer* pMeter = CCControlPotentiometer::create("potentiometerTrack.png","potentiometerProgress.png","potentiometerButton.png");

実行結果

以下のようにボタンのタッチ処理など様々なイベントのコールバックを指定することができます。

CCControl* pControl;
...
pControl->addTargetWithActionForControlEvents(this,cccontrol_selector(HelloWorld::callbackFunction), CCControlEventTouchUpInside);

● CCControlEventの種類
CCControlEventTouchDown：押された瞬間
CCControlEventTouchCancel：キャンセルされた場合
CCControlEventValueChanged：GUIの値が変更された
CCControlEventTouchUpInside：タッチされたあとGUIの中で離された
CCControlEventTouchUpOutside：タッチされたあとGUIの外で離された
CCControlEventTouchDragInside：タッチされたあとGUI内でドラッグされた
CCControlEventTouchDragOutside：タッチされたあとGUI外でドラッグされた
CCControlEventTouchDragEnter：タッチされたあとGUIの外からドラッグで内に入った瞬間
CCControlEventTouchDragExit：タッチされたあとGUIの内からドラッグで外に出た瞬間

cocos2d-xは非常に自由度の高いゲームエンジンです。一から自分好みのGUIを作るのも良いとは思いますが、たまにはこういった既存GUIを流用して楽をしてみてはいかがでしょうか？

採用情報