cocos2d-x 2.0版本中CCScrollView的用法

        Cocos2d-x学习(十):cocos2d-x 2.0版本中CCScrollView的用法       

        分类:            Cocos2d-X学习 16635人阅读 评论(6) 收藏 举报
cocos2d-x 2.0版本之后提供了许多控件,其中就包括ScrollView,之前总结过一个简单的ScrollView,但是问题很多,比如必须是全屏,不能是一块区域,而cocos2d-x 2.0中提供的CCScrollView中,是可以设定区域的,CCScrollView做了区域的裁剪

  1. <span style="font-size: 16px;">glScissor((GLint)screenPos.x, (GLint)screenPos.y, (GLsizei)(m_tViewSize.width*s), (GLsizei)(m_tViewSize.height*s));</span> 
glScissor((GLint)screenPos.x, (GLint)screenPos.y, (GLsizei)(m_tViewSize.width*s), (GLsizei)(m_tViewSize.height*s));


但是遗憾的是tests中并没有给出CCScrollView的用法,查了一些cocos2d-iphone的资料,基本用法可以实现了,简单的总结一下!


1.用途和效果

ScrollView一般用在游戏的关卡选择这种类似的场景(比如愤怒的小鸟和割绳子的关卡选择),当然,也可以用在道具店等等一些选择菜单的场景。




滑动,浏览不同关卡菜单;点击不同的菜单精灵,处理不同的事件。


2.实现

(1) 首先需要一个创建一个CCScrollView的对象和一个“Container”(可以是CCLayer或者CCNode的对象,用来存放CCScrollView中的内容),我这里放置了两个精灵菜单选项

  1. <span style="font-size: 16px;">// CCScrollView 
  2.     scrollView = CCScrollView::create(); 
  3.     CCLayer *layer = CCLayer::create(); 
  4.      
  5.     CCSprite *sprite1 = CCSprite::create("HelloWorld.png"); 
  6.     CCSprite *sprite2 = CCSprite::create("HelloWorld.png"); 
  7.      
  8.     layer->setAnchorPoint(CCPointZero); 
  9.     layer->setPosition(CCPointZero); 
  10.      
  11.     // Menu 
  12.     CCMenuItemSprite *menuItem1 = CCMenuItemSprite::create(sprite1, sprite1, this, menu_selector(HelloWorld::menu1Callback)); 
  13.     menuItem1->setPosition(ccpAdd(CCPointZero, ccp(size.width / 2, size.height / 2))); 
  14.     menuItem1->setScale(0.4f); 
  15.     CCMenuItemSprite *menuItem2 = CCMenuItemSprite::create(sprite2, sprite2, this, menu_selector(HelloWorld::menu2Callback)); 
  16.     menuItem2->setPosition(ccpAdd(ccp(480, 0), ccp(size.width / 2, size.height / 2))); 
  17.     menuItem2->setScale(0.4f); 
  18.     CCMenu *menu = CCMenu::create(menuItem1, menuItem2, NULL); 
  19.      
  20.     menu->setPosition(CCPointZero); 
  21.     layer->addChild(menu);</span> 
// CCScrollView
    scrollView = CCScrollView::create();
    CCLayer *layer = CCLayer::create();
    
    CCSprite *sprite1 = CCSprite::create("HelloWorld.png");
    CCSprite *sprite2 = CCSprite::create("HelloWorld.png");
    
    layer->setAnchorPoint(CCPointZero);
    layer->setPosition(CCPointZero);
    
    // Menu
    CCMenuItemSprite *menuItem1 = CCMenuItemSprite::create(sprite1, sprite1, this, menu_selector(HelloWorld::menu1Callback));
    menuItem1->setPosition(ccpAdd(CCPointZero, ccp(size.width / 2, size.height / 2)));
    menuItem1->setScale(0.4f);
    CCMenuItemSprite *menuItem2 = CCMenuItemSprite::create(sprite2, sprite2, this, menu_selector(HelloWorld::menu2Callback));
    menuItem2->setPosition(ccpAdd(ccp(480, 0), ccp(size.width / 2, size.height / 2)));
    menuItem2->setScale(0.4f);
    CCMenu *menu = CCMenu::create(menuItem1, menuItem2, NULL);
    
    menu->setPosition(CCPointZero);
    layer->addChild(menu);

(2) 设置CCScrollView的显示区域

为了使ScrollView显示更灵活,CCScrollView提供了一个显示区域的设置方法,我这里设置显示区域480x320,总的大小为960x320(假设有两屏需要显示)

  1. <span style="font-size: 16px;">    layer->setContentSize(CCSizeMake(960, 320)); 
  2.     scrollView->setContentSize(CCSizeMake(480, 320)); 
  3.     scrollView->setContainer(layer);</span> 
    layer->setContentSize(CCSizeMake(960, 320));
    scrollView->setContentSize(CCSizeMake(480, 320));
    scrollView->setContainer(layer);
这里用layer作为(1)中的container

(3) 补充,其实到这里就基本实现了CCScrollView最基本的用法,如果需要监听滑动的事件,可以继承CCScrollViewDelegate委托,实现以下两个方法

  1. <span style="font-size: 16px;">public
  2.     void scrollViewDidScroll(CCScrollView* view); 
  3.     void scrollViewDidZoom(CCScrollView* view);</span> 
public:
    void scrollViewDidScroll(CCScrollView* view);
    void scrollViewDidZoom(CCScrollView* view);


3.校对

这里会有一个问题,那就是当滑动结束时,经常是在两页之间,也就是图2的情况,这种体验不太好,我简单看了一下CCScrollView的源码,发现并没有相关的设置,想必是作者考虑到无法定义每页的大小尺寸,所以没有提供吧!所以,如果需要,我们要额外加一段校对的代码

所以在HelloWorld这层,继承了触摸事件的响应方法,并在ccTouchEnded()方法中校对

  1. <span style="font-size: 16px;">void HelloWorld::adjustScrollView() 
  2.     // 关闭CCScrollView中的自调整 
  3.     scrollView->unscheduleAllSelectors(); 
  4.      
  5.     int x = scrollView->getContentOffset().x; 
  6.     int offset = (int) x % 480; 
  7.     // 调整位置 
  8.     CCPoint adjustPos; 
  9.     // 调整动画时间 
  10.     float adjustAnimDelay; 
  11.      
  12.     if (offset < -240) { 
  13.         // 计算下一页位置,时间 
  14.         adjustPos = ccpSub(scrollView->getContentOffset(), ccp(480 + offset, 0)); 
  15.         adjustAnimDelay = (float) (480 + offset) / ADJUST_ANIM_VELOCITY; 
  16.     } 
  17.     else
  18.         // 计算当前页位置,时间 
  19.         adjustPos = ccpSub(scrollView->getContentOffset(), ccp(offset, 0)); 
  20.         // 这里要取绝对值,否则在第一页往左翻动的时,保证adjustAnimDelay为正数 
  21.         adjustAnimDelay = (float) abs(offset) / ADJUST_ANIM_VELOCITY; 
  22.     } 
  23.      
  24.     // 调整位置 
  25.     scrollView->setContentOffsetInDuration(adjustPos, adjustAnimDelay); 
  26. }</span> 
void HelloWorld::adjustScrollView()
{
    // 关闭CCScrollView中的自调整
    scrollView->unscheduleAllSelectors();
    
    int x = scrollView->getContentOffset().x;
    int offset = (int) x % 480;
    // 调整位置
    CCPoint adjustPos;
    // 调整动画时间
    float adjustAnimDelay;
    
    if (offset < -240) {
        // 计算下一页位置,时间
        adjustPos = ccpSub(scrollView->getContentOffset(), ccp(480 + offset, 0));
        adjustAnimDelay = (float) (480 + offset) / ADJUST_ANIM_VELOCITY;
    }
    else {
        // 计算当前页位置,时间
        adjustPos = ccpSub(scrollView->getContentOffset(), ccp(offset, 0));
        // 这里要取绝对值,否则在第一页往左翻动的时,保证adjustAnimDelay为正数
        adjustAnimDelay = (float) abs(offset) / ADJUST_ANIM_VELOCITY;
    }
    
    // 调整位置
    scrollView->setContentOffsetInDuration(adjustPos, adjustAnimDelay);
}
在这里我会根据当前相对于半屏的宽度(240像素)作为判断标准,来决定滑动结束时的所在页

这里需要注意的是必须要先关闭CCScrollView的schedule方法,因为CCScrollView在最左边和最右边做了校对,但是对中间的部分没有做校对!


4.注意事项

(1) 如果需要校对这一步,HelloWorld层是需要实现触摸方法的,而触摸的优先级一定要大于CCScrollView对象(也就是说要CCScrollView对象先响应触摸事件,然后在由HelloWorld层响应),而CCScrollView默认设置的优先级是0,所以HelloWorld需要设置为大于0的值

  1. <span style="font-size: 16px;">void HelloWorld::onEnter() 
  2.     CCLayer::onEnter(); 
  3.     CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 1, true); 
  4. }</span> 
void HelloWorld::onEnter()
{
    CCLayer::onEnter();
    CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 1, true);
}

(2) 这个Demo中是有一个问题的,也就是当点着菜单项滑动的时候是无效的,因为菜单的触摸事件的优先级是最高的,所以,如果真的要做这种效果,需要考虑自己来判断触摸事件的!


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值