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

概述    本文要实现飞机射击游戏中的地图无限滚动的功能，这里分为两个层，一个层无限向下滚动，一个层无限向上滚动，这样子结合起来效果就非常有层次感，也非常逼真，这里我把地图层都写成一个类，自己把地图改下，就可以成为你自己的了！下面，我们开始吧 先来看看效果：   Cocos2d-x版本：3.4 工程环境：VS30213   一、实现思路      其实就是两张图片，然后同时一起向下（向上）滚动，当一张

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

先来看看效果：

@H_419_4@

650) this.width=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="B1.gif" alt="wKiom1TwZUbAG56DABsxOYk0Vng666.gif" src="http://s3.51cto.com/wyfs02/M02/59/F3/wKiom1TwZUbAG56DABsxOYk0Vng666.gif">

@H_419_4@

650) this.width=650;" title="捕获" alt="捕获" src="http://img.jb51.cc/vcimg/static/loading.png" border="0" height="420" src="http://s3.51cto.com/wyfs02/M02/59/F0/wKioL1TwXo3AmJwLAAGG1amlHjg628.jpg">

Cocos2d-x版本：3.4

工程环境：VS30213

一、实现思路

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

@H_419_4@

650) this.width=650;" title="捕获" alt="捕获" src="http://img.jb51.cc/vcimg/static/loading.png" border="0" height="453" src="http://s3.51cto.com/wyfs02/M00/59/F0/wKioL1TwXo7AeieEAABLgV9Afhw708.jpg">

@H_419_4@

650) this.width=650;" title="捕获1" alt="捕获1" src="http://img.jb51.cc/vcimg/static/loading.png" border="0" height="529" src="http://s3.51cto.com/wyfs02/M01/59/F0/wKioL1TwXo_Sb1WNAAA2EIle54M164.jpg">

@H_419_4@

650) this.width=650;" title="捕获2" alt="捕获2" src="http://img.jb51.cc/vcimg/static/loading.png" border="0" height="424" src="http://s3.51cto.com/wyfs02/M02/59/F0/wKioL1TwXpCQN5mnAABDGPJo5TI016.jpg">

@H_419_4@

650) this.width=650;" title="捕获3" alt="捕获3" src="http://img.jb51.cc/vcimg/static/loading.png" border="0" height="460" src="http://s3.51cto.com/wyfs02/M00/59/F0/wKioL1TwXpDADP-DAAAzObr__50208.jpg">

@H_419_4@

650) this.width=650;" title="捕获4" alt="捕获4" src="http://img.jb51.cc/vcimg/static/loading.png" border="0" height="449" src="http://s3.51cto.com/wyfs02/M01/59/F0/wKioL1TwXpHhMvFBAAA5MN4vPC0938.jpg">

@H_419_4@

650) this.width=650;" title="捕获5" alt="捕获5" src="http://img.jb51.cc/vcimg/static/loading.png" border="0" height="412" src="http://s3.51cto.com/wyfs02/M02/59/F0/wKioL1TwXpKCcYUoAAA0WJEgSmk218.jpg">

二、代码

1、无限向下滚动BackLayerDown类

头文件：

#ifndef__BackLayerDown_H__#define__BackLayerDown_H__/***功能���限地�向下��*作者林炳文（[email protected]）*��2015.2.27*/#include"cocos2d.h"#defineMAP_1_Tag1//宏定义两个Map的Tag#defineMAP_2_Tag2classBackLayerDown:publiccocos2d::Layer{public:virtualboolinit();CREATE_FUNC(BackLayerDown);private:voIDupdate(floattime);virtualvoIDonExit();};#endif//__BackLayerDown_H__

实现文件：

#include"BackLayerDown.h"USING_NS_CC;boolBackLayerDown::init(){if(!Layer::init()){returnfalse;}SizevisibleSize=Director::getInstance()->getVisibleSize();Pointorigin=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,MAP_1_Tag);this->addChild(map2,MAP_2_Tag);this->scheduleUpdate();returntrue;}//移�并判�背景voIDBackLayerDown::update(floattime){SizevisibleSize=Director::getInstance()->getVisibleSize();Pointorigin=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){floatoffset=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){floatoffset=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));}}voIDBackLayerDown::onExit(){this->unscheduleUpdate();Layer::onExit();}2、无限向上滚动BackLayerUp类

头文件：

#ifndef__BackLayerUp_H__#define__BackLayerUp_H__/***功能���限地�向上��*作者林炳文（[email protected]）*��2015.2.27*/#include"cocos2d.h"#defineMAP_1_Tag1//宏定义两个Map的Tag#defineMAP_2_Tag2classBackLayerUp:publiccocos2d::Layer{public:virtualboolinit();CREATE_FUNC(BackLayerUp);private:voIDupdate(floattime);virtualvoIDonExit();};#endif//__BackLayerUp_H__

实现文件：

#include"BackLayerUp.h"USING_NS_CC;boolBackLayerUp::init(){if(!Layer::init()){returnfalse;}SizevisibleSize=Director::getInstance()->getVisibleSize();Pointorigin=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,origin.y-map2->getContentSize().height/2));this->addChild(map1,MAP_2_Tag);this->scheduleUpdate();returntrue;}//移�并判�背景voIDBackLayerUp::update(floattime){SizevisibleSize=Director::getInstance()->getVisibleSize();Pointorigin=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){floatoffset=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){floatoffset=temmap2->getpositionY()-temmap2->getContentSize().height/2-visibleSize.height;temmap2->setposition(Vec2(visibleSize.wIDth/2+origin.x,-temmap2->getContentSize().height/2-origin.y-offset));}}voIDBackLayerUp::onExit(){this->unscheduleUpdate();Layer::onExit();}

3、说明

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

三、使用方法

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

#include"BackLayerDown.h"#include"BackLayerUp.h"

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

SizevisibleSize=Director::getInstance()->getVisibleSize();Pointorigin=Director::getInstance()->getVisibleOrigin();//这是地面图层this->addChild(BackLayerUp::create());//这是白云图层this->addChild(BackLayerDown::create());//加个飞机Sprite*airplane_sprite=Sprite::create("air1.png");airplane_sprite->setposition(Vec2(visibleSize.wIDth/2,visibleSize.height/5));this->addChild(airplane_sprite);效果：

@H_419_4@

650) this.width=650;" title="0" alt="0" src="http://img.jb51.cc/vcimg/static/loading.png" border="0" height="372" src="http://s3.51cto.com/wyfs02/M01/59/F0/wKioL1TwY9CiAqPMAAFBYWaEdmM806.jpg">

@H_419_4@

650) this.width=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="B1.gif" alt="wKiom1TwZUbAG56DABsxOYk0Vng666.gif" src="http://s3.51cto.com/wyfs02/M02/59/F3/wKiom1TwZUbAG56DABsxOYk0Vng666.gif">

总结

以上是内存溢出为你收集整理的Cocos2d-x《雷电大战》-双层地图无限滚动全部内容，希望文章能够帮你解决Cocos2d-x《雷电大战》-双层地图无限滚动所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。