Tilemap瓦片地图

article/2025/7/21 7:44:39

可以用Tilemap工具来构建游戏世界的地图,创建瓦片地图时,Grid组件自动作为瓦片地图的父级,相比于传统使用照片搭建地图的方式,使用瓦片地图用来搭建地图可以更加迅速,而且使用传统方式搭建地图时,需要添加大量的碰撞体,但是使用瓦片地图就可以避免该问题

瓦片地图的构成:瓦片地图由五个部分组成,可以与现实生活中的画画结合起来

精灵:绘画时的原料,就可以理解为图片,是作为瓦片的普片素材

瓦片:就相当于自己调制出的一个颜色,瓦片包含一个精灵,两个属性(颜色和碰撞器类型)

调色板:包调制好的各种颜色放在调色板中,这里就是把做好的瓦片放在调色板中

笔刷:不同的笔刷绘制出不同的效果,瓦片地图中就是用笔刷工具在调色板中蘸取不同的瓦片绘制出不同的效果

瓦片地图:就相当于画板,用瓦片在上面作画

创建瓦片地图的流程

  1. 创建瓦片地图

层级窗口中右键创建->2D对象->瓦片地图 新建选择想要的瓦片地图类型

(右击后没有2D Object选项的, 需要在packag manger中下载 2D Tilemap Editor 包)

这将自动创建两个GameObject对象,一个是名为Grid的父对象,上面带有Grid组件。

另一个是名为Tilemap的子对象,它在Grid对象下,带有Tilemap和Tilemap Renderer组件。

  1. 创建调色板

点击Grid组件,选择场景窗口,在右下角就能看见tile palette

创建出调色板保存在指定的文件夹中(最好单独创建出一个文件夹保存瓦片地图)

  1. 创建瓦片

拖动精灵到调色板中,会打开一个新窗口,询问瓦片的保存位置。

(1).你也可以通过精灵图集拖动多个瓦片。(这是传统制作瓦片的方式),推荐使用下方的方法,可以制作出功能更为强大的瓦片(比如规格瓦片),但是需要用到插件,2d tilemap-extras插件(安装方法放在文章最下方)

(2).在Assets文件夹中,最好是刚才创建的保存调色板的文件夹中,点击右键->瓦片->规则瓦片(这里由于安装的插件版本可能不同,右键->创建->2D->瓦片->规则瓦片),这里用RuleTile为例子(最常用)

  1. 创建完成,开始在场景中绘制:
    瓦片加入调色板后,就可以用笔刷绘制场景了。

最基本的瓦片地图的使用方法就讲完了,接下是对瓦片地图拓展知识的讲解

(1).规则瓦片(Rule Tile)

(2)Rule override Tile

规则覆盖瓦片是用来拷贝规则瓦片的规则的,意思就是当我们制作出了一个规则瓦片后,如果还想制作另一个规则瓦片,上之前的规则一样,但是就是精灵图不一样就可以使用规则覆盖瓦片(创建方式和规则瓦片一样)

(3)Advanced Rule Tile

Advanced Rule Tile也是用来拷贝规则用的,但是与Rule override Tile不同的是Rule override Tile只能完全复制规则,但是Advanced Rule Tile可以复制规则后可以再对瓦片规则进行更改

(4)瓦片绘制工具

从左至右:

  • 选择工具

用来选择Tile资源更改属性。

  • 移动工具

用于移动选中的Tile资源。

  • 笔刷工具(最常用)

用于绘制矩形块,并由选定的Tile资源来填充。

  • 选取工具

用于选取要绘制的Tile资源,按下左键并拖拽可以一次选取多个Tile。

  • 擦除工具

用于擦除Tile资源。

  • 填充工具

用于将选定区域填充为选定的Tile资源。

TilePalette面板上有一个Edit(编辑),如果选上的话可以编辑在TilePalette面板中的Tile资源(比如想要使用擦除工具就需要点击编辑按钮,进入编辑模式)

(5)给Tilemap添加碰撞体

第一步:首先给Grid下的TileMap组件添加Tilemap Collider 2D 组件

第二步:给想要的瓦片设置碰撞器类型(无就是没有碰撞器,精灵就是系统按照精灵图设置碰撞器,网格就是按照瓦片所在的网格设置碰撞器)

第二步设置完成后会出现每个瓦片都是一个单独的碰撞体,这就会导致两个问题,第一就是物理系统的计算量会更大,减慢游戏速度,第二在瓦片之间的边界上会产生小问题。由于瓦片是两个并排的碰撞体,并且两者之间存在微小间隙,因此有时计算上的微小误差也可能导致仍会发生碰撞的罕见情况。

为了解决这些问题就需要将单个的瓦片碰撞体合并成一个整体,Unity 提供了一个名为Composite Collider 2D的组件。此组件可以获取对象(或对象的子对象)上的所有碰撞体, 并由此创建个大碰撞体

第三步:为Tilemap再添加一个composite collider 2d(添加它的同时,系统会自动添加Rigidbody 2D组件,最好是将其类型勾选为static静态的,因为地图是不会移动的)

再把tilemap collider2d设置为Used By Composite

调整edge raidius(边缘半径)使tilemap边缘呈现细细的管状

2D Tilemap-extras的安装

插件的安装地址https://github.com/Unity-Technologies/2d-extras/tree/2020.3

好像2020之后的版本就可以在包管理器中下载插件,如果没有的就可以在该链接下载,下载好之后,解压到当前的文件夹,这时就有两种方法把该插件安装到unity 中

第一:直接将解压好的文件拖拽到unity的Assets中

第二:在包管理器中选择天机来自磁盘的包,选择解压后的包中的pakage,并安装

这样插件就安装好了


http://chatgpt.dhexx.cn/article/c1y5cjGW.shtml

相关文章

leaflet加载离线瓦片地图

首先我们要明白瓦片地图的请求原理。 其实瓦片地图并不是什么特殊的文件,就是最普通的png图片。之所以为地图,就是带有了该图片按规则组织,绘制时,按规则拼图组装而已; 打开network,查看其请求的的url就能…

瓦片地图原理

GIS介绍 地理信息系统(Geographic Information System或 Geo-Information system,GIS)有时又称为“地学信息系统”。它是一种特定的十分重要的空间信息系统。它是在计算机硬、软件系统支持下,对整个或部分地球表层&…

Unity(9)-TileMap瓦片地图

文章目录 前言相关介绍其他介绍上一篇笔记下一篇笔记 一、图片预处理二、创建调色板(TilePalette)三、创建瓦片(Tile)[1]. 方式一[2]. 方式二 四、修改瓦片(Tile)[1]. 参数介绍[2]. 修改Sprite[3]. 修改Color[4]. 修改ColliderType 五、创建瓦…

cocos2d-x瓦片地图制作详解

瓦片地图制作详解 瓦片地图的原理是把图片中的元素进行单位化,将大图片拆成一张张小图块,然后通过组合拼接的方式,重新拼出整个地图。其流程为:项目定好游戏中瓦片的大小,然后美术绘制瓦片并制作成瓦片图集&#xff0c…

Unity学习:瓦片地图

目录 一、tilemap 二、rule tiles 三、rule override tile 四、advanced override tile 五、伪透视图 这里首先给出unity的官方文档: https://docs.unity3d.com/Manual/class-Tilemap.htmlhttps://docs.unity3d.com/Manual/class-Tilemap.html 一、tilemap 创建 创…

GIS理论知识(四)之地图的图层(切片/瓦片)概念

1.图层中数据的分类 在日常使用中,常用的数据有两种即矢量数据和栅格数据,都可直接导入到GIS软件(ArcMap,SuperMapIDeskTop,Udig,QGIS)中对其作相应的处理。 1.1.矢量数据 矢量数据是利用欧几里德几何学中点、线、面及其组合体…

瓦片地图服务与地图瓦片原理

本文字数:9099字 预计阅读时间:25分钟 这里,首先我们从概念出发,搞清楚瓦片地图服务以及地图瓦片的原理,读起来似乎有点拗口,但是从字面上看得出它们必定拥有着区别与联系,前者是WebGIS中的一个…

【Unity入门计划】基本概念(8)-瓦片地图 TileMap 01

目录 1 TileMap概念 主要思想 优点 创建的层级 2 Unity中的TileMap 2.1 自动父级Grid 网格 2.2 Sprite精灵 2.3 Tile 瓦片 2.4 Tile Palette 调色板 2.5 Brush 笔刷 3 Tilemap Renderer 瓦片地图渲染器 3.1 Sort Order 瓦片排列顺序 3.2 Mode 渲染模式 Chunk 分块…

SDL游戏开发之三-瓦片地图

一.瓦片地图 1)瓦片地图简介 瓦片地图(Tiled Map),又称为瓷砖地图,是在游戏开发中经常使用到的技术,它是由少量的尺寸相同的、小的瓦片图片拼接而成的很大的地图。相对于使用一张张图片来绘制地图而言,瓦片地图不仅大…

瓦片地图是什么鬼

瓦片地图的诞生 地图数据通常体量较大,需要充足的带宽和数据渲染能力。瓦片地图诞生以前,地图多在局域网的桌面软件中使用。互联网的发展,催生了通过浏览器使用地图的需求,于是在1999年,出现了WMS(Web Map …

Unity-瓦片地图详解

前言 在学习瓦片地图的使用时,我发现无论国内外还是Unity官方的相关教程都比较散,接触的比较浅,学的我挺难受的,所以就把各个地方看的教程加上我自己的理解,和官方的API手册,总结出了这个详解。 0. 瓦片地…

html2canvas页面截图图片不显示

前两天在一个群里,有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字,我没有做过屏幕截图的需求,所以不是很清楚,今天稍稍测试了一下。 在github上将html2canvas源码下载到本地,examples文件夹…

js如何实现页面截图生成并分享功能,如何向后端传递

通过html2canvas生成分享图片 什么是 html2canvs? html2canvas 的作用就是允许让我们直接在用户浏览器上拍摄网页或其部分的“截图”。它的屏幕截图是基于 DOM 的,因此可能不会 100% 精确到真实的表示,因为它不会生成实际的屏幕截图,而是基…

移动端H5页面截图【含 domtoimage、html2canvas 】

起因: 由于云栖大会项目需要支持 名片保存到本地功能【如下图红框】,所以,需要单独截取页面中的名片信息,并且保存到本地。 推荐给:需要获取页面内容,给页面截图的小伙伴 介绍两个工具: html2c…

小程序 超长页面截图保存web-view+html2canvas

web-view文档建议参考----支付宝提供的文档,html2canvas官方文档(官网可以下载html2canvas.js 和 html2canvas.min.js)。由于篇幅受限,这里就贴了一下用法,对于web-view的配置情况,需要自己去查看文档&…

服务端实现对页面截图 - PhantomJs

版权声明 : 本文为博主原创文章,如需转载,请注明出处(https://blog.csdn.net/F1004145107/article/details/97786555) 目录 / 1 / 前言 / 2 / 使用方式 / 3 / 结语 / 1 / 前言 本文主要讲解的是关于在Java服务端使用PhandomJs来实现对指定页面(页面可包含echarts等图表)进…

js保存当前页面的截图 (leaflet下载当前页面截图,线会偏移问题解决)

这是保存的leaflet地图 上代码: html <div id="map" class="map"></div>ts代码: var mapid = document.querySelector(#map);const scale = window.devicePixelRatio;// // 传入节点原始宽高const _width = mapid["offsetWidth"]…

react单个页面截图和多个页面截图

之前有一个需求是点击导出按钮&#xff0c;然后去各个页面截图&#xff0c;将图片传给后端&#xff0c;后端返回文件流&#xff0c;导出ppt报告。这个需求听到的时候头都大了&#xff0c;不知道怎么做&#xff0c;之后有思路了&#xff0c;在实现过程中也出现了各种问题&#x…

JS页面截图

1、引入 js 【密码&#xff1a;gf33】 点击下载 html2canvas.min.js <script src"{url:static/octzz/js/html2canvas.min.js}"></script>2、html代码 <body><div><button type"button" class"layui-btn" onclick&q…

使用html2canvas.js实现页面截图

由于最近项目需求&#xff0c;需要实现html页面截图&#xff0c;经过查资料&#xff0c;找到了这个东东html2canvas&#xff0c;刚开始截出来的图片&#xff0c;空白、模糊、图片不完整&#xff0c;各种问题&#xff0c;但幸好有各路大神的见解&#xff0c;把问题解决了&#x…