您的位置：首页 > 移动开发 > Cocos引擎

cocos2d-x 2.0版本中CCScrollView的用法

2012-07-23 16:01 417 查看

        Cocos2d-x学习（十）：cocos2d-x 2.0版本中CCScrollView的用法       

        分类：           
Cocos2d-X学习2012-07-23 16:0116635人阅读评论(6)收藏举报
menuvelocitycallbackfloatlayernull

目录(?)[+]
用途和效果
实现
校对
注意事项

cocos2d-x 2.0版本之后提供了许多控件，其中就包括ScrollView，之前总结过一个简单的ScrollView，但是问题很多，比如必须是全屏，不能是一块区域，而cocos2d-x 2.0中提供的CCScrollView中，是可以设定区域的，CCScrollView做了区域的裁剪

[cpp]
view plaincopyprint?

<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中的内容），我这里放置了两个精灵菜单选项

[cpp]
view plaincopyprint?

<span style="font-size: 16px;">// 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);</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（假设有两屏需要显示）

[cpp]
view plaincopyprint?

<span style="font-size: 16px;">    layer->setContentSize(CCSizeMake(960, 320)); 

    scrollView->setContentSize(CCSizeMake(480, 320)); 
    scrollView->setContainer(layer);</span> 

layer->setContentSize(CCSizeMake(960, 320));
scrollView->setContentSize(CCSizeMake(480, 320));
scrollView->setContainer(layer);

这里用layer作为(1)中的container

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

[cpp]
view plaincopyprint?

<span style="font-size: 16px;">public: 

    void scrollViewDidScroll(CCScrollView* view); 

    void scrollViewDidZoom(CCScrollView* view);</span> 

public:
void scrollViewDidScroll(CCScrollView* view);
void scrollViewDidZoom(CCScrollView* view);


3.校对

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

[cpp]
view plaincopyprint?

<span style="font-size: 16px;">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); 

}</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的值

[cpp]
view plaincopyprint?

<span style="font-size: 16px;">void HelloWorld::onEnter() 

{ 
    CCLayer::onEnter(); 
    CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 1,
true); 
}</span> 

void HelloWorld::onEnter()
{
CCLayer::onEnter();
CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 1, true);
}


(2) 这个Demo中是有一个问题的，也就是当点着菜单项滑动的时候是无效的，因为菜单的触摸事件的优先级是最高的，所以，如果真的要做这种效果，需要考虑自己来判断触摸事件的！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航