Cocos2d-x《雷电大战》-双层地图无限滚动 推荐 原创 林炳文 2015-02-27 20:05:53 博主文章分类:Cocos2d-x游戏开发 ©著作权 文章标签 Cocos2d-x 地图无限滚动 文章分类 游戏开发 ©著作权归作者所有:来自51CTO博客作者林炳文的原创作品,请联系作者获取转载授权,否则将追究法律责任 本文要实现飞机射击游戏中的地图无限滚动的功能,这里分为两个层,一个层无限向下滚动,一个层无限向上滚动,这样子结合起来效果就非常有层次感,也非常逼真,这里我把地图层都写成一个类,自己把地图改下,就可以成为你自己的了!下面,我们开始吧先来看看效果: Cocos2d-x版本:3.4工程环境:VS30213 一、实现思路 其实就是两张图片,然后同时一起向下(向上)滚动,当一张图片完全出视野后,就把它调到最上面。形成两个图片交替出现,不过,一般为游戏中我们都感觉像是一张图片,那是因为两张图片的头尾连接处是连起来的。原理我画了些图: 二、代码1、无限向下滚动BackLayerDown类头文件:#ifndef __BackLayerDown_H__ #define __BackLayerDown_H__ /** *功能 實現無限地圖向下滾動 *作者 林炳文(ling20081005@126.com) *時間 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 ) *時間 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,这里非常重要,如果没边上这个东东,有可能两张图片在切换时,有出现黑边。 三、使用方法 在要用到的地方,把头文件加上#include "BackLayerDown.h" #include "BackLayerUp.h"然后在工程的init()函数添加: Size visibleSize = Director::getInstance()->getVisibleSize(); Point origin = 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); 效果: 赞 收藏 评论 分享 举报 上一篇:Cocos2d-x《赵云要格斗》--虚拟摇杆控制精灵上下左右运动 下一篇:Android仿微信底部菜单栏+顶部菜单栏(附源码) 提问和评论都可以,用心的回复会被更多人看到 评论 发布评论 全部评论 () 最热 最新 相关文章 cocos2d-x 中CCSpriteFrameCache用法与Cocos Creator中有关方案 本文给出cocos2d-x中CCSpriteFrameCache类的使用思路,并对比了Cocos Creator 3.8环境下的实现方案,但有关更高级的缓存方案并没有讨论,请注意。 缓存 cocos creator cocos2d-x CCSpriteFrameCache SpriteFrame cocos2d-x中的动作替换成Cocos creator 3.8中的Tween动画 文章简单介绍从Cocos2d-x向Cocos Creator转移过程中,原先的Action动作在Creator中如何实现。 Cocos Creator Cocos2d-x 动作 Tween Cocos2d-x 中精灵间的zIndex索引在cocos Creator 3.8中是如何实现的? 本文旨在探讨cocos creator 3.8环境中实现类似于cocos2d-x中节点zIndex值大小的控制方案,以便实现在各类扑克游戏中上下叠压的效果。 遮罩层 cocos creator cocos2d-x zIndex siblingIndex Cocos2d-x 《雷电大战》-精灵随手指移动,你点哪我走哪! 本文要实现飞机游戏中,人的手指按着飞机,就能拖着飞机走动,这里实现了当你手指按在手机的图片上,手指一直按着屏幕,飞机就会跟着你走。同时,还加入了边界判断条件,让飞机在你的视野内移动,实现的效果完全和我们手机上的飞机游戏一样。 Cocos2d-x 精灵随手指移动 [cocos2d-x]地图的应用 前言:cocos2d-x地图的应用最典型的例子就是塔防类游戏,下面我们就来简单学习一下地图的应用吧!工具应用介绍:我们应用的地图编辑软件是Tiled,一款免费的软件,首先是文件->新文件,然后地图->新图块导入图片资源,然后就可以在地图上绘制。友情提醒:一个图层上面不得使用两个图片上的资源,不然后面调用的代码编译会报错;其次就是将图片资源和生成的tmx文件要保持在同级路径下 图层 2d 取对象 cocos2d-x学习笔记番外篇01:地图滚动代码 读了cocos2d-x手机游戏开发作者给的源代码,感觉里面那个地图滚动代码,不合自己口味,于是拿以前开发时用的代码给改掉了。 void GameScene::setSceneScrollPosition(cocos2d::ccTime dt) { CCPoint posi cocos2d-x 地图滚动代码 【Cocos2d-x】Cocos2d-x精灵的性能优化 Cocos2d-x精灵的性能优化-使用纹理图集和精灵帧缓存使用纹理图集纹理图集(Texture)也称为精灵表(Sprite Sheet) 使用纹理图集的优点: 1、减少文件读取次数,读取一张图片比读取一推小文件要快 2、减少OpenGL ES绘制调用并且加速渲染 OpenGL ES 1.1仅仅能够使用2的n次幂大小的图片(即宽度或者高度是2、4、8、64…)。 如果采用小图片OpenGL cocos2d-x 性能优化 图片 缓存 加载 【cocos2d-x】cocos2d-x for Android 环境搭建 No.1 配置NDK环境 详见http://gejw0623.blog.51cto.com/4532274/958033No.2 新建项目 选择 Add Native Support 将cocos2d-x的相关文件添加到jni 游戏 cocos 2dx 【Cocos2d-x】开发基础-Cocos2d-x核心概念 本篇博客讲解: 1.Cocos2d-x的核心概念导演导演类Director(v3.0之前是CCDirector)用于管理场景对象。 (所以3.0版本和以前的最大区别(我们看到的最大区别)就是类前面的CC,3.0版本是把所以的类前缀CC都去掉了)采用单例设计模式!(不多解释啦,不知道的朋友请搜索)auto director = Director::getInstance();//获取唯一的导演 cocos2d-x 博客 2d 菜单项 图层 [Cocos2D-X] 简述Cocos2D-X中的内部函数 简述Cocos2D-X中的内部函数 虽然,Cocos2D-X 已经火了很长一阵子了。但,还是有很多同学刚刚接触 Cocos2D-X ,他们对Cocos2D-X 中一些引擎内部的基础函数,还不是很了解,那么今天我们就来介绍一下这些函数。 virtual bool isVisible(); Cocos2D-X CCNode [Cocos2D-X] Cocos2D-X TestCPP 详解(二)Action 中 Cocos2D-X 讨论学习群:244959010 Cocos2D-X Cocos2D-X入门 TestCPP 【Cocos2d-x】开发基础-Cocos2d-x坐标系 本篇博客讲解: 1.UI坐标 2.OpenGL坐标 3.世界坐标和模型坐标 4.实例:世界坐标转换为模型坐标 5.实例:模型坐标转换为世界坐标 UI坐标和OpenGL坐标 UI坐标就是Android和iOS等应用开发的时候使用的二维坐标系。它的坐标原点是在左上角的。 UI坐标也叫视图坐标,它是和我们的OpenGL坐标是不一样的。OpenGL坐标是基于左下角的 OpenGL坐标是 cocos2d-x 世界坐标 锚点 坐标转换 [cocos2d-x]瓦片地图的应用 前言:我们在做经典的格斗类的游戏的时候,场景常常用的是45°斜地图来创建的。下面 瓦片地图 2d #include 图层 cocos2d-x 小记 1:node->runAction(CCFadeIn::actionWithDuration(2)); 2:CCScene* pScene = CCTransitionFade::transitionWithDuration(t, s); 达到逐渐变黑消失 逐渐变亮显示 4:游戏当中的 :地图编辑器负责的是游戏元素的坐标 职场 休闲 cocos2d-x Cocos2d-x 特效 Cocos2d-x 特效特效共有22种。在boolHelloWorld::init()函数中添加如下代码:if ( !CCLayer::init() ) { return false; } CCSize size = CCDirector::sharedDirector()->getWinSize(); CCSprite* sp = cocos2d-x Cocos2d-x《雷电大战》(3)-子弹无限发射 林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankak 2d 缓存 Javascript 初始化 #include 【Cocos2D-X 】初窥门径(7)无限地图滚动 地图的滚动原理很简单,就是持续设置地图的位置即可。具体实现用schedule()函 f5 2d Javascript cocos2d-x 引用:http://baike.baidu.com/view/6549902.htm官网:http://cocos2d-x.org/各游戏引擎:http://baike.baidu.com/wiki 软件设计--------游戏 2d iphone 游戏引擎 php cocos2d-x getVisibleOrigin getVisibleSize:表示获得视口(可视区域)的大小,如果DesignResolutionSize跟屏幕尺寸一样大,则getVisibleSize等于getWinSize。getVisibleOrigin:表示可视区域的起点坐标,这在处理相对位置的时候非常有用,确保节点在不同分辨率下的位置一致。 Read More 屏幕尺寸 其他 Cocos2d-X字体 Cocos2d-X顺便文本显示在以下三个:CCLabelTTF: 使用系统字体。每一个字符串会生成一个纹理。显示效率比較低下,适合不变化的文字CCLabelAtlas: 使用NodeAtlas优化渲染,适合常常变化的数字,比方分数,金钱之类的数字CCLabelBMFont: 使用CCSpriteBa... 初始化 父类 数组 文件名 2d