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); } } }
运行结果:
当在图片中点击后会打印点击的图片的编号
改进后不会出现的情形
版权声明:本文博主原创文章,博客,未经同意不得转载。