CCScrollView 实现帮助界面、关卡选择

本文出自[无间落叶]http://blog.leafsoar.com/archives/2013/07-27.html

本文介绍了 CCScrollView 来编写帮助界面和关卡选择界面的方法,在编写这样一个功能之时,大多会遇到一些困难,这里也是同样,最后提供了一个相应且合理的解决方案,并解说了其它实现方案的优缺点,这里的内容,你可以直接拿去用,或者可以作为实现的参考。总能找到你需要的东西,或多~或少~。文章大致内容如下:

  • 首先实现了一个可拖动的界面,滚屏屏幕,它可以用于完成帮助界面的设计
  • 接着实现了关卡选择功能,这里的着重点是 如何处理触摸机制 。以达到不错的协同工作
  • 由于是分屏滚动,所以完成了一个页索引 “指示球功能”

可拖动界面的实现 (帮助界面)

实现帮助界面,那么我们首先要考虑的是,我们需要一个什么样的效果?大致总结如下:

  • 一个可分屏显示的界面是必须的
  • 界面可以拖动操作,多屏滚动
  • 还想添加一个滚动屏幕的校队,以使显示区域正好是屏幕宽度的倍数

现在我们将要使用 CCScrollView 来实现这么样一个功能,那么它需要哪些 元素 以及需要解决哪些设计上的问题,整理一下思路先:

  • 首先需要一个 CCScrollView 层,和一个包含内容的容器层(CCLayer)
  • 处理触摸操作,我们直接启用 CCScrollView 的可触摸操作,就已经能够完成对 CCScrollView 的拖动,这是它本身所提供的功能
  • CCScrollView 本身所提供的触摸操作,默认情况有诸多不便,虽然能够拖动,但区域控制器来确很繁琐,更何况我们还需要校队,对齐等操作
  • 所以我们将 触摸 的操作交由 CCScrollView 所在的层(或者当前运行的场景),禁用 CCScrollView 的触摸,我们通过处理当前界面的触摸,用以控制 CCScrollView 的行为,是一个可行的解决方案

下面给出相应的关键代码,实现以上功能

// 创建一个 CCScrollView, 内容大小和当前的界面一样
CCScrollView* scrollView = CCScrollView::create(this->getContentSize());
// 设定容器层,我们并不需要重新设置 scrollview 的 ContentSize,容器层内部设定即可
scrollView->setContainer(getContainLayer());
// 关闭 scrollView 的可触摸操作
scrollView->setTouchEnabled(false);

// 容器层内容实现
CCLayer* LevelView::getContainLayer(){
    m_nPageCount = 4;

    CCSize winSize = CCDirector::sharedDirector()->getWinSize();
    CCPoint pointCenter = ccp(winSize.width / 2, winSize.height / 2);

    CCLayer* layer = CCLayer::create();
    layer->setPosition(CCPointZero);

    // 添加 frame,每 一页 用一张背景图显示
    for (int i = 0; i < m_nPageCount; i++) {
        CCSprite* frame = CCSprite::create("level/frame.png");
        frame->setPosition(ccpAdd(pointCenter, ccp(winSize.width * i, 0)));
        layer->addChild(frame);
    }

    layer->setContentSize(CCSizeMake(winSize.width * m_nPageCount, winSize.height));

    return layer;
}

完成以上内容,那么基本准备工作就做好了。上面我们要注意区分两个概念,ViewSize 和 ContentSize,ViewSize 是 scrollView 所显示区域的大小,ContentSize 是滚动层的区域大小,一般而言,ViewSize 就是 ContentSize 上可见的一部分区域,通过拖动可以显示不同的部分。

后面继续,触摸处理相关代码:

// 关闭 scrollview 的触摸,相应的,我们要启用当前的触摸,并注册为单点触摸类型
void LevelView::registerWithTouchDispatcher(){
    CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 0, true);
}

bool LevelView::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent){
    // 记录触摸起始点的位置
    m_touchPoint = CCDirector::sharedDirector()->convertToGL(pTouch->getLocationInView());
    // 记录触摸起始点的偏移
    m_touchOffset = getScrollView()->getContentOffset();
    return true;
}

void LevelView::ccTouchMoved(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent){
    CCPoint movePoint = CCDirector::sharedDirector()->convertToGL(pTouch->getLocationInView());
    // 获得当前的拖动距离
    float distance = movePoint.x - m_touchPoint.x;

    // 设定当前偏移位置
    CCPoint adjustPoint = ccp(m_touchOffset.x + distance, 0);
    // 让 scrollView 跟着 move 操作而移动
    getScrollView()->setContentOffset(adjustPoint, false);
}

void LevelView::ccTouchEnded(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent){
    CCPoint endPoint = CCDirector::sharedDirector()->convertToGL(pTouch->getLocationInView());
    float distance = endPoint.x - m_touchPoint.x;

    if (fabs(distance) < 3){
        // 小于三,不做拖动操作,也排除了(抖动误操作)
    }else if (fabs(distance) > 50){
        // 大于 50,执行拖动效果
        adjustScrollView(distance);
    }else{
        // 回退为拖动之前的位置
        adjustScrollView(0);
    }
}

void LevelView::ccTouchCancelled(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent){
    // 参数为 0 表示 恢复之前的屏幕位置
    adjustScrollView(0);
}

void LevelView::adjustScrollView(float offset){
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();
    // 我们根据 offset 的实际情况来判断移动效果
    if (offset < 0)     // 表示右移
        m_nCurPage ++;
    else if (offset > 0)
        m_nCurPage --;

    // 屏幕 页数 检测
    if (m_nCurPage < 0)
        m_nCurPage = 0;
    else if (m_nCurPage > m_nPageCount - 1)
        m_nCurPage = m_nPageCount - 1;

    // 根据当前的 页数 获得偏移量,并设定新的位置,且启用动画效果
    CCPoint adjustPoint = ccp(-winSize.width * m_nCurPage , 0);
    getScrollView()->setContentOffsetInDuration(adjustPoint, 0.2f);

    CCLog("current page index: %d", m_nCurPage);
}

由以上的内容,便完成了我们所需要的帮助界面的效果,一个可拖动,滚动的界面,页面数根据自己需要来定,这里只是实现的步骤,当然在这个界面里面要放什么元素,那就要看你的心情了,哈!

要放什么元素?我们基于以上的实现,在里面添加可点击项,以完成一个关卡选择功能!

扩展,实现关卡选择功能

关卡选择 就界面而言,和上面所说的帮助界面并没有太大区别,所不同的是,除了触摸拖动界面之外,还可以点击内部的元素,如关卡,以实现不同的功能,所以我们基于以上的内容,扩展添加实现关卡选择功能。

实现以下代码,完成在界面添加关卡精灵元素:

// 修改层内容实现
CCLayer* LevelView::getContainLayer(){
    m_nPageCount = 4;
    // ..... 此处省略,参照上文

    // 在此处添加关卡精灵
    for (int i = 0; i < levelCount; i ++) {
        CCNode* level = getSpriteByLevel(i);
        // 设置位置
        int curPageIndex = i / (widthCount * heightCount);
        float xOffset = i % 4 * 100 + 90;
        float yOffset = winSize.height - ((i % (widthCount * heightCount)) / widthCount * 120 + 180);

        level->setPosition(ccp(xOffset + winSize.width * curPageIndex, yOffset));
        // 这里使用了 zOrder = 2,用此值来构建层次关系,如后文将要添加的显示点击背景效果
        layer->addChild(level ,2, i);
    }

    return layer;
}

// 这里是上面所用到的方法
CCNode* LevelView::getSpriteByLevel(int level){

    CCSprite* sprite = CCSprite::create("level/level.png");
    // 添加关卡标示
    CCString* str = CCString::createWithFormat("%d", level + 1);
    CCLabelBMFont* label = CCLabelBMFont::create(str->getCString(),"level/prim30.fnt");
    label->setPosition(ccp(40, 45));
    sprite->addChild(label);

    // 这里可以再为 关卡精灵做些装饰,就像 lable 一样,如样式,关卡锁等其它元素

    return sprite;
}

写到这里,我们就完成了所有的显示效果,并且可以拖动界面显示不同的页,还有关卡选择的精灵,不过现在还欠缺的就是,关卡点击的操作了!要实现一个可点击操作的功能,我们可以有以下几种常用的方式:

  • 使用 CCMenu 来作为点击项的操作:一般而言,一叶不喜欢使用 CCMenu,因为它的触摸时机不好控制,特别是在当前界面可拖动的情况,还有些冲突,解决起来也挺麻烦,一个显著的影响是,点击 CCMenu 的时候,拖动滚屏就失去了效果,如果你有精力着折腾使用 CCMenu ,那么无妨~
  • 使用常用精灵,以容器层接受触摸消息,然后依次遍历精灵,条件判断是否产生点击项,这是一个常用的方法,需要设定好一系列集合,遍历,判断等复杂的步骤,特别是类似方块游戏中用的挺多,总乐此不疲~话说一叶之前也是这么实现的!但是实现起来也时相当麻烦的~而且编写的逻辑不能够被重用(其它游戏类似功能)
  • 建立一套新的机制,来满足特性情况下的需求,也就是封装一套解决方案,以方便对诸如此类的操作,这让一叶想到了之前的文章 《多层 UI 触摸事件的轻量级设计》(这种设计能够适应大多情况,正好用在此处,看看它的实用性如何!),在写这篇文章的时候,也将此处的操作用这样的机制重构一番。

基于 LsTouch 的触摸机制实现

在阅读以下内容之前,可以先看《多层 UI 触摸事件的轻量级设计》一文,里面详细介绍了它的实现机制,以及特性,可以简称它为 LsTouch,而此文是将这种设计用在可用之处。当然作为封装来说,你并不需要了解它的内部实现,就能够很好的使用它。或者换句话说,作为封装的模块,你只需要知道,如下这样使用它就行,它能帮我们解决触摸操作的问题,如果对内部实现感兴趣,可以去看一看实现。它的步骤如下。

继承 LsTouchEvent 并实现 touchEventAction 接口函数,这样做以后将意味着,你可以在这个类中使用 addLsTouch 方法添加 “可触摸” 元素,其自动管理,之后可以在任意地方调用 sendTouchMessage 方法(它将会传入当前的点击 pTouch 参数),后自动回调 touchEventAction 方法,回调参数将包含了,当前的 “可触摸” 元素的引用,你因此知道,你点击的是哪个元素(如 哪个关卡)。以下用代码来说明其实现(我们将旧代码注释,以体现所改动的地方):

// 继承 LsTouchEvent 并实现接口函数
void LevelView::touchEventAction(LsTouch *touch, int type){
    if (touch)
        CCLog("touch event action id: %d  type: %d", touch->getEventId(), type);
}

// 改写上文,返回精灵函数,使之变为可操作项
CCNode* LevelView::getSpriteByLevel(int level){

    // CCSprite* sprite = CCSprite::create("level/level.png");
    // // 添加关卡标示
    // CCString* str = CCString::createWithFormat("%d", level + 1);
    // CCLabelBMFont* label = CCLabelBMFont::create(str->getCString(),"level/prim30.fnt");
    // label->setPosition(ccp(40, 45));
    // sprite->addChild(label);
    // // 这里可以再为 关卡精灵做些装饰,就像 lable 一样

    // 可以看到改动的地方不多,这样就把需要显示的精灵,包装成了可操作项
    LsTouch* touch = LsTouch::create();
    touch->setDisplay(sprite);
    // 可触摸项添加到可触摸项集合,关卡 level 作为 eventId 传递
    this->addLsTouch(touch, level);

    return touch;
}

// 在触摸函数里面添加,发送触摸消息,只需要添加一句话
bool LevelView::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent){
    // CCLog("touch begin.");
    // m_touchPoint = CCDirector::sharedDirector()->convertToGL(pTouch->getLocationInView());
    // m_touchOffset = getScrollView()->getContentOffset();

    // 发送触摸消息,并会在 touEventAction 自动相应, 如果触摸到元素
    sendTouchMessage(pTouch, 0);

    return true;
}

// 这里也是同样
void LevelView::ccTouchEnded(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent){
    // CCPoint endPoint = CCDirector::sharedDirector()->convertToGL(pTouch->getLocationInView());
    // float distance = endPoint.x - m_touchPoint.x;
    // float distanceY = endPoint.y - m_touchPoint.y;
    //if (fabs(distance) < 3 && fabs(distanceY) < 3){
        // 小于三,不做拖动操作,也排除了(抖动误操作),第二个参数,事件类型 1: touch end, 由 touchEventAction 自动响应
        sendTouchMessage(pTouch, 1);
    //
    //}else if (fabs(distance) > 50){
    //    // 大于 50,执行拖动效果
    //    adjustScrollView(distance);
    //}else{
    //    // 回退为拖动之前的位置
    //    adjustScrollView(0);
    //}

    // 无论如何,触摸结束,类型为 2
    sendTouchMessage(pTouch, 2);
}

上文,我们对 getSpriteByLevel 所返回的精灵做了包装处理,然后在 ccTouch 函数,调用发送触摸消息,然后自动回调touchEventAction 函数,并带回了点击项的参数,这个点击项就包含了关卡信息 eventId ,还扩展了事件类型,表示是在 ccTouchBegin 还是 ccTouchEnd 种调用的,并依次做相应的逻辑操作。

下面具体实现回调函数的逻辑处理,它实现了点击项高亮显示,点击成功时通过 CCMessageBox 弹出提示:

void LevelView::touchEventAction(LsTouch *touch, int type){
    // type 事件类型,0:touchbegin 1:touchend 触发 2:touchend 未触发
    if (touch)
        CCLog("touch event action id: %d  type: %d", touch->getEventId(), type);
    int selectTag = 10001;
    if (type == 0 && touch){
        getScrollView()->getContainer()->removeChildByTag(selectTag);
        // 添加选撞状态的精灵,背景 高亮显示
        CCSprite* sprite = CCSprite::create("level/sel.png");
        sprite->setScaleX(2);
        sprite->setScaleY(4);
        sprite->setPosition(touch->getPosition());
        // 这里使用了 zOrder = 1 以保证,高亮图片显示在 实际关卡图片后面
        getScrollView()->getContainer()->addChild(sprite, 1, selectTag);

    } else {
        getScrollView()->getContainer()->removeChildByTag(selectTag);
    }
    if (type == 1 && touch){
        // 收到 type 为 1 表示触发关卡选择
        CCString* str = CCString::createWithFormat("您选择的关卡为 %d .", touch->getEventId() + 1);
        CCMessageBox("关卡", str->getCString());
    }
}

这里的 LsTouch 根据实际情况 比 原来(原来是指《多层 UI 触摸事件的轻量级设计》)做了些改进。

  • 内部判断去除了一些不必要的判断
  • 修改消息类型,添加 type 参数,我们可以根据次参数判断消息类型
  • 修改 touchEventAction 为总是回调(在发送消息时),而原来的做法是,这样做的好处是我们可以根据第一个参数是否为空,来做一些处理,而原来只在有点击操作才回调

关于这里使用继承 LsTouchEvent 实现 touchEventAction 回调函数的方式,需要简单说明以下,这里设计的核心是使用一个集合管理一推“可触摸”项。至于我用什么方式实现,那不重要,例如换种设计,不用继承实现接口,使用 回调函数绑定,就像绑定 CCMenu 回调一样,如果 C++ 能够像 Java 编写匿名类实现回调,那就更优雅了~实现要 “达到可用简单,通用难!”,这里只是一种可行方案。

锦上添花,添加当前页指示球

当前界面的所有功能已经实现完毕,如果使用它们,你需要注意一些地方,比如关卡精灵可以根据自己需要扩展其元素内容等。由于时滚动分页,为了一目了然我们当前的页,所以也添加了代码实现在屏幕上方设定了 页数指示球(我给起的名),指示球会在你拖动界面的时候有动态效果,放大当前 页数的指示球,给予更好的用户体验,关于这部分代码我就不贴了,可以直接从源码里面看见,方法名为 setCurPageBall,它会根据总页数和当前页数自动处理,你所需要做的只是在合适的时候调用它即可。

注意:为了让问题更有针对性,在本文中所有的位置关系所参考的都是 WinSize, 这意味着,如果你在不同的屏幕适配方案中可能需要有所改动,对屏幕适配这里有一篇文章可以作为参考《Cocos2d-x 屏幕适配新解》。


它完成了以下几个功能 :

  • 帮助界面功能的实现:一个可拖动滚屏的界面展示
  • 实现滚屏的自动校队,一页一页展示
  • 关卡点击事件处理,实现关卡功能
  • 选中关卡的高亮显示,背景标示
  • 由于没有使用 CCMenu ,所以不存在触摸优先级问题,在点击 “关卡” 的同时可拖动屏幕
  • 点击抖动误操作判断(如本来想点击关卡,如果移动了位置[移动范围大于指定值],那么将执行拖动操作)
  • 当前页指示球功能

个人从博主那里下载的代码,在ios6下进行了测试,代码下载: 下载链接


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值