Cocos2d-x中使用CCScrollView来实现关卡选择实例
类似关卡选择的这种功能游戏中经常看到,比如帮助场景,选择关卡,通过滑动的方式选择一些其他的东西等等。今天我们实现关卡的选择是使用CCScrollView这个类。当然还有一些其他的方法,比如使用cocostudio的page view也可以。我先说下整体的思路,CCScrollView这个类是继承自CCLayer的,本身的触摸事件有些bug,所以网上一般将这个层的touch事件处理为false,而使用它的父节点来处理触摸事件,我们也是采用这个做法。先定义一个LevelScene类,将CCScrollView加入进来,然后再定义一个layer层,这个层里边放的就是一些关卡的图片,然后将layer这个层作为CCScrollView的内容添加进去。好了,现在看代码吧。
/*关卡选择类的头文件*/ #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); //以下是注册触摸事件和实现各种的touch函数 void registerWithTouchDispatcher(); bool ccTouchBegan(CCTouch * touch,CCEvent * pEvent); void ccTouchMoved(CCTouch * touch,CCEvent * pEvent); void ccTouchEnded(CCTouch * touch,CCEvent * pEvent); //最后这个函数来校验每个关卡的位置,是各个关卡都位于屏幕的中央 void adjustScrollView(float offset); private: //将CCScrollView作为自己的层添加进来 CCScrollView * m_scrollView; //触摸点的位置 CCPoint m_touchPoint; //CCScrollView的便宜量 CCPoint m_offsetPoint; //当前为第几个关卡 int m_nCurPage; }; #endif
/*关卡选择类的具体实现*/ #include "LevelScene.h" #include <math.h> //用到了fabs()函数,用来求绝对值的 bool LevelScene::init() { bool bRet = false; do { CC_BREAK_IF(!CCLayer::init()); CCSize winSize = CCDirector::sharedDirector()->getWinSize(); //CCScrollView继承自CCLayer,传入的参数是view size的大小 //view size也就是人看到的大小,content size也就是内容的大小 //这里设置为整个屏幕的大小,也就是我们通过设备的整个屏幕去看里边的内容 CCScrollView * scrollView = CCScrollView::create(CCSize(winSize.width,winSize.height)); //等同于如下的语句 /*CCScrollView * scrollView = CCScrollView::create(); scrollView->setViewSize(CCSize(winSize.width,winSize.height));*/ //以下是CCScrollView的一些常用函数,但是我们这里都不会用到,实现的思路不同 //设置是否有反弹的效果,反弹就是当超出scrollview的大小的时候回到原来的位置 //scrollView->setBounceable(true); //CCScrollView默认锚点是在(0,0)处 //scrollView->ignoreAnchorPointForPosition(false); //scrollView->setPosition(ccp(winSize.width/2,winSize.height/2)); //设置滑动方向 //kCCScrollViewDirectionHorizontal——水平滑动 //kCCScrollViewDirectionVertical——垂直滑动 //scrollView->setDirection(kCCScrollViewDirectionBoth); //创建一个CCLayer,将内容添加到CCLayer中,然后将这个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); } //设置scrollView中的内容,必须先设置内容再设置内容的大小 scrollView->setContainer(layer); //setContentSize()设置内容区的大小 scrollView->setContentSize(CCSize(winSize.width*5,winSize.height)); //我们屏蔽scrollView这个层的触摸,采用其他的实现方法 scrollView->setTouchEnabled(false); //设置里边内容的偏移量 scrollView->setContentOffset(CCPoint(0,0)); //让本层来接受触摸事件 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) { //用开始的触摸点和scroll的偏移量初始化以下的成员变量 this->m_touchPoint = touch->getLocation(); this->m_offsetPoint = this->m_scrollView->getContentOffset(); //以下的这一点特别要注意,大家可以先注释掉以下的这句话然后运行程序,会发现如果触摸不是很快 //的时候不会有什么问题,但是如果触摸进行的很快,关卡的位置偏移的就不会正确,以下的代码正是解决这个问题到 if((int)this->m_offsetPoint.x%((int)CCDirector::sharedDirector()->getWinSize().width) == 0) { return true; } return false; } /*以下代码的整体含义就是当手指移动的时候,让关卡跟随手指移动,当移动结束的时候,判断结束点和开始 触摸点的位置,对关卡的位置做相应的处理*/ //设置关卡跟随手指的方向移动 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); } //以下的代码是重点,当结束触摸的时候,为了使关卡显示在屏幕的中间,我们需要这么做 void LevelScene::ccTouchEnded(CCTouch * touch,CCEvent * pEvent) { CCPoint endPoint = touch->getLocation(); float distance = endPoint.x-this->m_touchPoint.x; //手指移动的距离小于20的时候,就将偏移量作为0处理 if(fabs(distance) < 20) { this->adjustScrollView(0); } else { //将偏移量作为参数传进来 this->adjustScrollView(distance); } } //调整关卡的最终位置 void LevelScene::adjustScrollView(float offset) { CCSize winSize = CCDirector::sharedDirector()->getWinSize(); // 我们根据 offset 的实际情况来判断移动效果 //如果手指往左划,offset大于0,说明页面在减小,往右增大 if (offset < 0) m_nCurPage ++; else if (offset > 0) m_nCurPage --; //不允许超出最左边的一页和最右边的一页 if (m_nCurPage < 0) m_nCurPage = 0; else if (m_nCurPage > 4) m_nCurPage = 4; CCPoint adjustPoint = ccp(-winSize.width * m_nCurPage , 0); //这个函数比setContentOffset多了一个参数,第二个参数是设置时间的,就是用多长的时间来改变偏移量 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开发之CCControlColourPicker控件类使用实例
这篇文章主要介绍了Cocos2d-x UI开发之CCControlColourPicker控件类使用实例,本文代码中包含大量注释来讲解CCControlColourPicker控件类的使用,需要的朋友可以参考下...2020-04-25- 这篇文章主要介绍了Cocos2d-x Schedule定时器的使用实例,本文的讲解内容包含在代码注释中,需要的朋友可以参考下...2020-04-25
- 这篇文章主要介绍了Cocos2d-x中实现弹出对话框示例,注意本文代码中的注释,本文同时给出了效果图,需要的朋友可以参考下...2020-04-25
- 这篇文章主要介绍了Cocos2d-x学习笔记之Hello World!本文基于vs2010和C++语言开发,需要的朋友可以参考下...2020-04-25
使用C++进行Cocos2d-x游戏开发入门过程中的要点解析
这篇文章主要介绍了使用C++进行Cocos2d-x游戏开发入门过程中的要点解析,主要针对画面变化以及触摸响应方面,需要的朋友可以参考下...2020-04-25Cocos2d-x UI开发之CCControlButton控件类实例
这篇文章主要介绍了Cocos2d-x UI开发之CCControlButton控件类实例,本文代码中包含大量注释来讲解CCControlButton控件类的使用,需要的朋友可以参考下...2020-04-25- 这篇文章主要介绍了Cocos2d-x中背景音乐和音效使用实例,注意本文中使用大量注释来说明背景音乐和音效的使用方法,需要的朋友可以参考下...2020-04-25
- 这篇文章主要介绍了Cocos2d-x UI开发之场景切换代码实例,cocos2d-x中的场景切换是通过导演类调用相应的方法完成的,本文通过代码和详细注释来说明,需要的朋友可以参考下...2020-04-25
- 这篇文章主要介绍了Cocos2d-x学习笔记之文本类,文本类是UI开发中经常使用的,本文用详细的代码注释讲解了文本类的使用,需要的朋友可以参考下...2020-04-25
- 这篇文章主要介绍了Cocos2d-x学习笔记之Hello World源码分析,接上一篇内容,本文着重分析源码文件,需要的朋友可以参考下...2020-04-25
- 这篇文章主要介绍了Cocos2d-x中CCEditBox文本输入框的使用实例,本文在代码中用大量注释讲解了CCEditBox的使用方法,需要的朋友可以参考下...2020-04-25
- 这篇文章主要介绍了Cocos2d-x人物动作类实例,本文用大量代码和图片讲解Cocos2d-x中的动作,代码中同时包含大量注释说明,需要的朋友可以参考下...2020-04-25
Cocos2d-x UI开发之CCControlSwitch控件类使用实例
这篇文章主要介绍了Cocos2d-x UI开发之CCControlSwitch控件类使用实例,本文代码中含大量注释讲解了CCControlSwitch控件类的使用,需要的朋友可以参考下...2020-04-25Cocos2d-x保存用户游戏数据CCUserDefault类使用实例
这篇文章主要介绍了Cocos2d-x保存用户游戏数据CCUserDefault类使用实例,需要的朋友可以参考下...2020-04-25- 这篇文章主要介绍了Cocos2d-x UI开发之菜单类使用实例,本文的代码中含有详细注释,需要的朋友可以参考下...2020-04-25
- 这篇文章主要介绍了Cocos2d-x中获取系统时间和随机数实例,本文代码含有大量注释来讲解获取系统时间和随机数的方法,需要的朋友可以参考下...2020-04-25
- 这篇文章主要介绍了Cocos2d-x学习笔记之开发环境搭建,本文使用Visual Studio作为开发IDE,是不同于其它教程的,需要的朋友可以参考下...2020-04-25
- 这篇文章主要介绍了Cocos2d-x 3.x入门教程(一):基础概念,本文讲解了Director、Scene、Layer、Sprite等内容,需要的朋友可以参考下...2020-04-25
Cocos2d-x UI开发之CCControlSlider控件类使用实例
这篇文章主要介绍了Cocos2d-x UI开发之CCControlSlider控件类使用实例,本文代码中包含大量注释讲解了CCControlSlider控件类的使用,需要的朋友可以参考下...2020-04-25cocos2d-x学习笔记之CCLayer、CCLayerColor、CCLayerGradient、CCLayerMultiplex场景层介绍
这篇文章主要介绍了cocos2d-x学习笔记之CCLayer、CCLayerColor、CCLayerGradient、CCLayerMultiplex场景层介绍,需要的朋友可以参考下...2020-04-25