学步园

今天要写一个关卡选择界面。

百度了下，采用了CCScrollView来实现。

具体CCScrollView的使用就不介绍了。 百度大把。(关键字: CCScrollView详解)

这里,主要通过一个实例介绍菜单界面的实现。

先看效果图。如下:

1.先从 http://pan.baidu.com/share/link?shareid=2511857370&uk=2685725110 中下载需要的资源

2.把Resources文件夹下的图片资源和  CCGameScrollView.h 以及 CCGameScrollView.cpp文件导入自己的工程中

3.让你的类继承CCGameScrollView并实现5个纯虚接口。

    //以下五个方法必须继承
    //滚动触发
    virtual void scrollViewDidScroll( cocos2d::extension::CCScrollView *view );
    //缩放触发
	virtual void scrollViewDidZoom( cocos2d::extension::CCScrollView *view );
    //初始化每个单独页面,pPage为这个页面的容器,nPage是这个页面的ID
	virtual bool scrollViewInitPage( cocos2d::CCNode *pScroll, cocos2d::CCNode *pPage, int nPage );
    //点击某个页面处理
	virtual void scrollViewClick( const cocos2d::CCPoint &oOffset, const cocos2d::CCPoint &oPoint , cocos2d::CCNode *pPage, int nPage );
    //每一次滑动后结束的回调,可以在这里处理一些事情
	virtual void scrollViewScrollEnd( cocos2d::CCNode *pPage, int nPage );

4.实现相关的方法即可。

下面具体给出我自己的测试类。

LevelSelect.h

//
//  LevelSelect.h
//  RunGame
//
//  Created by Colin on 14-4-13.
//
//

#ifndef __RunGame__LevelSelect__
#define __RunGame__LevelSelect__

#include <iostream>
#include "cocos2d.h"
#include "CCGameScrollView.h"    //导入头文件

using namespace cocos2d;

class LevelSelectScene
    : public cocos2d::CCLayer
    , public CCCGameScrollViewDelegate
{
public:
    
    LevelSelectScene();
	~LevelSelectScene();
    
    bool init();
    
    static cocos2d::CCScene* scene();
    
    //以下五个方法必须继承
    //滚动触发
    virtual void scrollViewDidScroll( cocos2d::extension::CCScrollView *view );
    //缩放触发
	virtual void scrollViewDidZoom( cocos2d::extension::CCScrollView *view );
    //初始化每个单独页面,pPage为这个页面的容器,nPage是这个页面的ID
	virtual bool scrollViewInitPage( cocos2d::CCNode *pScroll, cocos2d::CCNode *pPage, int nPage );
    //点击某个页面处理
	virtual void scrollViewClick( const cocos2d::CCPoint &oOffset, const cocos2d::CCPoint &oPoint , cocos2d::CCNode *pPage, int nPage );
    //每一次滑动后结束的回调,可以在这里处理一些事情
	virtual void scrollViewScrollEnd( cocos2d::CCNode *pPage, int nPage );
    
    CREATE_FUNC(LevelSelectScene);

    
private:
	CCCGameScrollView *m_ScrollView;

};
#endif /* defined(__RunGame__LevelSelect__) */

LevelSelect.cpp

//
//  LevelSelect.cpp
//  RunGame
//
//  Created by Colin on 14-4-13.
//
//

#include "LevelSelect.h"
#include "SimpleAudioEngine.h"

#include "GameMain.h"   //主游戏界面

using namespace cocos2d;
using namespace CocosDenshion;

USING_NS_CC_EXT;

LevelSelectScene::LevelSelectScene()
{
    
}

LevelSelectScene::~LevelSelectScene()
{
    
}

CCScene* LevelSelectScene::scene()
{
    CCScene *scene = CCScene::create();
    
    LevelSelectScene *layer = LevelSelectScene::create();
    
    scene->addChild(layer);
    
    return scene;
}

//滚动触发
void LevelSelectScene::scrollViewDidScroll( CCScrollView *view )
{
    
}
//缩放触发
void LevelSelectScene::scrollViewDidZoom( CCScrollView *view )
{
    
}

//初始化每个单独页面,pPage为这个页面的容器,nPage是这个页面的ID
bool LevelSelectScene::scrollViewInitPage( cocos2d::CCNode *pScroll, cocos2d::CCNode *pPage, int nPage )
{
	CCString str;
	str.initWithFormat("%03d.png", nPage + 1);
	CCSprite *sprite = CCSprite::create(str.getCString());
	pPage->addChild(sprite);
    
	return true;
}

//点击某个页面的处理
void LevelSelectScene::scrollViewClick( const cocos2d::CCPoint &oOffset, const cocos2d::CCPoint &oPoint , cocos2d::CCNode *pPage, int nPage )
{
	switch(nPage)
	{
        case 0:
		{
            //进入游戏主界面
            CCDirector::sharedDirector()->replaceScene(CCTransitionFadeBL::create(0.5,GameMain::scene()));

		}
            break;
        case 1:
		{
			//滚动到某个页面
			m_ScrollView->scrollToPage(2);
		}
            break;
        case 2:
		{
			//设置当前页面
			m_ScrollView->setCurPage(3);
		}
            break;
	}
    
}

//每一次滑动后结束的回调,可以在这里处理一些事情
void LevelSelectScene::scrollViewScrollEnd( cocos2d::CCNode *pPage, int nPage )
{
	CCLog("Current Page=%d", nPage);
}


bool LevelSelectScene::init()
{
	if(!CCLayer::init())
	{
		return false;
	}
    
    
	// CCScrollView
	m_ScrollView = CCCGameScrollView::create();	//创建一个scrollview
	m_ScrollView->setDirection(kCCScrollViewDirectionHorizontal);  //设置滚动的方向，目前来说只能横方向和纵方向
    
	//this,页面的数量,每个页面的尺寸(影响页面间的距离)
	m_ScrollView->createContainer(this, 5, CCSizeMake(CCDirector::sharedDirector()->getVisibleSize().width * 0.8, CCDirector::sharedDirector()->getVisibleSize().height));
	//一般是原点
	m_ScrollView->setPosition(ccp(0, 0));
	//视口的尺寸(一般是屏幕的尺寸)
	m_ScrollView->setViewSize(CCDirector::sharedDirector()->getVisibleSize());
    
	this->addChild(m_ScrollView);
    
    
	return true;
}

学习的路上,与君共勉。