频道栏目
首页 > 程序开发 > 移动开发 > 其他 > 正文
cocos2d-x 3.x之卷轴地图-让背景滚动起来
2015-02-13 10:42:35         来源:演员的自我修养  
收藏   我要投稿

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

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

 

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

 

 

点击复制链接 与好友分享!回本站首页
相关TAG标签 卷轴 背景 地图
上一篇:quick-cocos2d-x 3.3 多个AssetManager同时下载的进度问题
下一篇:去除iphone中Safari给按钮默认添加的UI样式
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站