用CCScrollView创建滚动窗口详解

在游戏开发中，滚动窗口效果应用广泛。通过滚动操作，我们能够实现不同场景的切换。例如，在RPG类游戏里，可利用滚动窗口实现关卡选择；在卡牌游戏中，则可用于活动页面的切换。

在Cocos2d-x中，我们可以借助CCScrollView来创建滚动窗口。下面将通过具体示例详细介绍其使用方法。

示例1：创建基本滚动窗口

1. 创建ScrollView类

首先，我们需要创建一个ScrollView类，以下是该类的头文件代码：

#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

2. 实现ScrollView类的方法

在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：设置单张滚动

该示例的思路是，当像素距离小于25时，认为是点击操作；否则，认为是滚动操作。

1. 实现ScrollView类的scene和init方法

#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;

// 创建挨着的精灵
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;
}

2. 实现触摸事件处理方法

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

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

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

if(ptUp.getDistanceSq(ptDown) <= 25) {
// 检查点击的是哪一个图片
// 将世界坐标转换成结点坐标
CCPoint ptInContainer = _contaner->convertToNodeSpace(ptUp);

// 定义一个数组保存
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) {
// 适配
// 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);
}
}
}

通过以上两个示例，我们可以看到如何使用CCScrollView创建滚动窗口，以及如何处理点击和滚动事件。在实际开发中，可根据具体需求对代码进行调整和优化。