Cocos2d-X使用CCScrollView创建滚动视图

CCScrollView可以使游戏有滚动视图的效果，并且可以通过滚动视图切换游戏场景，滚动视图常用于游戏中选择关卡

实例1：使用CCScrollView创建一个简单的滚动视图

首先创建一个ScrollView类

然后在ScrollView.h中添加下面的代码

#ifndef __ScrollView_H__
#define __ScrollView_H__

#include "cocos2d.h"
#include "cocos-ext.h"
USING_NS_CC;
USING_NS_CC_EXT;

class ScrollView : public CCLayer
{
public:
    virtual bool init();  

    static CCScene* scene();
    
    CREATE_FUNC(ScrollView);

    //响应触摸事件
    bool ccTouchBegan(CCTouch* touch,CCEvent*);
    void ccTouchEnded(CCTouch* touch,CCEvent*);

    CCNode* _contaner;
};

#endif // __ScrollView_H__

在ScrollView.cpp中添加下面的代码

#include "ScrollView.h"

CCScene* ScrollView::scene()
{
    CCScene *scene = CCScene::create();
    
    ScrollView *layer = ScrollView::create();

    scene->addChild(layer);

    return scene;
}

bool ScrollView::init()
{
    CCLayer::init();

    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    CCPoint center = ccp(winSize.width / 2,winSize.height / 2);
    
    //创建一个结点
    CCNode* c = CCNode::create();

    //创建5个紧挨着的精灵
    for(int i = 0; i < 5; i++)
    {
        CCSprite* sprite = CCSprite::create("HelloWorld.png");
		c->addChild(sprite);
		
        //设置图片的位置，每两张图片相差一张图片的宽度
        sprite->setPosition(ccpAdd(center,ccp(i*winSize.width,0)));
    }

    //滚动视图
    //第一个参数：显示的视图大小
    //第二个参数：视图的实际大小
    CCScrollView* view = CCScrollView::create(winSize,c);
    addChild(view);

    //设置视图运动的方向为水平运动
    view->setDirection( kCCScrollViewDirectionHorizontal);

    //设置视图的宽度和高度
    view->setContentSize(CCSize(winSize.width * 5,winSize.height * 5));

    return true;
}

执行结果

实例2：CCScrollView的高级应用

不会出现两张图片的相交位置在窗口中(当切换完成图片后总会在窗口上显示一张完整的图片)

在ScrollView.cpp中添加下面的代码

#include "ScrollView.h"

CCScene* ScrollView::scene()
{
    CCScene *scene = CCScene::create();
    
    ScrollView *layer = ScrollView::create();

    scene->addChild(layer);

    return scene;
}

bool ScrollView::init()
{
    CCLayer::init();

    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    CCPoint center = ccp(winSize.width / 2,winSize.height / 2);
    
    //创建一个结点
    CCNode* c = CCNode::create();

    _contaner = c;

    //创建5个紧挨着的精灵
    for(int i = 0; i < 5; i++)
    {
        CCSprite* sprite = CCSprite::create("HelloWorld.png");
		c->addChild(sprite);
		
        //设置图片的位置，每两张图片相差一个屏幕的宽度
        sprite->setPosition(ccpAdd(center,0)));

        //给视图编号
        char buf[10];
        sprintf(buf,"%d",i);
        CCLabelTTF* label = CCLabelTTF::create(buf,"Arial",36);   
        sprite->addChild(label);
        label->setPosition(center);
    }

    //滚动视图
    //第一个参数：在窗口显示的视图大小
    //第二个参数：结点CCNode
    CCScrollView* view = CCScrollView::create(winSize,winSize.height * 5));

     //取消ScrollView的弹性   
     view->setBounceable(false);  

    //注册触摸事件
    setTouchEnabled(true);
    setTouchMode(kCCTouchesOneByOne);

    return true;
}

//鼠标点下的时候
bool ScrollView::ccTouchBegan(CCTouch* touch,CCEvent* ev)
{
    return true;
}

//鼠标起来的时候
void ScrollView::ccTouchEnded(CCTouch* touch,CCEvent*)
{
    //得到鼠标点下去的时候的位置
    CCPoint ptDown = touch->getStartLocation();

    //得到鼠标松开时的位置
    CCPoint ptUp = touch->getLocation();

    //当两个位置的距离的平方小于25时(认为是点击，否则是滑动)
    if(ptUp.getDistanceSq(ptDown) <= 25)
    {
        //检查点击的是哪一个图片
		//将世界坐标转换成结点坐标
        CCPoint ptInContainer = _contaner->convertToNodeSpace(ptUp);

        //定义一个数组保存5个精灵
		CCArray* arr = _contaner->getChildren();

		for(int i = 0; i < 5; ++i)
		{
            //获取精灵的索引(获取点击的是哪个精灵)
			CCSprite* sprite = (CCSprite*)arr->objectAtIndex(i);
			
            //boundingBox()获取精灵的边框(判断触摸点是否在边框内，当在的时候，打印精灵的编号)
            if(sprite->boundingBox().containsPoint(ptInContainer))
			{
				CCLog("click i is %d",i);
				break;
			}
		}
    }
    else
    {
        //滑动  
        int x = _contaner->getPositionX();  
          
        if (x >= -1920 && x <= 0)  
        {  
            // adjust  
            // 0,-480,-960,-1440,-1920  
            int idx = (-x +240)/ 480;  
            x = -idx * 480;  
  
            CCMoveTo* moveTo = CCMoveTo::create(0.5f,ccp(x,this->_contaner->getPositionY()));  
              
            this->_contaner->runAction(moveTo);  
        }  
    }  
}

执行结果：

当在图片中点击后会打印点击的图片的编号

改进后不会出现的情形