cocos2d-x 3.x之卷轴地图-让背景滚动起来

标签：地图   cocos2d-x   

卷轴地图是一个可以滚动的背景地图，其实现原理就是利用两张交替的图片，让它们按照一个方向同步位移，当一张图片超过窗口界限的时候进行一次位置更替，使它回到另一张图片的后面。通过这样循环的使用这两张图片，背景看起来就在不停的滚动了。

接下来实现一个背景层，把它添加到游戏场景就可以了。

#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();
}

cocos2d-x 3.x之卷轴地图-让背景滚动起来

标签：地图   cocos2d-x   

原文地址：http://blog.csdn.net/ixiaochouyu/article/details/43762743