用CCScrollView创建滚动窗口详解

在游戏开发中，很多时候会用到滚动窗口效果，我们可以通过滚动来切换不同得场景，在RPG类游戏当中，我们可以用滚动窗口实现关卡选择，在卡牌游戏当中，我们可以用于活动页面的切换。

在cocos2d-x中我们可以通过CCScrollView创建一个滚动窗口。

例1：

1. 创建ScrollView类

2. 在ScrollerView中添加代码

#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

3. 在ScrollerView.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时，认为是点击，其它认为是滚动

ScorllView.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;

//创建挨着的精灵

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();

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

}

}

}