最近もほぼ毎日iOS/Androidのゲームアプリ開発に精を出しています。
今日はcocos2d-xを使ってスクロール出来るレイヤーの紹介です。
画面をスワイプしてページングする、アレです。
先日リリースしたゲームアプリ「ゴー！ゴー！カート」のコース選択画面で使っています。
GitHubに上がっているyandongliu / CCScrollLayerを使わせて頂きましたが、やりたい事がほぼこれで全て実装できました。
※cocos2d-x v2.0.2での動作保証がされています。それ以上のバージョンのcocos2d-xを使う場合はしっかり動作検証が必要です。
基本的な使い方は、スクロールして表示するコンテンツ（Layer）を配列にaddObject()しておいて、その配列をCCScrollLayerにセットする、という流れです。
ではまずGitHubからCCScrollLayerをcloneします。
git clone https://github.com/yadongliu/CCScrollLayer.gitで、中のCCScrollLayer.hとCCScrollLayer.mをXCodeのプロジェクト内に放り込みます。
これで準備OKです。
それでは表示する各コンテンツ（Layer）を作成しておきます。
// ヘッダ ContentsLayer.h
class ContentsLayer: public cocos2d::CCLayer
{
public:
ContentsLayer();
virtual bool init();
};
// 実装 ContentsLayer.m
#include "ContentsLayer.h"
ContentsLayer::ContentsLayer()
{
}
bool ContentsLayer::init()
{
if (!CCLayer::init()) {
return false;
}
// 適当なSpriteでも載せておく
CCSprite *sprite = CCSprite::create("hoge.png");
sprite->setPosition(ccp(200,200));
this->addChild(sprite);
return true;
}
次にスクロールさせたいSceneのヘッダファイルでこのファイルを読み込み宣言しておきます。
#include "CCScrolLayer.h"
#include "ContentsLayer.h"
class MyScene: public: cocos2d::CCLayer
{
public:
MyScene();
static cocos2d::CCScene *scene();
// その他の宣言
private:
// CCScrollLayerをクラス変数としておく（あとあと操作しやすいので、、各自お好みで、、）
cocos2d::CCScrollLayer *_myScrollLayer;
};
次に実装ファイルに処理を書いていきます。
// コンストラクタやinit()で
bool MyScene::init()
{
if (!CCLayer::init()) {
return false;
}
// とりあえず４画面スクロールさせる
CCArray *contentsList = CCArray::create();
ContentsLayer *contents1 = new ContentsLayer();
ContentsLayer *contents2 = new ContentsLayer();
ContentsLayer *contents3 = new ContentsLayer();
ContentsLayer *contents4 = new ContentsLayer();
contents1->init();
contents2->init();
contents3->init();
contents4->init();
contentsList->addObject(contents1);
contentsList->addObject(contents2);
contentsList->addObject(contents3);
contentsList->addObject(contents4);
// CCScrollLayerへセット
_myScrollLayer = new CCScrollLayer();
// ４画面分の配列をセット。
_myScrollLayer->initWithLayers(contentsList, 0);
// ページインジケーターのポジション（任意）
_myScrollLayer->setPageIndicatorPosition(ccp(100, 20));
// 最初に表示しておくページ番号
_myScrollLayer->selectPage(0);
this->addChild(_myScrollLayer);
// レイヤーは解放しておく
contents1->release();
contents2->release();
contents3->release();
contents4->release();
return true;
}
とりあえずこれだけで動きます。 ４画面分スクロールできるはずです。 他にも使えそうなメソッドがいくつか用意されていて、
CCArray *getPages() // 表示できる画面を配列で返す unsigned int getCurrentScreen() // 現在のページ番号を返す
や、CCScrollLayerDelegateという便利なデリゲートもあります。
詳しくはソースを読んでみてください。
すごく短くて読みやすいです。
以上でぇぇぇぇぇす。