卷轴地图是一个可以滚动的背景地图,其实现原理就是利用两张交替的图片,让它们按照一个方向同步位移,当一张图片超过窗口界限的时候进行一次位置更替,使它回到另一张图片的后面。通过这样循环的使用这两张图片,背景看起来就在不停的滚动了。
接下来实现一个背景层,把它添加到游戏场景就可以了。
#ifndef __BackgroundLayer_H__
#define __BackgroundLayer_H__
#include "cocos2d.h"
// 游戏背景层
class BackgroundLayer : public cocos2d::Layer
{
public:
BackgroundLayer(void);
~BackgroundLayer(void);
virtual bool init() override;
CREATE_FUNC(BackgroundLayer);
// 滚动卷轴地图
void scrollBackground();
private:
// 初始化背景地图
void initBackground();
private:
// 背景地图
cocos2d::Sprite *background_1;
cocos2d::Sprite *background_2;
// 沿Y轴滚动速度
double speedY;
};
#endif
#include "BackgroundLayer.h"
USING_NS_CC;
BackgroundLayer::BackgroundLayer(void)
{
}
BackgroundLayer::~BackgroundLayer(void)
{
}
bool BackgroundLayer::init()
{
if(!Layer::init())
{
return false;
}
this->initBackground();
return true;
}
// 初始化背景
void BackgroundLayer::initBackground()
{
// 缓存plist文件
SpriteFrameCache::getInstance()->addSpriteFramesWithFile("gameArts-hd.plist", "gameArts-hd.png");
// 把两张背景地图加载进来
this->background_1 = Sprite::createWithSpriteFrameName("background_2.png");
this->background_1->setAnchorPoint(Vec2(0, 0));
this->background_1->setPosition(0, 0);
this->addChild(this->background_1);
this->background_2 = Sprite::createWithSpriteFrameName("background_2.png");
this->background_2->setAnchorPoint(Vec2(0, 0));
this->background_2->setPosition(0, this->background_1->getPositionY() + this->background_1->getContentSize().height);
this->addChild(this->background_2);
// 设置初始滚动速度
this->speedY = 2;
// 防止背景滚动的时候两张图片衔接部分出现黑边
this->background_1->getTexture()->setAliasTexParameters();
}
// 滚动背景
void BackgroundLayer::scrollBackground()
{
// 计算出地图下次滚动到的Y轴坐标,这里是向下位移
auto nextPos_1 = this->background_1->getPositionY() - this->speedY;
auto nextPos_2 = this->background_2->getPositionY() - this->speedY;
this->background_1->setPositionY(nextPos_1);
this->background_2->setPositionY(nextPos_2);
// 当一张地图移除屏幕边界的时候,重新放置到另一张地图的上面
if(fabs(nextPos_1) == this->background_1->getContentSize().height)
{
this->background_1->setPositionY(this->background_2->getPositionY() + this->background_2->getContentSize().height);
Sprite *t = this->background_1;
this->background_1 = this->background_2;
this->background_2 = t;
}
}
然后在游戏场景中使用这张卷轴地图
#ifndef __GameScene_H__
#define __GameScene_H__
#include "cocos2d.h"
#include "BackgroundLayer.h"
// 游戏主场景
class GameScene : public cocos2d::Layer
{
public:
GameScene(void);
~GameScene(void);
static cocos2d::Scene *createScene();
virtual bool init() override;
CREATE_FUNC(GameScene);
private:
// 定时器,每一帧调用
virtual void update(float delta) override;
// 此场景加载完毕后的操作
virtual void onEnterTransitionDidFinish() override;
private:
// 游戏背景
BackgroundLayer *backgroundLayer;
};
#endif
#include "GameScene.h"
USING_NS_CC;
GameScene::GameScene(void)
{
}
GameScene::~GameScene(void)
{
}
Scene *GameScene::createScene()
{
auto scene = Scene::create();
auto layer = GameScene::create();
scene->addChild(layer);
return scene;
}
bool GameScene::init()
{
if(!Layer::init())
{
return false;
}
// 加载背景地图
this->backgroundLayer = BackgroundLayer::create();
this->backgroundLayer->setAnchorPoint(Vec2::ZERO);
this->backgroundLayer->setPosition(Vec2::ZERO);
this->addChild(backgroundLayer);
return true;
}
void GameScene::onEnterTransitionDidFinish()
{
Node::onEnterTransitionDidFinish();
// 场景加载完毕才滚动背景
this->scheduleUpdate();
}
void GameScene::update(float delta)
{
this->backgroundLayer->scrollBackground();
}