首页 > 代码库 > Cocos2d-x 3.2 大富翁游戏项目开发-第五部分 单机游戏-关卡选择ScrollView

Cocos2d-x 3.2 大富翁游戏项目开发-第五部分 单机游戏-关卡选择ScrollView



MenuScene.cpp点击单机游戏后会调用

Director::getInstance()->pushScene(MapChooseScene::createScene());

进入到关卡选择界面,我们采用ScrollView控件制作这个界面

由于scrollview拖动后,位置比较随意,我想是拖动到第二张图片,就完整的显示第二张图片,不要产生偏离位置的现象,所以在移动之后需要进行位置的校正,写了一个adjustScrollView()方法,用来进行该调整。

具体代码如下:


MapChooseScene.h内容:

const int  MAP_COUNT = 3;//定义了三张关卡图片
const int TOUCH_DISTANCE = 50; //手势滑动距离


class MapChooseScene : public Layer,public ScrollViewDelegate  //使用scrollview需要继承此类 
{
…………….
private:
	Size visibleSize;

	Layer* _spritesContainer; //用于存放3张关卡图片的sprite 容器

             int currentPage; //当前所在的是第几张关卡地图
             Point beginTouchPoint; //触摸按下时的位置
             ScrollView *scrollView; //scrollview对象

	    void singleTouchDown(Object* pSender,Control::EventType event);
	    void addBackgroundSprite(); //添加背景方法

	     void addScrollView(); //添加scrollview对象及其包含的sprite
            //继承 ScrollViewDelegate  类需要实现的3个方法
              void scrollViewDidScroll(ScrollView* view);
              void scrollViewDidZoom(ScrollView* view);
              void scrollViewMoveOver(ScrollView* view);

	void adjustScrollView(float distance);//自定义方法,用来进行拖动后位置调整
	void onTouchEnded(Touch*touch,Event *unused_event);
	bool onTouchBegan(Touch * touch,Event *unused_event);
        void onTouchMoved(Touch *touch,Event *unused_event);


};


MapChooseScene.cpp文件内容:


bool MapChooseScene::init()
{
	if ( !Layer::init() )
	{
		return false;
	}
	visibleSize = Director::getInstance()->getVisibleSize();
	
               currentPage = 1;//默认当前是第一张关卡图片
	addBackgroundSprite(); //添加背景

	addScrollView();//添加scrollview 


               //添加触摸监听
	setTouchMode(Touch::DispatchMode::ONE_BY_ONE);

	auto listener = EventListenerTouchOneByOne::create();
	listener->setSwallowTouches(true);
	listener->onTouchBegan=CC_CALLBACK_2(MapChooseScene::onTouchBegan,this);

	listener->onTouchMoved=CC_CALLBACK_2(MapChooseScene::onTouchMoved,this);
	listener->onTouchEnded=CC_CALLBACK_2(MapChooseScene::onTouchEnded,this);

	Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener,this);
	return true;
}

主要来看addScrollView()方法,他的主要功能就是创建3个关卡图片sprite,并添加到Layer类容器spritesContainer对象中,水平排列显示


void MapChooseScene::addScrollView()
{

	_spritesContainer = Layer::create();

//创建地图sprite,添加到spritesContainer中
	Sprite* beachSprite = Sprite::create(BEACH_ITEM);
	Sprite* seaSprite = Sprite::create(SEA_ITEM);
	Sprite* moonSprite = Sprite::create(MOON_ITEM);

	_spritesContainer->addChild(beachSprite);
	beachSprite->setPosition(ccpAdd(center, ccp(0, 0)));

	_spritesContainer->addChild(seaSprite);
	seaSprite->setPosition(ccpAdd(center, ccp(visibleSize.width, 0)));

	_spritesContainer->addChild(moonSprite);
	moonSprite->setPosition(ccpAdd(center, ccp(2*visibleSize.width, 0)));


	_spritesContainer->setPosition(CCPointZero);
	_spritesContainer->setContentSize(CCSize(visibleSize.width * MAP_COUNT, visibleSize.height));//容器大小

//进行scrollView对象的创建 并进行相关设置
	scrollView = ScrollView::create();
	
	scrollView->setContainer(_spritesContainer);
	scrollView->setDirection(ScrollView::Direction::HORIZONTAL);//水平显示
	scrollView->setTouchEnabled(true);
	scrollView->setPosition(CCPointZero);
	
	scrollView->setViewSize(CCSizeMake(visibleSize);//每个关卡图片显示的大小
	scrollView->setContentOffset(CCPointZero,true);
	scrollView->setContentSize(CCSize(visibleSize.width * MAP_COUNT, visibleSize.height));//scrollview 大小同spritesContainer相同

	scrollView->setDelegate(this);

	scrollView->setBounceable(false);

	addChild(scrollView);
}

按下后给beginTouchPoint赋值
bool MapChooseScene::onTouchBegan(Touch * touch,Event *unused_event)

{
	beginTouchPoint = Director::getInstance()->convertToGL(touch->getLocationInView());
	log("touch begain");
	return true;

}
//触摸结束后,获取触摸距离,并调用图片位置校正方法adjustScrollView
void MapChooseScene::onTouchEnded(Touch*touch,Event *unused_event)
{

Point endPoint = Director::getInstance()->convertToGL(touch->getLocationInView());
    float distance = endPoint.x - beginTouchPoint.x;
    if(fabs(distance) > TOUCH_DISTANCE)
    {
        adjustScrollView(distance);
    }
}


校正方法,根据触摸滑动的位置距离差值,确认是向左或向右滑动,如果是向左滑动当前页递增,否则递减 ,最小值为1 最大值为3

然后根据图片是第几页设置scrollview的Offset ,从而实现位置校正


void MapChooseScene::adjustScrollView(float offset)
{

    if (offset<0)
    {
        currentPage ++;
    }else
    {
        currentPage --;
    }
 
    if (currentPage <1)
    {
        currentPage = 1;
    }
 
    if(currentPage > MAP_COUNT)
    {
        currentPage = MAP_COUNT;
    }

        CCPoint  adjustPos = ccp(- visibleSize.width * (currentPage-1), 0);
        scrollView->setContentOffset(adjustPos, true);

}

点击下载代码       地址     http://download.csdn.net/detail/lideguo1979/8268033


未完待续..............................


Cocos2d-x 3.2 大富翁游戏项目开发-第五部分 单机游戏-关卡选择ScrollView