• Cocos2d-x3.0游戏实例《不要救我》三——背景滚动周期

    好。让我们来解释一下这个无限循环滚动的背景。这方面的知识一直讲到烂。我以前的文章还介绍了。所以不是那么特别清楚。

    笨木头花心贡献，啥？花心？不呢，是用心~

    转载请注明，原文地址：http://www.benmutou.com/blog/archives/823

    文章来源：笨木头与游戏开发

    为什么是循环滚动背景？

    用循环滚动背景，事实上是由于我想偷懒，由于这样我仅仅须要准备一张图片就能够了。

    我们终于要创建这种背景，如图：

    Cocos2d-x3.0游戏实例之《别救我》第三篇-滚动背景

     

     

    背景是在滚动的，大家有没有看到？（小若：看你妹，这是jpg，不是gif）

    大家是不是非常在意以下的那多出来的一条锯齿？它可不是坐标错位了，这是一个伏笔（还伏笔，你以为写小说啊。）。

    本篇教程会用到的图片资源到这里下载：http://download.csdn.net/detail/musicvs/7392931

    创建2张连续的背景图片

    要实现循环滚动的背景，须要2张同样的图片实现，图片首尾相接。

    我们要创建一个新的类。叫做BackgroundLayer，用来实现滚动背景。

    创建2张同样的背景图片，非常easy，代码例如以下：

    1. Size visibleSize = Director::getInstance()->getVisibleSize();
    3.  /* 背景图片 */
    4.  m_bg1 = Sprite::create("background.jpg");
    5.  m_bg1->setPosition(Point(visibleSize.width * 0.5f, visibleSize.height * 0.5f));
    6.  this->addChild(m_bg1);
    8.  m_bg2 = Sprite::create("background.jpg");
    9.  m_bg2->setPosition(Point(visibleSize.width * 0.5f, -visibleSize.height * 0.5f));
    10.  this->addChild(m_bg2);
    


    m_bg1和m_bg2都是Sprite对象。由于后面要用到。所以直接作为类的成员属性，方便调用。

    m_bg1是屏幕居中。m_bg2要紧接着m_bg1的以下，大家感受一下。

    创建边缘锯齿

    先跑一下题，我们把边缘锯齿也给加入好：

    1. /* 创建边缘锯齿 */
    2.  auto border = Sprite::create("border.png");
    3.  Size borderSize = border->getContentSize();
    5.  auto border1 = createBorder(Point(borderSize.width * 0.5f, borderSize.height * 0.5f));
    6.  this->addChild(border1);
    8.  auto border2 = createBorder(Point(visibleSize.width - borderSize.width * 0.5f, borderSize.height * 0.5f));
    9.  border2->setFlippedX(true);
    10.  this->addChild(border2);
    12.  auto border3 = createBorder(Point(visibleSize.width * 0.5f, visibleSize.height * 0.15f));
    13.  borderSize = border3->getContentSize();
    14.  border3->setRotation(90.0f);
    15.  this->addChild(border3);
    


    一共三个锯齿，左右各一个。下方一个。

    createBorder是自己定义函数，代码例如以下：

    1. Sprite* BackgroundLayer::createBorder(Point pos)
    2. {
    3.     auto border = Sprite::create("border.png");
    5.     Size borderSize = border->getContentSize();
    7.     auto body = PhysicsBody::createBox(borderSize);
    8.     body->setDynamic(false);
    9.     body->setCategoryBitmask(1);    // 0001
    10.     body->setCollisionBitmask(1);   // 0001
    11.     body->setContactTestBitmask(1); // 0001
    12.     border->setPhysicsBody(body);
    13.     border->setPosition(pos);
    15.     return border;
    16. }
    


    好，这个函数要略微解释一下。这里使用PhysicsBody的createBox函数创建实体盒子刚体。由于边缘不是空心的。

    然后调用了setDynamic函数，让刚体成为静态物体，也就是说。物理世界不会对它起产生影响了，它不会被撞飞。随你怎么撞，它都纹丝不动~

    可是，它会对其它物理对象产生影响。比方有人撞了它，那个人就可能会反弹~

    接着，有三个非常特别的函数：setCategoryBitmask、setCollisionBitmask、setContactTestBitmask。

    这三个函数是用于物体间的碰撞检測的，用来作为推断条件，要解释它们须要不小的篇幅，所以我就不解释了（小若：有没有墙？我想撞一下）。

    本游戏在碰撞检測方面极其简单，所以不理解这三个函数都全然没有影响。由于游戏里的全部对象都能产生碰撞，没有什么特别的地方。

    假设以后有机会。我再单独写一篇文章来介绍吧（或者大家百度一下）

    眼下的代码

    好，来看看眼下为止BackgroundLayer的代码，头文件例如以下：

    1. #ifndef BackgroundLayer_H
    2. #define BackgroundLayer_H
    4. #include "cocos2d.h"
    5. USING_NS_CC;
    7. class BackgroundLayer : public Layer
    8. {
    9. public:
    10.     BackgroundLayer();
    11.     ~BackgroundLayer();
    12.     CREATE_FUNC(BackgroundLayer);
    13.     virtual bool init();
    14. private:
    15.     Sprite* m_bg1;
    16.     Sprite* m_bg2;
    18.     Sprite* createBorder(Point pos);
    19. };
    21. #endif
    


    Cpp文件例如以下：
    1. #include "BackgroundLayer.h"
    3. BackgroundLayer::BackgroundLayer(){}
    5. BackgroundLayer::~BackgroundLayer(){}
    7. bool BackgroundLayer::init()
    8. {
    9.     if (!Layer::init())
    10.     {
    11.         return false;
    12.     }
    14.     Size visibleSize = Director::getInstance()->getVisibleSize();
    16.     /* 背景图片 */
    17.     m_bg1 = Sprite::create("background.jpg");
    18.     m_bg1->setPosition(Point(visibleSize.width * 0.5f, visibleSize.height * 0.5f));
    19.     this->addChild(m_bg1);
    21.     m_bg2 = Sprite::create("background.jpg");
    22.     m_bg2->setPosition(Point(visibleSize.width * 0.5f, -visibleSize.height * 0.5f));
    23.     this->addChild(m_bg2);
    25.     /* 创建边缘锯齿 */
    26.     auto border = Sprite::create("border.png");
    27.     Size borderSize = border->getContentSize();
    29.     auto border1 = createBorder(Point(borderSize.width * 0.5f, borderSize.height * 0.5f));
    30.     this->addChild(border1);
    32.     auto border2 = createBorder(Point(visibleSize.width - borderSize.width * 0.5f, borderSize.height * 0.5f));
    33.     border2->setFlippedX(true);
    34.     this->addChild(border2);
    36.     auto border3 = createBorder(Point(visibleSize.width * 0.5f, visibleSize.height * 0.15f));
    37.     borderSize = border3->getContentSize();
    38.     border3->setRotation(90.0f);
    39.     this->addChild(border3);
    40.     return true;
    41. }
    43. Sprite* BackgroundLayer::createBorder(Point pos)
    44. {
    45.     auto border = Sprite::create("border.png");
    47.     Size borderSize = border->getContentSize();
    49.     auto body = PhysicsBody::createBox(borderSize);
    50.     body->setDynamic(false);
    51.     body->setCategoryBitmask(1);    // 0001
    52.     body->setCollisionBitmask(1);   // 0001
    53.     body->setContactTestBitmask(1); // 0001
    54.     border->setPhysicsBody(body);
    55.     border->setPosition(pos);
    57.     return border;
    58. }
    


    先測试一下

    我们来先測试一下代码的执行情况吧，我们给TollgateScene加入BackgroundLayer层，改动一下TollgateScene的scene函数：

    1. Scene* TollgateScene::scene()
    2. {
    3.     auto scene = Scene::createWithPhysics();
    5.     /* 这里省略了非常多代码 */
    7.     /* 背景层 */
    8.     auto backgroundLayer = BackgroundLayer::create();
    9.     scene->addChild(backgroundLayer, 0);
    11.     auto layer = TollgateScene::create();
    12.     scene->addChild(layer, 10);
    14.     return scene;
    15. }
    


     

    OK。这样就能够了。再次执行代码，正常情况下，如图所看到的：

    Cocos2d-x3.0游戏实例之《别救我》第三篇-滚动背景

     

    （小若：这就是一開始的那张图吧？连图片地址都一样好吧）

    如今地图是不会滚动的，没意思，我们来開始滚床单…不，不好意思。习惯了（邪恶）。是滚动背景才对。

    统一控制游戏逻辑

    地图滚动，事实上就是不断改变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函数：

    1. class TollgateScene : public Layer
    2. {
    3. public:
    4.     ~TollgateScene();
    5.     static Scene* scene();
    6.     CREATE_FUNC(TollgateScene);
    7.     virtual bool init();
    9.     virtual void onExit() override;
    10. private:
    11.     void logic(float dt);
    13.     BackgroundLayer* m_backgroundLayer;
    14. };
    16. #endif
    


     

    以及我偷偷加入了一个BackgroundLayer成员变量，大实用处，不要着急~

    然后改动一下TollgateScene的scene函数：

    1. Scene* TollgateScene::scene()
    2. {
    3.     auto scene = Scene::createWithPhysics();
    5.     /* 这里省略了非常多代码 */
    7.     /* 背景层 */
    8.     auto backgroundLayer = BackgroundLayer::create();
    9.     scene->addChild(backgroundLayer, 0);
    11.     auto layer = TollgateScene::create();
    12.     scene->addChild(layer, 10);
    14.     layer->m_backgroundLayer = backgroundLayer;
    15.     return scene;
    16. }
    


     

    留意最后一句代码（小若：是倒数第二句！

    ）。好吧。倒数第二句，我们保留了BackgroundLayer的引用。也许这样保持引用是比較糟糕的做法，也许用getChildByTag的方式来获取BackgroundLayer会好一些，但由于这对象要使用非常多次，我选择了直接保存引用。

    大家依据个人喜好来决定吧~

    OK，最重要的，看看TollgateScene的logic函数实现。有点复杂，大家要有心理准备：

    1. void TollgateScene::logic(float dt)
    2. {
    3.     m_backgroundLayer->logic(dt);
    4. }
    


     

    （小若：= =哇，好复杂啊，全然看不懂….(蛇精病)）

    我想，大家已经理解我之前说的，统一控制逻辑的意思了吧？由TollgateScene场景来调用各个层的logic函数。这样非常方便。要停止逻辑的时候，仅仅要由TollgateScene控制一下就能够了，不须要对各个层单独地进行控制。

    OK，别忘了。在TollgateScene的init函数加上schedule的调用：

    1. bool TollgateScene::init()
    2. {
    3.     if (!Layer::init())
    4.     {
    5.         return false;
    6.     }
    7.     this->schedule(schedule_selector(TollgateScene::logic));
    8.     return true;
    9. }
    


     

    BackgroundLayer背景层的逻辑

    好了，我们还得为BackgroundLayer加入一个logic逻辑处理函数，头文件加入函数声明：

    1. class BackgroundLayer : public Layer
    2. {
    3. public:
    4.     BackgroundLayer();
    5.     ~BackgroundLayer();
    6.     CREATE_FUNC(BackgroundLayer);
    7.     virtual bool init();
    9.     void logic(float dt);
    10. private:
    11.     Sprite* m_bg1;
    12.     Sprite* m_bg2;
    14.     Sprite* createBorder(Point pos);
    15. };
    


     

    BackgroundLayer的logic函数实现例如以下，这个就真的有点小复杂了：

    1. void BackgroundLayer::logic(float dt) {
    2.     int posY1 = m_bg1->getPositionY(); // 背景地图1的Y坐标
    3.     int posY2 = m_bg2->getPositionY(); // 背景地图2的Y坐标
    5.     int iSpeed = 3;    // 地图滚动速度
    7.     /* 两张地图向上滚动（两张地图是相邻的，所以要一起滚动。否则会出现空隙） */
    8.     posY1 += iSpeed;
    9.     posY2 += iSpeed;
    11.     /* 屏幕宽 */
    12.     int iVisibleHeight = Director::getInstance()->getVisibleSize().height;
    14.     /* 当第1个地图全然离开屏幕时，让第2个地图全然出如今屏幕上。同一时候让第1个地图紧贴在第2个地图后面 */
    15.     if (posY1 > iVisibleHeight * 1.5f) {
    16.         posY2 = iVisibleHeight * 0.5f;
    17.         posY1 = -iVisibleHeight * 0.5f;
    18.     }
    19.     /* 同理。当第2个地图全然离开屏幕时，让第1个地图全然出如今屏幕上。同一时候让第2个地图紧贴在第1个地图后面 */
    20.     if (posY2 > iVisibleHeight * 1.5f) {
    21.         posY1 = iVisibleHeight * 0.5f;
    22.         posY2 = -iVisibleHeight * 0.5f;
    23.     }
    25.     m_bg1->setPositionY(posY1);
    26.     m_bg2->setPositionY(posY2);
    27. }
    


     

    原理我就不解释了。大家看看代码凝视。然后自己在纸上画一画，非常好理解的。反正目的就是让两张背景不断往上移动。一旦图片全然离开屏幕，就让它回到屏幕下方，然后又继续往上移动。

    好了，如今执行游戏，就能看到背景在滚动了~

    OK。接下来，我们已正式加入了主角。

    版权声明：本文博主原创文章，博客，未经同意不得转载。
  • 相关阅读:
    Django中MySQL读写分离技术
    BBS+Blog项目开发
    数据算法 --hadoop/spark数据处理技巧 --（5.移动平均 6. 数据挖掘之购物篮分析MBA）
    数据算法 --hadoop/spark数据处理技巧 --（3.左外连接 4.反转排序）
    数据算法 --hadoop/spark数据处理技巧 --（1.二次排序问题 2. TopN问题）
    mysql ---- Host '' is not allowed to connect to this MySQL server
    win 8.0.12
    Transformer 和 Transformer-XL——从基础框架理解BERT与XLNet
    Transformer 详解
    XLNet：运行机制及和Bert的异同比较
  • 原文地址：https://www.cnblogs.com/blfshiye/p/4822009.html
Copyright © 2020-2023  润新知