Cocos2d-x中使用CCScrollView來(lái)實(shí)現(xiàn)關(guān)卡選擇實(shí)例
類似關(guān)卡選擇的這種功能游戲中經(jīng)常看到,比如幫助場(chǎng)景,選擇關(guān)卡,通過(guò)滑動(dòng)的方式選擇一些其他的東西等等。今天我們實(shí)現(xiàn)關(guān)卡的選擇是使用CCScrollView這個(gè)類。當(dāng)然還有一些其他的方法,比如使用cocostudio的page view也可以。我先說(shuō)下整體的思路,CCScrollView這個(gè)類是繼承自CCLayer的,本身的觸摸事件有些bug,所以網(wǎng)上一般將這個(gè)層的touch事件處理為false,而使用它的父節(jié)點(diǎn)來(lái)處理觸摸事件,我們也是采用這個(gè)做法。先定義一個(gè)LevelScene類,將CCScrollView加入進(jìn)來(lái),然后再定義一個(gè)layer層,這個(gè)層里邊放的就是一些關(guān)卡的圖片,然后將layer這個(gè)層作為CCScrollView的內(nèi)容添加進(jìn)去。好了,現(xiàn)在看代碼吧。
/*關(guān)卡選擇類的頭文件*/ #ifndef _LEVEL_SCENE_H_ #define _LEVEL_SCENE_H_ #include "cocos2d.h" //包含以下的頭文件 #include "cocos-ext.h" using namespace cocos2d::extension; using namespace cocos2d; class LevelScene : public CCLayer { public: bool init(); CREATE_FUNC(LevelScene); //以下是注冊(cè)觸摸事件和實(shí)現(xiàn)各種的touch函數(shù) void registerWithTouchDispatcher(); bool ccTouchBegan(CCTouch * touch,CCEvent * pEvent); void ccTouchMoved(CCTouch * touch,CCEvent * pEvent); void ccTouchEnded(CCTouch * touch,CCEvent * pEvent); //最后這個(gè)函數(shù)來(lái)校驗(yàn)每個(gè)關(guān)卡的位置,是各個(gè)關(guān)卡都位于屏幕的中央 void adjustScrollView(float offset); private: //將CCScrollView作為自己的層添加進(jìn)來(lái) CCScrollView * m_scrollView; //觸摸點(diǎn)的位置 CCPoint m_touchPoint; //CCScrollView的便宜量 CCPoint m_offsetPoint; //當(dāng)前為第幾個(gè)關(guān)卡 int m_nCurPage; }; #endif
/*關(guān)卡選擇類的具體實(shí)現(xiàn)*/ #include "LevelScene.h" #include <math.h> //用到了fabs()函數(shù),用來(lái)求絕對(duì)值的 bool LevelScene::init() { bool bRet = false; do { CC_BREAK_IF(!CCLayer::init()); CCSize winSize = CCDirector::sharedDirector()->getWinSize(); //CCScrollView繼承自CCLayer,傳入的參數(shù)是view size的大小 //view size也就是人看到的大小,content size也就是內(nèi)容的大小 //這里設(shè)置為整個(gè)屏幕的大小,也就是我們通過(guò)設(shè)備的整個(gè)屏幕去看里邊的內(nèi)容 CCScrollView * scrollView = CCScrollView::create(CCSize(winSize.width,winSize.height)); //等同于如下的語(yǔ)句 /*CCScrollView * scrollView = CCScrollView::create(); scrollView->setViewSize(CCSize(winSize.width,winSize.height));*/ //以下是CCScrollView的一些常用函數(shù),但是我們這里都不會(huì)用到,實(shí)現(xiàn)的思路不同 //設(shè)置是否有反彈的效果,反彈就是當(dāng)超出scrollview的大小的時(shí)候回到原來(lái)的位置 //scrollView->setBounceable(true); //CCScrollView默認(rèn)錨點(diǎn)是在(0,0)處 //scrollView->ignoreAnchorPointForPosition(false); //scrollView->setPosition(ccp(winSize.width/2,winSize.height/2)); //設(shè)置滑動(dòng)方向 //kCCScrollViewDirectionHorizontal——水平滑動(dòng) //kCCScrollViewDirectionVertical——垂直滑動(dòng) //scrollView->setDirection(kCCScrollViewDirectionBoth); //創(chuàng)建一個(gè)CCLayer,將內(nèi)容添加到CCLayer中,然后將這個(gè)layer添加到scrollview中 CCLayer * layer = CCLayer::create(); for(int i = 0;i<5;i++) { CCString * string = CCString::createWithFormat("%d.jpg",i+1); CCSprite * sprite = CCSprite::create(string->getCString()); //將所有的精靈都放到屏幕的中間顯示 sprite->setPosition(ccpAdd(ccp(winSize.width/2,winSize.height/2), ccp(winSize.width*i,0))); layer->addChild(sprite); } //設(shè)置scrollView中的內(nèi)容,必須先設(shè)置內(nèi)容再設(shè)置內(nèi)容的大小 scrollView->setContainer(layer); //setContentSize()設(shè)置內(nèi)容區(qū)的大小 scrollView->setContentSize(CCSize(winSize.width*5,winSize.height)); //我們屏蔽scrollView這個(gè)層的觸摸,采用其他的實(shí)現(xiàn)方法 scrollView->setTouchEnabled(false); //設(shè)置里邊內(nèi)容的偏移量 scrollView->setContentOffset(CCPoint(0,0)); //讓本層來(lái)接受觸摸事件 this->setTouchEnabled(true); this->addChild(scrollView); m_scrollView = scrollView; this->m_nCurPage = 0; bRet = true; } while(0); return bRet; } void LevelScene::registerWithTouchDispatcher() { CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this,0,true); } bool LevelScene::ccTouchBegan(CCTouch * touch,CCEvent * pEvent) { //用開(kāi)始的觸摸點(diǎn)和scroll的偏移量初始化以下的成員變量 this->m_touchPoint = touch->getLocation(); this->m_offsetPoint = this->m_scrollView->getContentOffset(); //以下的這一點(diǎn)特別要注意,大家可以先注釋掉以下的這句話然后運(yùn)行程序,會(huì)發(fā)現(xiàn)如果觸摸不是很快 //的時(shí)候不會(huì)有什么問(wèn)題,但是如果觸摸進(jìn)行的很快,關(guān)卡的位置偏移的就不會(huì)正確,以下的代碼正是解決這個(gè)問(wèn)題到 if((int)this->m_offsetPoint.x%((int)CCDirector::sharedDirector()->getWinSize().width) == 0) { return true; } return false; } /*以下代碼的整體含義就是當(dāng)手指移動(dòng)的時(shí)候,讓關(guān)卡跟隨手指移動(dòng),當(dāng)移動(dòng)結(jié)束的時(shí)候,判斷結(jié)束點(diǎn)和開(kāi)始 觸摸點(diǎn)的位置,對(duì)關(guān)卡的位置做相應(yīng)的處理*/ //設(shè)置關(guān)卡跟隨手指的方向移動(dòng) void LevelScene::ccTouchMoved(CCTouch * touch,CCEvent * pEvent) { CCPoint point = touch->getLocation(); CCPoint direction = ccpSub(point,this->m_touchPoint); //CCPoint spriteDirection = ccpAdd(this->m_offsetPoint,direction); //只在x方向偏移 CCPoint spriteDirection = CCPoint(direction.x+this->m_offsetPoint.x,0); this->m_scrollView->setContentOffset(spriteDirection); } //以下的代碼是重點(diǎn),當(dāng)結(jié)束觸摸的時(shí)候,為了使關(guān)卡顯示在屏幕的中間,我們需要這么做 void LevelScene::ccTouchEnded(CCTouch * touch,CCEvent * pEvent) { CCPoint endPoint = touch->getLocation(); float distance = endPoint.x-this->m_touchPoint.x; //手指移動(dòng)的距離小于20的時(shí)候,就將偏移量作為0處理 if(fabs(distance) < 20) { this->adjustScrollView(0); } else { //將偏移量作為參數(shù)傳進(jìn)來(lái) this->adjustScrollView(distance); } } //調(diào)整關(guān)卡的最終位置 void LevelScene::adjustScrollView(float offset) { CCSize winSize = CCDirector::sharedDirector()->getWinSize(); // 我們根據(jù) offset 的實(shí)際情況來(lái)判斷移動(dòng)效果 //如果手指往左劃,offset大于0,說(shuō)明頁(yè)面在減小,往右增大 if (offset < 0) m_nCurPage ++; else if (offset > 0) m_nCurPage --; //不允許超出最左邊的一頁(yè)和最右邊的一頁(yè) if (m_nCurPage < 0) m_nCurPage = 0; else if (m_nCurPage > 4) m_nCurPage = 4; CCPoint adjustPoint = ccp(-winSize.width * m_nCurPage , 0); //這個(gè)函數(shù)比setContentOffset多了一個(gè)參數(shù),第二個(gè)參數(shù)是設(shè)置時(shí)間的,就是用多長(zhǎng)的時(shí)間來(lái)改變偏移量 this->m_scrollView->setContentOffsetInDuration(adjustPoint, 0.3f); }
bool HelloWorld::init() { ////////////////////////////// // 1. super init first if ( !CCLayer::init() ) { return false; } CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize(); //添加背景圖片 CCSprite * sprite = CCSprite::create("background.png"); sprite->setPosition(ccp(visibleSize.width/2,visibleSize.height/2)); this->addChild(sprite); //添加CCScrollView層 LevelScene * scrollView = LevelScene::create(); this->addChild(scrollView); return true; }
上一篇:Cocos2d-x UI開(kāi)發(fā)之CCControlColourPicker控件類使用實(shí)例
欄 目:C語(yǔ)言
本文標(biāo)題:Cocos2d-x中使用CCScrollView來(lái)實(shí)現(xiàn)關(guān)卡選擇實(shí)例
本文地址:http://mengdiqiu.com.cn/a1/Cyuyan/3387.html
您可能感興趣的文章
- 04-02func函數(shù)+在C語(yǔ)言 func函數(shù)在c語(yǔ)言中
- 04-02c語(yǔ)言中對(duì)數(shù)函數(shù)的表達(dá)式 c語(yǔ)言中對(duì)數(shù)怎么表達(dá)
- 04-02c語(yǔ)言沒(méi)有round函數(shù) round c語(yǔ)言
- 04-02C語(yǔ)言中怎么打出三角函數(shù) c語(yǔ)言中怎么打出三角函數(shù)的值
- 01-10使用OpenGL實(shí)現(xiàn)3D立體顯示的程序代碼
- 01-10深入理解C++中常見(jiàn)的關(guān)鍵字含義
- 01-10使用C++實(shí)現(xiàn)全排列算法的方法詳解
- 01-10深入Main函數(shù)中的參數(shù)argc,argv的使用詳解
- 01-10APUE筆記之:進(jìn)程環(huán)境詳解
- 01-10c++中inline的用法分析


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹(shù)的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 04-02c語(yǔ)言函數(shù)調(diào)用后清空內(nèi)存 c語(yǔ)言調(diào)用
- 04-02func函數(shù)+在C語(yǔ)言 func函數(shù)在c語(yǔ)言中
- 04-02c語(yǔ)言的正則匹配函數(shù) c語(yǔ)言正則表達(dá)
- 04-02c語(yǔ)言用函數(shù)寫分段 用c語(yǔ)言表示分段
- 04-02c語(yǔ)言中對(duì)數(shù)函數(shù)的表達(dá)式 c語(yǔ)言中對(duì)
- 04-02c語(yǔ)言編寫函數(shù)冒泡排序 c語(yǔ)言冒泡排
- 04-02c語(yǔ)言沒(méi)有round函數(shù) round c語(yǔ)言
- 04-02c語(yǔ)言分段函數(shù)怎么求 用c語(yǔ)言求分段
- 04-02C語(yǔ)言中怎么打出三角函數(shù) c語(yǔ)言中怎
- 04-02c語(yǔ)言調(diào)用函數(shù)求fibo C語(yǔ)言調(diào)用函數(shù)求
隨機(jī)閱讀
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 01-10C#中split用法實(shí)例總結(jié)
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-11Mac OSX 打開(kāi)原生自帶讀寫NTFS功能(圖文
- 01-10SublimeText編譯C開(kāi)發(fā)環(huán)境設(shè)置
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 04-02jquery與jsp,用jquery
- 01-10delphi制作wav文件的方法
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子