好。让我们来解释一下这个无限循环滚动的背景。这方面的知识一直讲到烂。我以前的文章还介绍了。所以不是那么特别清楚。
笨木头花心贡献,啥?花心?不呢,是用心~
转载请注明,原文地址:http://www.benmutou.com/blog/archives/823
文章来源:笨木头与游戏开发
为什么是循环滚动背景?
用循环滚动背景,事实上是由于我想偷懒,由于这样我仅仅须要准备一张图片就能够了。
我们终于要创建这种背景,如图:
背景是在滚动的,大家有没有看到?(小若:看你妹,这是jpg,不是gif)
大家是不是非常在意以下的那多出来的一条锯齿?它可不是坐标错位了,这是一个伏笔(还伏笔,你以为写小说啊。)。
本篇教程会用到的图片资源到这里下载:http://download.csdn.net/detail/musicvs/7392931
创建2张连续的背景图片
要实现循环滚动的背景,须要2张同样的图片实现,图片首尾相接。
我们要创建一个新的类。叫做BackgroundLayer,用来实现滚动背景。
创建2张同样的背景图片,非常easy,代码例如以下:
- Size visibleSize = Director::getInstance()->getVisibleSize();
- /* 背景图片 */
- m_bg1 = Sprite::create("background.jpg");
- m_bg1->setPosition(Point(visibleSize.width * 0.5f, visibleSize.height * 0.5f));
- this->addChild(m_bg1);
- m_bg2 = Sprite::create("background.jpg");
- m_bg2->setPosition(Point(visibleSize.width * 0.5f, -visibleSize.height * 0.5f));
- this->addChild(m_bg2);
m_bg1和m_bg2都是Sprite对象。由于后面要用到。所以直接作为类的成员属性,方便调用。
m_bg1是屏幕居中。m_bg2要紧接着m_bg1的以下,大家感受一下。
创建边缘锯齿
先跑一下题,我们把边缘锯齿也给加入好:
- /* 创建边缘锯齿 */
- auto border = Sprite::create("border.png");
- Size borderSize = border->getContentSize();
- auto border1 = createBorder(Point(borderSize.width * 0.5f, borderSize.height * 0.5f));
- this->addChild(border1);
- auto border2 = createBorder(Point(visibleSize.width - borderSize.width * 0.5f, borderSize.height * 0.5f));
- border2->setFlippedX(true);
- this->addChild(border2);
- auto border3 = createBorder(Point(visibleSize.width * 0.5f, visibleSize.height * 0.15f));
- borderSize = border3->getContentSize();
- border3->setRotation(90.0f);
- this->addChild(border3);
一共三个锯齿,左右各一个。下方一个。
createBorder是自己定义函数,代码例如以下:
- Sprite* BackgroundLayer::createBorder(Point pos)
- {
- auto border = Sprite::create("border.png");
- Size borderSize = border->getContentSize();
- auto body = PhysicsBody::createBox(borderSize);
- body->setDynamic(false);
- body->setCategoryBitmask(1); // 0001
- body->setCollisionBitmask(1); // 0001
- body->setContactTestBitmask(1); // 0001
- border->setPhysicsBody(body);
- border->setPosition(pos);
- return border;
- }
好,这个函数要略微解释一下。这里使用PhysicsBody的createBox函数创建实体盒子刚体。由于边缘不是空心的。
然后调用了setDynamic函数,让刚体成为静态物体,也就是说。物理世界不会对它起产生影响了,它不会被撞飞。随你怎么撞,它都纹丝不动~
可是,它会对其它物理对象产生影响。比方有人撞了它,那个人就可能会反弹~
接着,有三个非常特别的函数:setCategoryBitmask、setCollisionBitmask、setContactTestBitmask。
这三个函数是用于物体间的碰撞检測的,用来作为推断条件,要解释它们须要不小的篇幅,所以我就不解释了(小若:有没有墙?我想撞一下)。
本游戏在碰撞检測方面极其简单,所以不理解这三个函数都全然没有影响。由于游戏里的全部对象都能产生碰撞,没有什么特别的地方。
假设以后有机会。我再单独写一篇文章来介绍吧(或者大家百度一下)
眼下的代码
好,来看看眼下为止BackgroundLayer的代码,头文件例如以下:
- #ifndef BackgroundLayer_H
- #define BackgroundLayer_H
- #include "cocos2d.h"
- USING_NS_CC;
- class BackgroundLayer : public Layer
- {
- public:
- BackgroundLayer();
- ~BackgroundLayer();
- CREATE_FUNC(BackgroundLayer);
- virtual bool init();
- private:
- Sprite* m_bg1;
- Sprite* m_bg2;
- Sprite* createBorder(Point pos);
- };
- #endif
Cpp文件例如以下:
- #include "BackgroundLayer.h"
- BackgroundLayer::BackgroundLayer(){}
- BackgroundLayer::~BackgroundLayer(){}
- bool BackgroundLayer::init()
- {
- if (!Layer::init())
- {
- return false;
- }
- Size visibleSize = Director::getInstance()->getVisibleSize();
- /* 背景图片 */
- m_bg1 = Sprite::create("background.jpg");
- m_bg1->setPosition(Point(visibleSize.width * 0.5f, visibleSize.height * 0.5f));
- this->addChild(m_bg1);
- m_bg2 = Sprite::create("background.jpg");
- m_bg2->setPosition(Point(visibleSize.width * 0.5f, -visibleSize.height * 0.5f));
- this->addChild(m_bg2);
- /* 创建边缘锯齿 */
- auto border = Sprite::create("border.png");
- Size borderSize = border->getContentSize();
- auto border1 = createBorder(Point(borderSize.width * 0.5f, borderSize.height * 0.5f));
- this->addChild(border1);
- auto border2 = createBorder(Point(visibleSize.width - borderSize.width * 0.5f, borderSize.height * 0.5f));
- border2->setFlippedX(true);
- this->addChild(border2);
- auto border3 = createBorder(Point(visibleSize.width * 0.5f, visibleSize.height * 0.15f));
- borderSize = border3->getContentSize();
- border3->setRotation(90.0f);
- this->addChild(border3);
- return true;
- }
- Sprite* BackgroundLayer::createBorder(Point pos)
- {
- auto border = Sprite::create("border.png");
- Size borderSize = border->getContentSize();
- auto body = PhysicsBody::createBox(borderSize);
- body->setDynamic(false);
- body->setCategoryBitmask(1); // 0001
- body->setCollisionBitmask(1); // 0001
- body->setContactTestBitmask(1); // 0001
- border->setPhysicsBody(body);
- border->setPosition(pos);
- return border;
- }
先測试一下
我们来先測试一下代码的执行情况吧,我们给TollgateScene加入BackgroundLayer层,改动一下TollgateScene的scene函数:
- Scene* TollgateScene::scene()
- {
- auto scene = Scene::createWithPhysics();
- /* 这里省略了非常多代码 */
- /* 背景层 */
- auto backgroundLayer = BackgroundLayer::create();
- scene->addChild(backgroundLayer, 0);
- auto layer = TollgateScene::create();
- scene->addChild(layer, 10);
- return scene;
- }
OK。这样就能够了。再次执行代码,正常情况下,如图所看到的:
(小若:这就是一開始的那张图吧?连图片地址都一样好吧)
如今地图是不会滚动的,没意思,我们来開始滚床单…不,不好意思。习惯了(邪恶)。是滚动背景才对。
统一控制游戏逻辑
地图滚动,事实上就是不断改变2张地图的坐标,要不断改变坐标。就要用schedule来实现,schedule能够在游戏每一帧或者每隔一段时间的时候执行一次逻辑,这个假设不了解的,能够看看我的另外几篇关于schedule的文章:
【木头Cocos2d-x 032】我是定时器(第01章)—我爱单线程之schedule介绍
【木头Cocos2d-x 033】我是定时器第02章—HelloWorld之scheduleUpdate
【木头Cocos2d-x 034】我是定时器(第03章)—真正的定时器之schedule
【木头Cocos2d-x 035】我是定时器(第04章)—停止update和触发器
木头我有一个坏习惯,那就是把游戏中全部的逻辑都用一个schedule来完毕,这么说有点模糊,直接看代码吧。
首先给TollgateScene加入一个logic函数:
- class TollgateScene : public Layer
- {
- public:
- ~TollgateScene();
- static Scene* scene();
- CREATE_FUNC(TollgateScene);
- virtual bool init();
- virtual void onExit() override;
- private:
- void logic(float dt);
- BackgroundLayer* m_backgroundLayer;
- };
- #endif
以及我偷偷加入了一个BackgroundLayer成员变量,大实用处,不要着急~
然后改动一下TollgateScene的scene函数:
- Scene* TollgateScene::scene()
- {
- auto scene = Scene::createWithPhysics();
- /* 这里省略了非常多代码 */
- /* 背景层 */
- auto backgroundLayer = BackgroundLayer::create();
- scene->addChild(backgroundLayer, 0);
- auto layer = TollgateScene::create();
- scene->addChild(layer, 10);
- layer->m_backgroundLayer = backgroundLayer;
- return scene;
- }
留意最后一句代码(小若:是倒数第二句!
)。好吧。倒数第二句,我们保留了BackgroundLayer的引用。也许这样保持引用是比較糟糕的做法,也许用getChildByTag的方式来获取BackgroundLayer会好一些,但由于这对象要使用非常多次,我选择了直接保存引用。
大家依据个人喜好来决定吧~
OK,最重要的,看看TollgateScene的logic函数实现。有点复杂,大家要有心理准备:
- void TollgateScene::logic(float dt)
- {
- m_backgroundLayer->logic(dt);
- }
(小若:= =哇,好复杂啊,全然看不懂….(蛇精病))
我想,大家已经理解我之前说的,统一控制逻辑的意思了吧?由TollgateScene场景来调用各个层的logic函数。这样非常方便。要停止逻辑的时候,仅仅要由TollgateScene控制一下就能够了,不须要对各个层单独地进行控制。
OK,别忘了。在TollgateScene的init函数加上schedule的调用:
- bool TollgateScene::init()
- {
- if (!Layer::init())
- {
- return false;
- }
- this->schedule(schedule_selector(TollgateScene::logic));
- return true;
- }
BackgroundLayer背景层的逻辑
好了,我们还得为BackgroundLayer加入一个logic逻辑处理函数,头文件加入函数声明:
- class BackgroundLayer : public Layer
- {
- public:
- BackgroundLayer();
- ~BackgroundLayer();
- CREATE_FUNC(BackgroundLayer);
- virtual bool init();
- void logic(float dt);
- private:
- Sprite* m_bg1;
- Sprite* m_bg2;
- Sprite* createBorder(Point pos);
- };
BackgroundLayer的logic函数实现例如以下,这个就真的有点小复杂了:
- void BackgroundLayer::logic(float dt) {
- int posY1 = m_bg1->getPositionY(); // 背景地图1的Y坐标
- int posY2 = m_bg2->getPositionY(); // 背景地图2的Y坐标
- int iSpeed = 3; // 地图滚动速度
- /* 两张地图向上滚动(两张地图是相邻的,所以要一起滚动。否则会出现空隙) */
- posY1 += iSpeed;
- posY2 += iSpeed;
- /* 屏幕宽 */
- int iVisibleHeight = Director::getInstance()->getVisibleSize().height;
- /* 当第1个地图全然离开屏幕时,让第2个地图全然出如今屏幕上。同一时候让第1个地图紧贴在第2个地图后面 */
- if (posY1 > iVisibleHeight * 1.5f) {
- posY2 = iVisibleHeight * 0.5f;
- posY1 = -iVisibleHeight * 0.5f;
- }
- /* 同理。当第2个地图全然离开屏幕时,让第1个地图全然出如今屏幕上。同一时候让第2个地图紧贴在第1个地图后面 */
- if (posY2 > iVisibleHeight * 1.5f) {
- posY1 = iVisibleHeight * 0.5f;
- posY2 = -iVisibleHeight * 0.5f;
- }
- m_bg1->setPositionY(posY1);
- m_bg2->setPositionY(posY2);
- }
原理我就不解释了。大家看看代码凝视。然后自己在纸上画一画,非常好理解的。反正目的就是让两张背景不断往上移动。一旦图片全然离开屏幕,就让它回到屏幕下方,然后又继续往上移动。
好了,如今执行游戏,就能看到背景在滚动了~
OK。接下来,我们已正式加入了主角。
版权声明:本文博主原创文章,博客,未经同意不得转载。