Cocos2d-x 3.2 大富翁遊戲項目開發-第五部分 單機遊戲-關卡選擇ScrollView

在MenuScene.cpp 點擊單機遊戲後會調用

Director::getInstance()->pushScene(MapChooseScene::createScene());

進入到關卡選擇界面，我們採用ScrollView控件製作這個界面

由於scrollview拖動後，位置比較隨意，我想是拖動到第二張圖片，就完整的顯示第二張圖片，不要產生偏離位置的現象，所以在移動之後需要進行位置的校正，寫了一個adjustScrollView（）方法，用來進行該調整。

具體代碼如下：

MapChooseScene.h內容：

const int  MAP_COUNT = 3;//定義了三張關卡圖片
const int TOUCH_DISTANCE = 50; //手勢滑動距離


class MapChooseScene : public Layer,public ScrollViewDelegate  //使用scrollview需要繼承此類 
{
…………….
private:
	Size visibleSize;

	Layer* _spritesContainer; //用於存放3張關卡圖片的sprite 容器

             int currentPage; //當前所在的是第幾張關卡地圖
             Point beginTouchPoint; //觸摸按下時的位置
             ScrollView *scrollView; //scrollview對象

	    void singleTouchDown(Object* pSender,Control::EventType event);
	    void addBackgroundSprite(); //添加背景方法

	     void addScrollView(); //添加scrollview對象及其包含的sprite
            //繼承 ScrollViewDelegate  類需要實現的3個方法
              void scrollViewDidScroll(ScrollView* view);
              void scrollViewDidZoom(ScrollView* view);
              void scrollViewMoveOver(ScrollView* view);

	void adjustScrollView(float distance);//自定義方法，用來進行拖動後位置調整
	void onTouchEnded(Touch*touch,Event *unused_event);
	bool onTouchBegan(Touch * touch,Event *unused_event);
        void onTouchMoved(Touch *touch,Event *unused_event);


};

MapChooseScene.cpp文件內容：

bool MapChooseScene::init()
{
	if ( !Layer::init() )
	{
		return false;
	}
	visibleSize = Director::getInstance()->getVisibleSize();
	
               currentPage = 1;//默認當前是第一張關卡圖片
	addBackgroundSprite(); //添加背景

	addScrollView();//添加scrollview 


               //添加觸摸監聽
	setTouchMode(Touch::DispatchMode::ONE_BY_ONE);

	auto listener = EventListenerTouchOneByOne::create();
	listener->setSwallowTouches(true);
	listener->onTouchBegan=CC_CALLBACK_2(MapChooseScene::onTouchBegan,this);

	listener->onTouchMoved=CC_CALLBACK_2(MapChooseScene::onTouchMoved,this);
	listener->onTouchEnded=CC_CALLBACK_2(MapChooseScene::onTouchEnded,this);

	Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener,this);
	return true;
}

主要來看addScrollView（）方法，他的主要功能就是創建3個關卡圖片sprite，並添加到Layer類容器spritesContainer對象中，水平排列顯示

void MapChooseScene::addScrollView()
{

	_spritesContainer = Layer::create();

//創建地圖sprite，添加到spritesContainer中
	Sprite* beachSprite = Sprite::create(BEACH_ITEM);
	Sprite* seaSprite = Sprite::create(SEA_ITEM);
	Sprite* moonSprite = Sprite::create(MOON_ITEM);

	_spritesContainer->addChild(beachSprite);
	beachSprite->setPosition(ccpAdd(center, ccp(0, 0)));

	_spritesContainer->addChild(seaSprite);
	seaSprite->setPosition(ccpAdd(center, ccp(visibleSize.width, 0)));

	_spritesContainer->addChild(moonSprite);
	moonSprite->setPosition(ccpAdd(center, ccp(2*visibleSize.width, 0)));


	_spritesContainer->setPosition(CCPointZero);
	_spritesContainer->setContentSize(CCSize(visibleSize.width * MAP_COUNT, visibleSize.height));//容器大小

//進行scrollView對象的創建 並進行相關設置
	scrollView = ScrollView::create();
	
	scrollView->setContainer(_spritesContainer);
	scrollView->setDirection(ScrollView::Direction::HORIZONTAL);//水平顯示
	scrollView->setTouchEnabled(true);
	scrollView->setPosition(CCPointZero);
	
	scrollView->setViewSize(CCSizeMake(visibleSize);//每個關卡圖片顯示的大小
	scrollView->setContentOffset(CCPointZero,true);
	scrollView->setContentSize(CCSize(visibleSize.width * MAP_COUNT, visibleSize.height));//scrollview 大小同spritesContainer相同

	scrollView->setDelegate(this);

	scrollView->setBounceable(false);

	addChild(scrollView);
}

按下後給beginTouchPoint賦值
bool MapChooseScene::onTouchBegan(Touch * touch,Event *unused_event)

{
	beginTouchPoint = Director::getInstance()->convertToGL(touch->getLocationInView());
	log("touch begain");
	return true;

}
//觸摸結束後，獲取觸摸距離，並調用圖片位置校正方法adjustScrollView
void MapChooseScene::onTouchEnded(Touch*touch,Event *unused_event)
{

Point endPoint = Director::getInstance()->convertToGL(touch->getLocationInView());
    float distance = endPoint.x - beginTouchPoint.x;
    if(fabs(distance) > TOUCH_DISTANCE)
    {
        adjustScrollView(distance);
    }
}

校正方法，根據觸摸滑動的位置距離差值，確認是向左或向右滑動，如果是向左滑動當前頁遞增，否則遞減 ，最小值爲1 最大值爲3

然後根據圖片是第幾頁設置scrollview的Offset ，從而實現位置校正

void MapChooseScene::adjustScrollView(float offset)
{

    if (offset<0)
    {
        currentPage ++;
    }else
    {
        currentPage --;
    }
 
    if (currentPage <1)
    {
        currentPage = 1;
    }
 
    if(currentPage > MAP_COUNT)
    {
        currentPage = MAP_COUNT;
    }

        CCPoint  adjustPos = ccp(- visibleSize.width * (currentPage-1), 0);
        scrollView->setContentOffset(adjustPos, true);

}

點擊下載代碼       地址     http://download.csdn.net/detail/lideguo1979/8268033

未完待續..............................