卷轴地图是一个可以滚动的背景地图,其实现原理就是利用两张交替的图片,让它们按照一个方向同步位移,当一张图片超过窗口界限的时候进行一次位置更替,使它回到另一张图片的后面。通过这样循环的使用这两张图片,背景看起来就在不停的滚动了。
接下来实现一个背景层,把它添加到游戏场景就可以了。
#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(); }