欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > 内容正文

【Cocos2d-x for WP8 学习整理】(3)CCScrollView 实现捕鱼达人一样的场景选择界面

来源: 开发者 投稿于  被查看 17835 次 评论:9

【Cocos2d-x for WP8 学习整理】(3)CCScrollView 实现捕鱼达人一样的场景选择界面


UI 界面一般是游戏里比较独立的地方,因为游戏引擎一般都比较注意基础的功能封装,很少会关注UI,但是 UI 确是玩家第一眼看到的效果,因此能否实现一个美观的UI对于提升游戏的

幸运的是cocos2d-x意识到了这个问题,自从2.0版本之后逐步加入了几个常用控件,在这里我们详细说一下 CCScrollView 。

CCScrollView 经常被用在场景选择界面里,以《捕鱼达人》为例,几个场景各个占据一个屏幕的宽度,滑动即可切换不同的场景。

   

看源码可知,CCScrollView 

这样便达到了滑动展示的效果。

 

使用方法: 

 GalleryLayer::init()
{
     bRet = ;
    
    {
       CC_BREAK_IF( !CCLayer::init() );

       m_nCurPage = ;

       CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
       CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

       CCLayer *pLayer = CCLayer::create();

        helpstr[] = {};
        ( i = ; i <= ; ++ i)
       {
           memset(helpstr, (helpstr));
           sprintf(helpstr,,i);

           CCSprite *pSprite = CCSprite::create(helpstr);

           pSprite->setScale(MIN(visibleSize.width / , visibleSize.height / ));

           pSprite->setPosition(ccp(visibleSize.width * (i-), visibleSize.height / ));
           pLayer->addChild(pSprite);
       }
       
       m_pScrollView = CCScrollView::create(CCSizeMake(visibleSize.width, visibleSize.height), pLayer);
       m_pScrollView->setContentOffset(CCPointZero);
       
       m_pScrollView->setDelegate();
       m_pScrollView->setDirection(kCCScrollViewDirectionHorizontal);

       pLayer->setContentSize(CCSizeMake(visibleSize.width*, visibleSize.height));

       ->addChild(m_pScrollView);

       CCSpriteFrameCache *pCache =  CCSpriteFrameCache::sharedSpriteFrameCache();
   
       pCache->addSpriteFrame(CCSpriteFrame::create(,CCRectMake()),);
       pCache->addSpriteFrame(CCSpriteFrame::create(,CCRectMake()),);

        ( i = ; i <= ; ++ i)
       {
           CCSprite *pPoint = CCSprite::createWithSpriteFrameName();
           pPoint->setTag(i);
           pPoint->setPosition(ccp( origin.x + (visibleSize.width -  * pPoint->getContentSize().width)/ + pPoint->getContentSize().width * (i-), origin.y + ));
           ->addChild(pPoint);
       }

        CCSprite *pPoint = (CCSprite *)->getChildByTag();
        pPoint->setDisplayFrame(pCache->spriteFrameByName());
    
        bRet = ;
    }
    ();

     bRet;
}

但是对于场景选择来说,还需要个滑动完成自动定位的功能,自动的将当前的内容滚动到屏幕的中央。CCScrollView提供了一个手动设置位移的方法,

 

我们只需要在CCScrollView所在的Layer里的 touchEnded事件里调用该函数,然后传入计算出来的值即可。

 

实现方法: 

 GalleryLayer::adjustScrollView( offset)
{
    

    m_pScrollView->unscheduleAllSelectors();

    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
    CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

    CCSpriteFrameCache *pCache =  CCSpriteFrameCache::sharedSpriteFrameCache();

    CCSprite *pPoint = (CCSprite *)->getChildByTag(m_nCurPage);
    pPoint->setDisplayFrame(pCache->spriteFrameByName());

     (offset < )
    {
        m_nCurPage ++;
    }
    
    {
        m_nCurPage --;
    }

     (m_nCurPage <)
    {
        m_nCurPage = ;
    }
     (m_nCurPage > )
    {
        m_nCurPage = ;
    }

    pPoint = (CCSprite *)->getChildByTag(m_nCurPage);
    pPoint->setDisplayFrame(pCache->spriteFrameByName());

    CCPoint  adjustPos = ccp(origin.x - visibleSize.width * (m_nCurPage-), );
    m_pScrollView->setContentOffset(adjustPos, );
}

 

此外,CCScrollView还提供设置Delegate,类定义如下:

 CCScrollViewDelegate
{
:
     ~CCScrollViewDelegate() {}
      scrollViewDidScroll(CCScrollView* view) = ;
      scrollViewDidZoom(CCScrollView* view) = ;

 

我们可以通过 setDelegate 方法传入接受响应的对象,每当滑动或者放大的时候,就会调用响应的方法。可以在接受委托的对象里实现各种效果。

 

示例代码下载:

http://download.csdn.net/detail/u010810951/6441983


参考文章:

http://codingnow.cn/cocos2d-x/1024.html

 


相关频道:

用户评论