首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Cocos2D中滚动平铺地图

在Cocos2D中滚动平铺地图,可以通过以下几个步骤实现:

  1. 创建地图精灵

首先,需要创建一个地图精灵,这个精灵可以是一个大的地图文件,或者是由多个小的地图精灵组成的。可以使用Cocos2D提供的精灵创建方法,例如:

代码语言:txt
复制
CCSprite *mapSprite = [CCSprite spriteWithImageNamed:@"map.png"];
  1. 设置地图精灵的位置

创建地图精灵后,需要将其设置到合适的位置上。可以使用Cocos2D提供的位置设置方法,例如:

代码语言:txt
复制
mapSprite.position = ccp(winSize.width/2, winSize.height/2);
  1. 添加地图精灵到层中

将地图精灵添加到层中,可以使用Cocos2D提供的添加方法,例如:

代码语言:txt
复制
[self addChild:mapSprite];
  1. 实现地图滚动

为了实现地图滚动,需要监听触摸事件,并根据触摸事件的位置变化来移动地图精灵。可以使用Cocos2D提供的触摸事件监听方法,例如:

代码语言:txt
复制
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    // 获取触摸点位置
    UITouch *touch = [touches anyObject];
    CGPoint touchLocation = [touch locationInView:touch.view];
    // 转换为层中的坐标
    CGPoint convertedLocation = [[CCDirector sharedDirector] convertToGL:touchLocation];
    // 记录触摸点位置
    _touchStartLocation = convertedLocation;
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    // 获取触摸点位置
    UITouch *touch = [touches anyObject];
    CGPoint touchLocation = [touch locationInView:touch.view];
    // 转换为层中的坐标
    CGPoint convertedLocation = [[CCDirector sharedDirector] convertToGL:touchLocation];
    // 计算触摸点位置变化量
    CGPoint delta = ccpSub(convertedLocation, _touchStartLocation);
    // 移动地图精灵
    mapSprite.position = ccpAdd(mapSprite.position, delta);
    // 更新触摸点位置
    _touchStartLocation = convertedLocation;
}

通过以上步骤,可以实现在Cocos2D中滚动平铺地图的功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Hexo引入本地图片的实现

post "测试文章" |____scaffolds |____source | |_____posts | | |____测试文章.md | | |____测试文章 # 与文章同名的目录,用于保存在文章引入的本地图片资源...|____themes 如上,新建“测试文章.md”时,将会在_posts目录下创建同名文件夹“测试文章”,“测试文章.md”文件需要引入的图片文件只要放在目录“测试文章”下即可。...[本地图片](测试文章/本地图片.jpg) 使用该方式引用的图片既可以本地预览,正式发布之后也能正常显示。...原理说明 显然,hexo引入图片的方式稍微有点繁琐,即:必须在_post目录下新建一个与文章同名的目录,然后将需要引用的图片文件都放在该目录。...另外,转换后的index.html文件保存路径中有一个年/月/日,这是项目配置文件_config.yml的permalink参数配置的,默认值为: permalink: :year/:month/:

1.9K20

每个开发者都应该了解的游戏引擎知识

地图编辑器: 一个好的游戏引擎需要搭配一个好的地图编辑器。unity3d和 cocos2d都把地图编辑器集成到了游戏引擎里面(虽然cocos2d并没有做得特别好,不过由于它的可扩展性,)....坐标系 : 图形图像和游戏应用开发坐标系是非常重要的,我们Android和iOS等平台应用开发的时候使用的二维坐标系它的原点是左上角的。...而在Cocos2d-x坐标系它原点是左下角的,而且Cocos2d-x坐标系又可以分为:世界坐标和模型坐标。unity3d坐标系包含了世界坐标,屏幕坐标,视口坐标,绘制GUI界面的坐标系。...消息驱动:消息循环、消息预处理、消息处理,消息回调用于游戏运行的整个过程不断检测是否有因玩家的操作而触发的消息,并将消息分发到游戏框架的消息处理程序,供程序设计人员编写消息处理驱动。...典型的,其中游戏的正常处理状态,需要按键处理驱动,用来处理用户的输入操作,如按下按键,这些操作将会产生什么影响,就需要各游戏的程序设计人员编写代码。

1.8K10

(数据科学学习手札96)geopandas叠加在线地图

叠加各种在线瓦片底图的方法,来制作出更多样式的地图作品。...图1 2 geopandas叠加在线地图   我们需要配合contextily这个第三方库来辅助geopandas叠加在线地图geopandas已经被正确安装的情况下,使用pip install...图2 叠加在线地图示例   下面我们来划重点,图2所示的例子,我们前面正常读入矢量数据后一定要先变换投影为web墨卡托即EPSG:3857,接着正常绘图,最后一步时将ax对象传入ctx.add_basemap...,并添加了参数source代表对应在线瓦片地图的url,参数zoom来控制地图缩放精度级别。   ...图13   以上就是本文的全部内容,欢迎评论区与我进行讨论~

79630

Creator模块介绍—领略模块化的力量

Sprite模块 功能:场景渲染精灵,支持九宫、拉升、平铺、裁剪等功能。...ScrollBar模块 功能:滚动条组件。 字节数: 11525 代码行数: 352 文件名: CCScrollBar.js 15. ScrollView模块 功能:滚动视图组件。...表面上看是为了减少成本,但实际不管是工作效率还是产品质量上可能与原来的初衷却是背道而驰。 2. 狭义与广义模块化 ? 《设计规则模块化的力量》中提到,模块化有狭义和广义之分。...一个公司有多个部门,每个部分都是一个模块;一个公司也相当于一个模块,社会活动又有自己的分工。 3. 自律性与协作 ?...庆幸的是2017年年初,辗转到CocosCreator阵营,我将曾经coco2d-js的一些开发经验进行总结,涉及方面有:UI编程、网络协议、异步动画、MVC框架、工程自动化等等。

1.2K20

cocos2d-objc 3.0+ 游戏开发学习手册(四): 使用CocoaPods 管理cocos2d项目

关于OALSimpleAudio OALSimpleAudio类是cocos2d中音频处理模块,常常用于游戏开发管理背景音乐与音效,但这个模块3.5新版之后,默认是没有集成的,因此需要从cocos2d...cocos2d中使用cocoapods 游戏开发也常常需要使用第三方库,无论MacOS 和iOS 开发cocospods已成为项目管理的事实标准.下面我们cocos2d示例项目中添加Podfile...Xcode项目的build setting编译设置OTHER_LDFLAGS的配置与cocoapods不同,可能会导致调试或者打包发布产生问题.我们先看一下cocos2d示例工程默认Build setting...管理项目,那么对OTHER_LDFLAGS的配置,我们就以cocoapods为主,因此只需要将它们的设置统一: Build settingOTHER_LDFLAGS设置项添加$(inherited)...关于粒子系统, 瓦片地图,视觉差效果等常用的类,也需要手动集成到项目中,具体的使用会在讲到的时候再做详细说明~~

1K20

模仿精进数据可视化06:常见抽象地图的制作

,它们都是正常地图的基础上,通过置换几何元素,来实现出较为抽象的效果,这类的作品非常之多,因此本文不模仿实际的某幅作品,而是制作出下面三类抽象地图: 图1 2 基于Python模仿常见抽象地图 对应图...1,我们下面来分别模仿3类抽象地图,首先准备一下要用到的中国地图数据,我们偷个懒直接使用高德开源的地图数据接口: 图2 为了方便和简化之后的运算,我们利用unary_union来将融合所有要素为一个:...图3 这样我们的基础数据就准备好了~ 2.1 向外环形扩散的地图 首先我们来制作图1左图所示,从以某个点为圆心,向外环形扩散的地图,原理其实很简单,只需要定义圆心坐标,接着向外按照等差数列,依次扩大半径距离计算缓冲区的轮廓线...可以看到目前生成的环形线已经可以覆盖中国全境,最后用china_total来裁剪即可: fig, ax = plt.subplots(figsize=(8, 8)) # 用china_total作为蒙版从circles裁切出绘图所需部分...2.2 像素风格地图 接着我们来制作图1图所示的由方块组成的像素风格地图,原理也很简单,生成覆盖china_total范围的网格: from shapely.geometry import MultiLineString

56530

iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

用户习惯了系统内置地图中进行交互,因此他们会有预期,能在你所提供的地图中进行类似的行为。 使用标准的地图标注颜色。地图上标注了一系列地点。...分组表格视图中至少含有一组列表,而每一组至少包含一项内容。与平铺型不同,分组型表格没有索引。 ? 平铺型(Plain)。平铺型表格可被分为若干带标签的段落,表格右侧可能会出现垂直的表格索引。...iOS定义了平铺型表格和分组型表格中最常用到的四种单元格布局样式。每种单元格样式都有最适合展示的信息类型。 重要 从编程角度来说,这些样式应用于单元格,用以控制表格里每一列的绘制方式。...无论是平铺型还是分组性,用户点击某一行的某一项时都可以显示一个选项列表。当用户点选了一个不属于表格行的按钮或者其他UI元素的时候,可以使用平铺型表格视图来展示唤起的选项列表。 展示层级信息。...以展开标志告知用户点击这一列的任何位置,都将展开新的列表以展示其子类信息。 展示可以概念上进行分组的信息。平铺型和分组型列表都允许你通过提供页眉和页脚来对信息进行分组和分段。

10.1K51

写给对 ”游戏开发” 感兴趣的朋友们

Cocos2D Cocos2D是一个基于MIT协议的开源框架,用于构建游戏、应用程序和其他图形界面交互应用,支持C++语言开发。...如果说虚幻4引擎和Unity3D引擎是大而全的3D游戏引擎,那么Cocos2D就是小而美的2D游戏引擎,非常适合2D手游的开发。 利用Cocos2D开发的代表作有哪些呢?...To the Moon,一款情节感人的RPG游戏,2011年获得了GameSpot的年度最佳剧本奖。 ? World Editor 简称WE,是暴雪出品的《魔兽争霸3》所附带的地图编辑器。...虽然只是一个附带工具,但是功能却非常强大,可以编辑器许多经常的魔兽RPG地图。 ? 小灰大学期间非常热衷于这个编辑器,也曾经做过几个魔兽RPG地图,和魔兽3玩家们一起分享娱乐。 银河编辑器 ?...同样是暴雪出品的《星际争霸2》所附带的地图编辑器,比WE的功能还要强大得多,甚至可以开发出飞行射击游戏或是第一人称射击游戏。 ?

1.1K10

css入门(5)

三、背景图像概述 本章第1节“背景样式概述”,我们已经给大家分析了CSS控制元素的背景样式包括背景颜色和背景图像,其中控制元素的背景图像涉及到的属性比较多,下面稍微给大家讲解一下,以便为读者理清后面的学习思路...image.png 如上图,第一部分就是背景图像在纵向和横向两个方向都平铺,第二部分只是横向平铺,而第三部分只是纵向平铺。...4、background-attachment CSS,使用背景附件background-attachment属性可以设置背景图像是随对象滚动还是固定不动。...四、background-image属性 CSS,使用background-image属性来定义元素的背景图片。...五、background-repeat属性 CSS,使用background-repeat属性可以设置背景图像是否平铺,并且可以设置如何平铺

97730

【CSS】CSS 总结 ③ ( CSS 背景设置 | 背景颜色 | 背景图片 | 背景图片平铺样式 | 背景图片位置 | 超大背景图片设置 | 背景附着 | 背景样式简写 | 背景半透明 ) ★

, 并且 url() 的链接可以没有双引号 ; background-image: url(相对路径); url() 设置相对链接 url() 的链接没有双引号 3、背景图片平铺样式 通过设置...background-repeat 属性 , 可以设置平铺效果 ; 默认平铺样式 : background-repeat: repeat; , 背景 X 和 Y 轴方向上平铺 ; 背景不平铺 :...background-repeat: no-repeat; , 背景放在盒子左上角 ; 横向平铺 : background-repeat: repeat-x; , 背景 X 轴方向上平铺 ;...纵向平铺 : background-repeat: repeat-y; , 背景 Y 轴方向上平铺 ; 4、背景图片位置 如果 盒子的大小 大于 背景图片的大小 , 默认的 图片 位置是 左上角..., 低分辨率的电脑上只能显示下图红色矩形框的内容 , 这里建议 将图片的核心内容放在 图片的中心偏上的位置 , 如下图所示的 白色矩形 范围 ; 6、背景附着 背景附着 用于设置 背景图片 是

1.2K10

ArcGIS Maps SDK for JavaScript系列之一:Vue3加载ArcGIS地图

缺点:ES 模块旧版浏览器可能不被全面支持,需要进行适当的转换来提供兼容性。 Vue3,由于 Vue 3 使用的是现代浏览器和 ES6+ 特性,因此,我们推荐使用 ES modules。...components文件夹的HelloWorld.vue组件 1、src文件夹下的components文件夹中新建ArcGisMap.vue组件, 2、ArcGisMap.vue组件的template...因为地图div展示的,所以,我们的代码需要在onMounted实现,代码如下 onMounted(()=>{ initArcGisMap() }) const initArcGisMap...7、清除ArcGIS自带的ui组件 虽然我们的地图已经加载出来了,但是我们发现在右侧有一个滚动条,将滚动条下拉到底部,我们发现下面有放大、缩小及ArcGIS的相关信息 这是ArcGIS...刷新浏览器,可以发现,此时我们的浏览器就只有一个布满全屏的地图了 至此,我们已经vue3加载了ArcGIS地图,好了,这节就先到这里,下面一节我们来详细的了解下我们这节代码的使用的Map

70740

CSS 背景(background)

背景固定还是滚动 背景的合写(复合属性) background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 背景图片(image) 语法: background-image : none...| url (url) 参数: none :  无背景图(默认的) url :  使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示背景(只有CSS3...(默认的) no-repeat :  背景图像不平铺 repeat-x :  背景图像在横向上平铺 repeat-y :  背景图像在纵向平铺 背景位置(position) 语法: background-position...为了可读性,建议大家如下写: background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 background: transparent url(image.jpg) repeat-y  ...背景缩放(CSS3) 通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,移动Web开发做屏幕适配应用非常广泛。

2.1K20

模仿精进数据可视化06)常见抽象地图的制作方法

,它们都是正常地图的基础上,通过置换几何元素,来实现出较为抽象的效果,这类的作品非常之多,因此本文不模仿实际的某幅作品,而是制作出下面三类抽象地图: ?...图1 2 基于Python模仿常见抽象地图   对应图1,我们下面来分别模仿3类抽象地图,首先准备一下要用到的中国地图数据,我们偷个懒直接使用高德开源的地图数据接口: ?...可以看到目前生成的环形线已经可以覆盖中国全境,最后用china_total来裁剪即可: fig, ax = plt.subplots(figsize=(8, 8)) # 用china_total作为蒙版从circles裁切出绘图所需部分...2.2 像素风格地图   接着我们来制作图1图所示的又方块组成的像素风格地图,原理也很简单,生成覆盖china_total范围的网格: from shapely.geometry import MultiLineString...图8 ----   以上就是本文的全部内容,欢迎评论区与我进行讨论~

84920

Day4:html和css

#da input {} .shu .coding {} 行高可以让一行文本盒子垂直居中对齐,文字的行高等于盒子的高度,行高-上距离-内容高度-下距离. css三大特性是层叠,继承,优先级....css的样式继承权重值是为0的,不管父元素权重多大,被子元素继承时,它的权重都是为0,意思是子元素定义的样式会覆盖继承的样式,行内样式优先.css,如果权重相同,css就会遵循就近原则,则是靠近元素最近的样式为最大优先级...css定义了!...背景固定还是滚动 背景的合写(复合属性) 无 background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 无 backgroound-position 语法: background-position...fixed :  背景图像固定 背景简写 background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 案例: // css 层叠样式表 <!

4K20

CSS显示模式

转化为行内块元素:display:inline-biock; 注意:单行文字垂直居中,让行高等于盒子的高度 CSS背景 背景图片:background-image:url(地址) 注意:会默认铺满盒子 背景平铺...(就是会不会铺满整个盒子) 用background-repeat来实现 参数值 类型 repeat 背景图像在x和y方向都平铺 no-repeat 背景图像不平铺 repeat-x 背景图像在x方向上平铺...background-position: 20px center 同样的第一个对应x的值,第二个对应y的值 背景固定 用background-attachment来实现 参数 作用 scroll 背景随对象内容滚动...fixed 背景图像固定 注意:默认值是scroll 背景属性的复合写法: background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; 背景颜色半透明 用 background...: rgba(); 来实现 background:rgba(0,0,0,0.3); 注意: "a"是alpha透明度的意思,取值0到1之间 可以把0.3的0省略掉,写出 .3 盒子的内容不受影响 背景总结

80200
领券