在游戏关卡选择,道具店之中经常会用到类似于ScrollView的控件,之前用AndEngine引擎的时候简单的实现了一个,(AndEngine滑动菜单传送门),考虑到手头的游戏以后也会用到,就先用cocos2d-x简单的实现了一下!原理非常类似,android中的app(比如微博,qq)也是类似的原理!
1.设计思路
自定义ScrollView继承于CCLayer,固定其每页的大小(ios上假设480x320),每一页是一个子层(也是继承于CCLayer),由使用者根据需求丰富,依次水平方向添加到ScrollView中(垂直方向的原理类似)!在ScrollView中实现触摸监听,如果是滑动事件,执行滚屏的操作,并且在触摸事件完成后跳转到当前页;如果是点击事件,则根据当前页交由子层处理。
2.ScrollView类
- <span style="font-size:16px;">#ifndef ScrollView_ScrollView_h
- #define ScrollView_ScrollView_h
- #include "cocos2d.h"
- USING_NS_CC;
- // 屏幕尺寸
- const float WINDOW_WIDTH = 480.0f;
- const float WINDOW_HEIGHT = 320.0f;
- // 触摸误差
- const int TOUCH_DELTA = 5;
- class ScrollView: public CCLayer
- {
- private:
- // 按下点
- CCPoint m_TouchDownPoint;
- // 抬起点 配合使用判断是否为点击事件
- CCPoint m_TouchUpPoint;
- // 当前触摸点
- CCPoint m_TouchCurPoint;
- private:
- // 总页数
- int m_Page;
- // 当前显示页
- int m_CurPage;
- private:
- // 存储所有页层
- CCArray *m_PageLayer;
- private:
- // 跳转页
- void goToPage();
- public:
- ScrollView();
- ~ScrollView();
- virtual bool init();
- LAYER_NODE_FUNC(ScrollView);
- public:
- // 初始化相关
- virtual void onEnter();
- virtual void onExit();
- // 触摸事件相关
- virtual bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent);
- virtual void ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent);
- virtual void ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent);
- virtual void ccTouchCancelled(CCTouch *pTouch, CCEvent *pEvent);
- public:
- // 添加页
- void addPage(CCLayer *pPageLayer);
- };
- #endif
- </span>
addPage(CCLayer *pLayer) 是提供的外部接口,向ScrollView中添加子层,
void goToPage() 在触摸事件完成后根据当前偏移量跳转到指定页码
CCArray *m_PageLayer 用来存储所有的子层
3.判断规则
(1) 移动事件
根据触摸的点与当前ScrollView所在位置,得到ScrollView的偏移量
- <span style="font-size:16px;">void ScrollView::ccTouchMoved(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
- {
- // 移动
- CCPoint touchPoint = CCDirector::sharedDirector()->convertToGL(pTouch->locationInView());
- CCPoint posPoint = CCPointMake(getPositionX() + touchPoint.x - m_TouchCurPoint.x, getPositionY());
- setPosition(posPoint);
- m_TouchCurPoint = touchPoint;
- }
- </span>
(2) 触摸事件完成
得到用户按下和抬起的坐标偏移量,和触摸误差作比较,如果大于触摸误差,则认为是滑动;如果小于触摸误差,则认为是点击。
如果是点击,则交由当前的子层处理
如果是滑动,则根据滑动的偏移量来决定是否滑动到哪一页
- <span style="font-size:16px;">void ScrollView::ccTouchEnded(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
- {
- m_TouchUpPoint = CCDirector::sharedDirector()->convertToGL(pTouch->locationInView());
- // 计算按下和抬起的偏移量
- float off = (m_TouchUpPoint.x - m_TouchDownPoint.x) * (m_TouchUpPoint.x - m_TouchDownPoint.x) + (m_TouchUpPoint.y - m_TouchDownPoint.y) * (m_TouchUpPoint.y - m_TouchDownPoint.y);
- if (off < (TOUCH_DELTA * TOUCH_DELTA)) {
- // 点击
- // 向子Layer发送Click消息
- ((CCLayer*) m_PageLayer->objectAtIndex(m_CurPage))->ccTouchBegan(pTouch, pEvent);
- }
- else {
- // 滑动结束
- int offset = getPositionX() - m_CurPage * (-WINDOW_WIDTH);
- if (offset > WINDOW_WIDTH / 2) {
- // 上一页
- if (m_CurPage > 0) {
- --m_CurPage;
- }
- }
- else if (offset < -WINDOW_WIDTH / 2) {
- // 下一页
- if (m_CurPage < (m_Page - 1)) {
- ++m_CurPage;
- }
- }
- // 执行跳转动画
- goToPage();
- }
- }</span>
4.测试
写了一个测试层TestLayer,主要用来测试接收触摸事件
- <span style="font-size:16px;">bool TestLayer::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
- {
- CCLOG("I am %d", getTag());
- return true;
- }</span>
5.用法
循环了10个子层,每层随机了一个背景色,用来区别各个子层,分别加入到ScrollView对象中
- <span style="font-size:16px;">bool ScrollViewScene::init()
- {
- bool bRet = false;
- do {
- CC_BREAK_IF(!CCScene::init());
- ScrollView *scrollView = ScrollView::node();
- CCSize winSize = CCDirector::sharedDirector()->getWinSize();
- for (int i=0; i<10; ++i) {
- CCLayer *layer = TestLayer::node();
- layer->setAnchorPoint(CCPointZero);
- layer->setTag(i);
- scrollView->addPage(layer);
- }
- this->addChild(scrollView);
- bRet = true;
- } while (0);
- return bRet;
- }</span>
效果如图