Cocos2d-x《雷电大战》(1)-双层地图无限滚动

た入场券 2021-09-10 11:52 490阅读 0赞

[ 林炳文Evankaka][Evankaka]原创作品。转载请注明出处[http://blog.csdn.net/evankaka][Evankaka]

本文要实现飞机射击游戏中的地图无限滚动的功能，这里分为两个层，一个层无限向下滚动，一个层无限向上滚动，这样子结合起来效果就非常有层次感，也非常逼真，这里我把地图层都写成一个类，自己把地图改下，就可以成为你自己的了！下面，我们开始吧

先来看看效果：

![20150227210709639][]

**Cocos2d-x版本：3.4**

**工程环境：VS30213**

一、实现思路

其实就是两张图片，然后同时一起向下（向上）滚动，当一张图片完全出视野后，就把它调到最上面。形成两个图片交替出现，不过，一般为游戏中我们都感觉像是一张图片，那是因为两张图片的头尾连接处是连起来的。原理我画了些图：

![20150227210132635][]

![20150227210140840][]

![20150227210148781][]

![20150227210156409][]

![20150227210223909][]

二、代码

1、无限向下滚动BackLayerDown类

头文件：

#ifndef __BackLayerDown_H__
    #define __BackLayerDown_H__
    /**
    *功能 實現無限地圖向下滾動
    *作者 林炳文（ling20081005@126.com 博客：http://blog.csdn.net/evankaka）
    *時間 2015.2.27
    */
    #include "cocos2d.h"
    #define MAP_1_Tag   1       // 宏定义两个Map的Tag  
    #define MAP_2_Tag   2 
    class BackLayerDown : public cocos2d::Layer
    {
    public:
        virtual bool init();
        CREATE_FUNC(BackLayerDown);
    private:
    	void update(float time);
    	virtual void onExit();
    };
    
    #endif // __BackLayerDown_H__

实现文件：

#include "BackLayerDown.h"
    
    USING_NS_CC;
    
    
    bool BackLayerDown::init()
    {
      
        if ( !Layer::init() )
        {
            return false;
        }
        
    	Size visibleSize = Director::getInstance()->getVisibleSize();
    	Point origin = Director::getInstance()->getVisibleOrigin();
    
    	Sprite* map1 = Sprite::create("back3_1.png");
    	Sprite* map2 = Sprite::create("back3_2.png");
    	map1->setPosition(Vec2(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));
    	map2->setPosition(Vec2(visibleSize.width / 2 + origin.x, visibleSize.height + origin.y + map2->getContentSize().height / 2));
    	this->addChild(map1, 0, MAP_1_Tag);
    	this->addChild(map2, 0, MAP_2_Tag);
    	this->scheduleUpdate();
    
        
        return true;
    }
    
    //移動并判斷背景
    void BackLayerDown::update(float time)
    {
    	Size visibleSize = Director::getInstance()->getVisibleSize();
    	Point origin = Director::getInstance()->getVisibleOrigin();
    
    	Sprite* temMap1 = (Sprite*)this->getChildByTag(MAP_1_Tag);
    	Sprite* temMap2 = (Sprite*)this->getChildByTag(MAP_2_Tag);
    
    	temMap1->setPositionY(temMap1->getPositionY() - 1);
    	temMap2->setPositionY(temMap2->getPositionY() - 1);
    
    	if (temMap1->getPositionY() + temMap1->getContentSize().height / 2 <= origin.y)
    	{
    		float offset = temMap1->getPositionY() + temMap1->getContentSize().height / 2 - origin.y;
    		temMap1->setPosition(Vec2(visibleSize.width / 2 + origin.x, temMap1->getContentSize().height / 2 + origin.y + visibleSize.height + offset));
    	}
    
    	if (temMap2->getPositionY() + temMap2->getContentSize().height / 2 <= origin.x)
    	{
    		float offset = temMap2->getPositionY() + temMap2->getContentSize().height / 2 - origin.y;
    		temMap2->setPosition(Vec2(visibleSize.width / 2 + origin.x, temMap2->getContentSize().height / 2 + origin.y + visibleSize.height + offset));
    	}
    }
    
    void BackLayerDown::onExit()
    {
    	this->unscheduleUpdate();
    	Layer::onExit();
    }

2、无限向上滚动BackLayerUp类

头文件：

#ifndef __BackLayerUp_H__
    #define __BackLayerUp_H__
    /**
    *功能 實現無限地圖向上滾動
    *作者 林炳文（ling20081005@126.com 博客：http://blog.csdn.net/evankaka）
    *時間 2015.2.27
    */
    #include "cocos2d.h"
    #define MAP_1_Tag   1       // 宏定义两个Map的Tag  
    #define MAP_2_Tag   2 
    class BackLayerUp : public cocos2d::Layer
    {
    public:
        virtual bool init();
        CREATE_FUNC(BackLayerUp);
    private:
    	void update(float time);
    	virtual void onExit();
    };
    
    #endif // __BackLayerUp_H__

实现文件：

#include "BackLayerUp.h"
    
    USING_NS_CC;
    
    
    bool BackLayerUp::init()
    {
      
        if ( !Layer::init() )
        {
            return false;
        }
        
    	Size visibleSize = Director::getInstance()->getVisibleSize();
    	Point origin = Director::getInstance()->getVisibleOrigin();
    
    	Sprite* map1 = Sprite::create("back4_2.png");
    	Sprite* map2 = Sprite::create("back4_1.png");
    	map1->setPosition(Vec2(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));
    	map2->setPosition(Vec2(visibleSize.width / 2 + origin.x, origin.y - map2->getContentSize().height / 2));
    	this->addChild(map1, 0, MAP_1_Tag);
    	this->addChild(map2, 0, MAP_2_Tag);
    	this->scheduleUpdate();
    
        
        return true;
    }
    
    //移動并判斷背景
    void BackLayerUp::update(float time)
    {
    	Size visibleSize = Director::getInstance()->getVisibleSize();
    	Point origin = Director::getInstance()->getVisibleOrigin();
    
    	Sprite* temMap1 = (Sprite*)this->getChildByTag(MAP_1_Tag);
    	Sprite* temMap2 = (Sprite*)this->getChildByTag(MAP_2_Tag);
    
    	temMap1->setPositionY(temMap1->getPositionY() + 1);
    	temMap2->setPositionY(temMap2->getPositionY() + 1);
    
    	if (temMap1->getPositionY() - temMap1->getContentSize().height / 2 >= visibleSize.height)
    	{
    	float offset = temMap1->getPositionY() - temMap1->getContentSize().height / 2 - visibleSize.height;
    	temMap1->setPosition(Vec2(visibleSize.width / 2 + origin.x, -temMap1->getContentSize().height / 2 - origin.y - offset));
    	}
    
    	if (temMap2->getPositionY() - temMap2->getContentSize().height / 2 >= visibleSize.height)
    	{
    	float offset = temMap2->getPositionY() - temMap2->getContentSize().height / 2 - visibleSize.height;
    	temMap2->setPosition(Vec2(visibleSize.width / 2 + origin.x, -temMap2->getContentSize().height / 2 - origin.y  - offset));
    	}
    }
    
    void BackLayerUp::onExit()
    {
    	this->unscheduleUpdate();
    	Layer::onExit();
    }

**3、说明**

**   其实这两个类可以写在一起的，但是这里我为了能让不同的需要分开，把它们分别写开了，要注意上面判断的方法，无限向下和无限向上判断方法是不样的，而且，这里为了防止出现黑边，要记得设置位置时要加上一定的偏移量，如上面函数中的offset,这里非常重要，如果没边上这个东东，有可能两张图片在切换时，有出现黑边。**

三、使用方法

在要用到的地方，把头文件加上

1: #include "BackLayerDown.h"

2: #include "BackLayerUp.h"

然后在工程的init()函数添加：

1: Size visibleSize = Director::getInstance()->getVisibleSize();

2: Point origin = Director::getInstance()->getVisibleOrigin();

3: //这是地面图层

4: this->addChild(BackLayerUp::create());

5: //这是白云图层

6: this->addChild(BackLayerDown::create());

8: //加个飞机

9: Sprite *airplane_sprite = Sprite::create("air1.png");

10: airplane_sprite->setPosition(Vec2(visibleSize.width / 2, visibleSize.height/ 5));

11: this->addChild(airplane_sprite);

效果：

![20150227210709639][]

[林炳文Evankaka][Evankaka]原创作品。转载请注明出处[http://blog.csdn.net/evankaka][Evankaka]

[Evankaka]: http://blog.csdn.net/evankaka
[20150227210709639]: /images/20210811/1bb3061406ec4b0cbffc1d36af831774.png
[20150227210132635]: /images/20210811/83efd50f34474f198f818764944e2dbb.png
[20150227210140840]: /images/20210811/7ba7aef695524fffbdf28b20f1097671.png
[20150227210148781]: /images/20210811/f10d4fb0336a446c860c7f494668d97b.png
[20150227210156409]: /images/20210811/790ec21b996f497d87f8dd98da0d1b6f.png
[20150227210223909]: /images/20210811/dd3cf4ef03b44805b8528bb692b77cb8.png