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, ccp(i*winSize.width, 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, c);
addChild(view);

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

//设置视图的宽度和高度
view->setContentSize(CCSize(winSize.width * 5, 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);
}
}
}

运行结果：



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



改进后不会出现的情形