Cocos2d-X3.0实现地图的无限滚动

我最近在做一个跑酷类游戏,在跑酷类游戏中就会用到地图的无限滚动,在网上查了许多资料后,我也明白了地图无限滚动的实现方法。

为了更加形象的介绍地图的无限滚动,我特意画了几张示意图

首先需要准备两张地图,并且在初始化的时候将第一张地图放在窗口上,第二张地图放在第一张地图的后面

滚动地图,当第一张地图的最右端和窗口的最左端重合

将第一张地图放在第二张地图的后面

当第二张地图的最右端在窗口的最左端时

将第二张地图放在第一张地图的后面(第一张地图的最右端和第二张地图的最左端重合)

上面的就是地图无限循环滚动的实现逻辑,下面通过代码实现地图的无限滚动

首先创建一个SceneMap类,在SceneMap.h中添加下面的代码

#ifndef _SceneMap_H__
#define _SceneMap_H__

#include "cocos2d.h"
USING_NS_CC;

class SceneMap : public Layer
{
public:

	//帧循环调度函数
	void update(float time);

    virtual bool init();
    static Scene* scene();
    CREATE_FUNC(SceneMap);

	TMXTiledMap* map1;
	TMXTiledMap* map2;
};

#endif

在SceneMap.cpp中添加下面的代码

#include "SceneMap.h"

Scene* SceneMap::scene()
{
    Scene *scene = Scene::create();

	SceneMap *layer = SceneMap::create();

	scene->addChild(layer);

	return scene;
}

bool SceneMap::init()
{
    if(!Layer::init())
    {
        return false;
    }

	Size winSize = Director::getInstance()->getWinSize();

	//加载地图
	map1 = TMXTiledMap::create("map1.tmx");
	map2 = TMXTiledMap::create("map2.tmx");

	addChild(map1);
	addChild(map2);

	//将第二张地图的位置设置到第二张地图的后面
	map2->setPositionX(map1->getPositionX() + map1->getContentSize().width);

	//启动帧循环调度
	scheduleUpdate();

	return true;
}

void SceneMap::update(float time)
{
	//每一帧地图向左移动5个像素
	map1->setPositionX(map1->getPositionX() - 5);
	map2->setPositionX(map2->getPositionX() - 5);

	//当第一张地图的最右端和窗口的最左端重合时
	if(map1->getPositionX() + map1->getContentSize().width <= 0)
	{
		//将第一张地图添加到第二张地图后面
		//第一张地图的横坐标 = 第二张地图的横坐标 + 第二张地图的宽度
		map1->setPositionX(map2->getPositionX() + map2->getContentSize().width);
	}

	//当第二张地图的最右端和窗口的最左端重合时
	//将第二张地图添加到第一张地图后面
	if(map2->getPositionX() + map2->getContentSize().width <= 0)
	{
		//将第二张地图添加到第一张地图后面
		//第二张地图的横坐标 = 第一张地图的横坐标 + 第一张地图的宽度
		map2->setPositionX(map1->getPositionX() + map1->getContentSize().width);
	}
}
时间: 2024-11-07 17:25:16

Cocos2d-X3.0实现地图的无限滚动的相关文章

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

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文要实现飞机射击游戏中的地图无限滚动的功能,这里分为两个层,一个层无限向下滚动,一个层无限向上滚动,这样子结合起来效果就非常有层次感,也非常逼真,这里我把地图层都写成一个类,自己把地图改下,就可以成为你自己的了!下面,我们开始吧 先来看看效果: Cocos2d-x版本:3.4 工程环境:VS30213 一.实现思路 其实就是两张图片,然后同时一起向下(向上)滚动,当一张图片完全出视野后,就

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

本文要实现飞机射击游戏中的地图无限滚动的功能,这里分为两个层,一个层无限向下滚动,一个层无限向上滚动,这样子结合起来效果就非常有层次感,也非常逼真,这里我把地图层都写成一个类,自己把地图改下,就可以成为你自己的了!下面,我们开始吧 先来看看效果: Cocos2d-x版本:3.4 工程环境:VS30213 一.实现思路 其实就是两张图片,然后同时一起向下(向上)滚动,当一张图片完全出视野后,就把它调到最上面.形成两个图片交替出现,不过,一般为游戏中我们都感觉像是一张图片,那是因为两张图片的头尾连接

vue2.0无限滚动加载数据插件

  做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装:npm install vue-infinite-loading –save 引入 ES6 import InfiniteLoading from 'vue-infinite-loading'; export default { components: { InfiniteLoading, }, }

LoopBar: Tap酒吧与无限滚动

相约工具栏 - 标签栏与无限滚动为Android由Cleveroad 在Cleveroad我们最近认识到通过使用任何一个应用程序类别的导航,导航面板是很无聊和琐碎.这就是为什么我们的设计师的创意武装,我们向您介绍了基于Android的应用,我们的新组件 - LoopBar.当时的想法是让导航菜单就在指纹,在标签栏.更重要的是认为有一些特定的功能,使其从类似的人群中脱颖而出.因此,尝试在你的应用程序的LoopBar库,你会看到其中的差别. 如果你努力创造不寻常的外观和导航的应用程序,欢迎你使用循环

利用递归 实现UIScrollView无限滚动的效果

项目需求 利用递归 实现UIScrollView无限滚动的效果. 上机试题, #import "ViewController.h" @interface ViewController (){ UIScrollView *mainScroll; BOOL isFinish; int x; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; x=0; isFinish = YES;

用原生的javascript 实现一个无限滚动的轮播图

说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左右切换和前面的方法有所不同,前面是获取当前的索引值乘以-600px当做位移距离,现在是需要获取当前.inner的位置来加上或者减去-600来实现 下面来一步步的去实现轮播图: 首先是html <!DOCTYPE html> <html lang="en"> <

Android 高级UI设计笔记09:Android如何实现无限滚动列表

ListView和GridView已经成为原生的Android应用实现中两个最流行的设计模式.目前,这些模式被大量的开发者使用,主要是因为他们是简单而直接的实现,同时他们提供了一个良好,整洁的用户体验. 对于ListView和GridView一个共同基本要求是:当用户向下滚动时可以动态加载数据支持无限滚动.下面教你如何在自己的应用中实现这个特性. 具体流程如下: (1)我们需要的一个主要组件是InfiniteScrollListener类,它实现了OnScrollListener接口.让我们直接

基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: <style type="text/css"> #liu{ width:280px; height: 279px; background: url(shishi.png) no-repeat; border-radius:140px; -webkit-animation:run 6s

masonry结合json 制作无限滚动的瀑布流

做前端这行的 能直接贴代码就直接贴代码了,不用多说什么别的 效果需要引入jquery和jquery.masonry.min.js这两个JS JS代码如下: $(document).ready(function(){ var $container = $('.space_main_con1 .con'); var animated; var i=1; //判断是否需要 masonry.js这个里面提供动画 如果是IE浏览器并且版本低于9.0 则添加动画 否则就用 css3的动画(css3的动画代码