cocos2d-xで作られたゲームでスクロールできるメニューをよく見かける。例えばクッキーランでクッキーの一覧が見れるページとか。

要するに指でスワイプすると、画面の一部分がスクロールするメニューを作りたい。ので作ってみた。

ちなみにクッキーランのメニューはこんな感じです。

そして自作したスクロールメニューの完成形はこんな感じ。

それでは作成手順。cocos2d-xのバージョンは2.2.3です。

まずはAppDelegate.cppのapplicationDidFinishLaunching関数に解像度を変更するプログラムを追加しておく。

bool AppDelegate::applicationDidFinishLaunching() {
    // initialize director
    CCDirector* pDirector = CCDirector::sharedDirector();
    CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();

    pDirector->setOpenGLView(pEGLView);

    // 解像度を変更する
    pEGLView->setDesignResolutionSize(480, 320, kResolutionShowAll);
    ・・・
}

続いてHelloWorldScene.hにエクステンションを読み込む。

#include "cocos-ext.h"
USING_NS_CC_EXT;

HelloWorldクラスにCCScrollViewDelegateを多重継承し、純粋関数であるscrollViewDidScrollとscrollViewDidZoomを定義しておく。

class HelloWorld : public cocos2d::CCLayer, public CCScrollViewDelegate
{
public:
・・・
private:
    void buttonCallback(cocos2d::CCNode *pSender);
    void scrollViewDidScroll(CCScrollView* view);
    void scrollViewDidZoom(CCScrollView* view);
};

HelloWorld.cppに定数を定義して、init関数の中にスクロールビューを追加する。

スクロールビューはCCScrollViewを使うのだけど、CCScrollViewの中にCCLayerをセットして、さらにCCLayerの中にCCMenuをセットする仕組みで実現できる。

// レイヤーの大きさ
#define LAYER_WIDTH 480
#define LAYER_HEIGHT 900

// ビューの大きさ
#define VIEW_WIDTH 480
#define VIEW_HEIGHT 320

bool HelloWorld::init()
{
・・・
	// ----- レイヤーを生成する
    CCLayerGradient* pLayerView = CCLayerGradient::create();
	pLayerView->setAnchorPoint(CCPointZero);
	pLayerView->setPosition(CCPointZero);
	pLayerView->initWithColor(ccc4(170,250,120,225), ccc4(70,145,15,255), ccp(0.0f,1.0f));
	pLayerView->setContentSize(CCSizeMake(LAYER_WIDTH, LAYER_HEIGHT));

	// ----- ボタンメニューを生成する
	CCSprite* pBtnSprite = CCSprite::create("button.png");
	CCMenuItemSprite* pBackMenuBtn = CCMenuItemSprite::create(pBtnSprite, pBtnSprite, this, menu_selector(HelloWorld::buttonCallback));
	pBackMenuBtn->setPosition(CCPointZero);

	CCMenu* pMenu = CCMenu::create(pBackMenuBtn, NULL);
	pMenu->setPosition(ccp(pLayerView->getContentSize().width / 2, pLayerView->getContentSize().height / 2));
	pLayerView->addChild(pMenu);

	// ----- スクロールビューを配置する
	CCScrollView* pScrollView = CCScrollView::create(CCSizeMake(VIEW_WIDTH, VIEW_HEIGHT));						// 見えてるサイズ
	pScrollView->setAnchorPoint(CCPointZero);
	pScrollView->setPosition(CCPointZero);
	pScrollView->setContentSize(pLayerView->getContentSize());													// スクロールできる範囲
	pScrollView->setContainer(pLayerView);
	pScrollView->setContentOffset(ccp(0, VIEW_HEIGHT - pLayerView->getContentSize().height), false);			// スクロールの初期位置
	pScrollView->setDirection(kCCScrollViewDirectionVertical);
	pScrollView->setDelegate(this);
    this->addChild(pScrollView);
・・・
};

おっと、忘れずに純粋関数とボタンをタップした時の処理も追加しておこう。

void HelloWorld::buttonCallback(cocos2d::CCNode *pSender)
{
	CCLog("ボタンがクリックされました");
}

void HelloWorld::scrollViewDidScroll(cocos2d::extension::CCScrollView *view)
{
}

void HelloWorld::scrollViewDidZoom(cocos2d::extension::CCScrollView *view)
{
}

ソースを見た方が早いという人のためにgithubに公開しておいたのでどうぞー。

Pocket