Cocos2d-x《雷电大战》-双层地图无限滚动

本文要实现飞机射击游戏中的地图无限滚动的功能，这里分为两个层，一个层无限向下滚动，一个层无限向上滚动，这样子结合起来效果就非常有层次感，也非常逼真，这里我把地图层都写成一个类，自己把地图改下，就可以成为你自己的了！下面，我们开始吧

先来看看效果：

Cocos2d-x版本：3.4

工程环境：VS30213

一、实现思路

其实就是两张图片，然后同时一起向下（向上）滚动，当一张图片完全出视野后，就把它调到最上面。形成两个图片交替出现，不过，一般为游戏中我们都感觉像是一张图片，那是因为两张图片的头尾连接处是连起来的。原理我画了些图：

二、代码

1、无限向下滚动BackLayerDown类

头文件：

#ifndef__BackLayerDown_H__
#define__BackLayerDown_H__
/**
*功能���限地�向下��
*作者林炳文（[email protected]）
*��2015.2.27
*/
#include"cocos2d.h"
#defineMAP_1_Tag1//宏定义两个Map的Tag
#defineMAP_2_Tag2
classBackLayerDown:publiccocos2d::Layer
{
public:
virtualboolinit();
CREATE_FUNC(BackLayerDown);
private:
voidupdate(floattime);
virtualvoidonExit();
};

#endif//__BackLayerDown_H__

实现文件：

#include"BackLayerDown.h"

USING_NS_CC;


boolBackLayerDown::init()
{

if(!Layer::init())
{
returnfalse;
}

SizevisibleSize=Director::getInstance()->getVisibleSize();
Pointorigin=Director::getInstance()->getVisibleOrigin();

Sprite*map1=Sprite::create("back3_1.png");
Sprite*map2=Sprite::create("back3_2.png");
map1->setPosition(Vec2(visibleSize.width/2+origin.x,visibleSize.height/2+origin.y));
map2->setPosition(Vec2(visibleSize.width/2+origin.x,visibleSize.height+origin.y+map2->getContentSize().height/2));
this->addChild(map1,MAP_1_Tag);
this->addChild(map2,MAP_2_Tag);
this->scheduleUpdate();


returntrue;
}

//移�并判�背景
voidBackLayerDown::update(floattime)
{
SizevisibleSize=Director::getInstance()->getVisibleSize();
Pointorigin=Director::getInstance()->getVisibleOrigin();

Sprite*temmap1=(Sprite*)this->getChildByTag(MAP_1_Tag);
Sprite*temmap2=(Sprite*)this->getChildByTag(MAP_2_Tag);

temmap1->setPositionY(temmap1->getPositionY()-1);
temmap2->setPositionY(temmap2->getPositionY()-1);

if(temmap1->getPositionY()+temmap1->getContentSize().height/2<=origin.y)
{
floatoffset=temmap1->getPositionY()+temmap1->getContentSize().height/2-origin.y;
temmap1->setPosition(Vec2(visibleSize.width/2+origin.x,temmap1->getContentSize().height/2+origin.y+visibleSize.height+offset));
}

if(temmap2->getPositionY()+temmap2->getContentSize().height/2<=origin.x)
{
floatoffset=temmap2->getPositionY()+temmap2->getContentSize().height/2-origin.y;
temmap2->setPosition(Vec2(visibleSize.width/2+origin.x,temmap2->getContentSize().height/2+origin.y+visibleSize.height+offset));
}
}

voidBackLayerDown::onExit()
{
this->unscheduleUpdate();
Layer::onExit();
}
2、无限向上滚动BackLayerUp类

头文件：

#ifndef__BackLayerUp_H__
#define__BackLayerUp_H__
/**
*功能���限地�向上��
*作者林炳文（[email protected]）
*��2015.2.27
*/
#include"cocos2d.h"
#defineMAP_1_Tag1//宏定义两个Map的Tag
#defineMAP_2_Tag2
classBackLayerUp:publiccocos2d::Layer
{
public:
virtualboolinit();
CREATE_FUNC(BackLayerUp);
private:
voidupdate(floattime);
virtualvoidonExit();
};

#endif//__BackLayerUp_H__

实现文件：

#include"BackLayerUp.h"

USING_NS_CC;


boolBackLayerUp::init()
{

if(!Layer::init())
{
returnfalse;
}

SizevisibleSize=Director::getInstance()->getVisibleSize();
Pointorigin=Director::getInstance()->getVisibleOrigin();

Sprite*map1=Sprite::create("back4_2.png");
Sprite*map2=Sprite::create("back4_1.png");
map1->setPosition(Vec2(visibleSize.width/2+origin.x,origin.y-map2->getContentSize().height/2));
this->addChild(map1,MAP_2_Tag);
this->scheduleUpdate();


returntrue;
}

//移�并判�背景
voidBackLayerUp::update(floattime)
{
SizevisibleSize=Director::getInstance()->getVisibleSize();
Pointorigin=Director::getInstance()->getVisibleOrigin();

Sprite*temmap1=(Sprite*)this->getChildByTag(MAP_1_Tag);
Sprite*temmap2=(Sprite*)this->getChildByTag(MAP_2_Tag);

temmap1->setPositionY(temmap1->getPositionY()+1);
temmap2->setPositionY(temmap2->getPositionY()+1);

if(temmap1->getPositionY()-temmap1->getContentSize().height/2>=visibleSize.height)
{
floatoffset=temmap1->getPositionY()-temmap1->getContentSize().height/2-visibleSize.height;
temmap1->setPosition(Vec2(visibleSize.width/2+origin.x,-temmap1->getContentSize().height/2-origin.y-offset));
}

if(temmap2->getPositionY()-temmap2->getContentSize().height/2>=visibleSize.height)
{
floatoffset=temmap2->getPositionY()-temmap2->getContentSize().height/2-visibleSize.height;
temmap2->setPosition(Vec2(visibleSize.width/2+origin.x,-temmap2->getContentSize().height/2-origin.y-offset));
}
}

voidBackLayerUp::onExit()
{
this->unscheduleUpdate();
Layer::onExit();
}

3、说明

其实这两个类可以写在一起的，但是这里我为了能让不同的需要分开，把它们分别写开了，要注意上面判断的方法，无限向下和无限向上判断方法是不样的，而且，这里为了防止出现黑边，要记得设置位置时要加上一定的偏移量，如上面函数中的offset,这里非常重要，如果没边上这个小编，有可能两张图片在切换时，有出现黑边。

三、使用方法

在要用到的地方，把头文件加上

#include"BackLayerDown.h"
#include"BackLayerUp.h"

然后在工程的init()函数添加：

SizevisibleSize=Director::getInstance()->getVisibleSize();
Pointorigin=Director::getInstance()->getVisibleOrigin();
//这是地面图层
this->addChild(BackLayerUp::create());
//这是白云图层
this->addChild(BackLayerDown::create());

//加个飞机
Sprite*airplane_sprite=Sprite::create("air1.png");
airplane_sprite->setPosition(Vec2(visibleSize.width/2,visibleSize.height/5));
this->addChild(airplane_sprite);
效果：