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

article/2025/7/20 11:13:13

目录

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 分块渲染

 Individual 单独渲染 

3.3 Detect Chunk Culling Bounds 如何检测边界

3.4 Mask Interaction 遮罩

3.5 Material 材质

4 瓦片地图的创建流程

4.1 创建Sprite&Tile

4.2 创建Tilemap&Tile Palette

4.3 可以开始绘制瓦片地图

4.4 问题处理:Grid有缝隙


1 TileMap概念

Tilemap就是被用来创造2D游戏世界地图的,常见的侧视、俯视、斜45度视角的2D游戏地图绘制都可以用它来实现。

主要思想

将游戏世界的每一种地形绘制成单独的整块,例如RubyAdventure项目资源中就提供了不同地形可以用来生成Tile的精灵:

正方形菱形或者六边形三者之一作为每一块的形状把整块分隔开,再像瓦片/瓷砖一样拼接起来。关于具体是如何分割的,后续会进行介绍。

优点

提高了美术资源的重用性,而且用这样一个工具可以大大简化地图绘制的工作量。

创建的层级

一般在一个2D游戏项目中,Tilemap创建会分成三个层次

  • background——地图背景
  • bound——边界
  • foreground——前景,主要是地形

2 Unity中的TileMap

Unity中TileMap是作为一个游戏对象被使用的,用以储存和处理Tile Assets,它更像是一个系统,将Tiles传输到其他相关的组件中。

Unity中的TileMap由五个部分组成:

2.1 自动父级Grid 网格

创建一个Tilemap:

GameObject -> 2D Object ->Tilemap选择类型

当我们按照这个路径创建一个瓦片地图时,Unity会自动创建一个当前瓦片地图对象的父级对象(默认名称叫Grid),这个Grid就相当于一个个相连网格的合集,每个网格会存放一个Tile,Grid的Cell Size等属性可以改变网格的尺寸。

2.2 Sprite精灵

在【Unity入门计划】基本概念(6)-精灵渲染器 Sprite Renderer介绍了什么是精灵,它其实就是一个2D的Texture容器。

2.3 Tile 瓦片

瓦片包含一个精灵以及两个组件。创建方法:

Project窗口 -> Create -> 2D -> Tiles选择类型

新建的Tile需要给它一个精灵,也就是给它一个纹理。Select中选择精灵即可。还可以改变它的碰撞体类型,默认是Sprite精灵。

2.4 Tile Palette 调色板

可以快速地进行瓦片地图的绘制,创建方式有两个:

第一,从Project面板创建

Project窗口 -> Create -> 2D -> Tile Palette选择类型

第二,创建了Tilemap后,从Scene打开Palette窗口面板创建

二者都需要选择存储的文件路径。

2.5 Brush 笔刷

调色板中用以绘制瓦片地图的工具。

3 Tilemap Renderer 瓦片地图渲染器

它是Tile Map游戏对象中的一个部分,跟精灵渲染器之于精灵一样,它也用来控制当前Tile在Tilemap上的渲染,有以下属性.

3.1 Sort Order 瓦片排列顺序

这个很简单,就是规定每个Tile在整个Tilemap上的排列顺序。通过图层顺序体现前后关系。

3.2 Mode 渲染模式

渲染模式有两种

 Chunk 分块渲染

使用分块模式进行批量渲染,这也是默认的渲染方式,选择Chunk后渲染器会按位置将瓦片进行分组,将瓦片上的精灵一起批处理渲染,可以在瓦片地图中获得最佳渲染性能。

 Individual 单独渲染 

单独渲染每个瓦片并考虑位置和排序顺序。

3.3 Detect Chunk Culling Bounds 如何检测边界

有两个值,Auto和Manual,自动和手动。默认是自动监测。此时渲染器会自动检查使用的精灵。当选择Manual时需要输入提出边界拓展的值。

3.4 Mask Interaction 遮罩

这里跟精灵渲染器的类似,就不赘述,用到了就知道是什么作用了。

3.5 Material 材质

定义用于渲染精灵纹理的材质。

剩下的就是图层关系了,不赘述。

4 瓦片地图的创建流程

4.1 创建Sprite&Tile

首先需要有个想要成为瓦片地图元素的瓦片Tile,还需要精灵作为纹理,因此通常会传入一个2D图片作为精灵。

例如RubyAdventure官方教程中就给出了一个PNG纹理素材,导入并将Type改为Sprite 

下面是创建Tile,按照2.3中的创建思路创建一个Rule Tile基础瓦片,命名为BrickTile,并把刚才创建的精灵赋给他。

4.2 创建Tilemap&Tile Palette

GameObject -> 2D Object ->Tilemap创建Rectangular类型的瓦片地图,同时自动创建了父级Grid。

点开Palette Window,新建一个Palette命名为GamePalette,并将之前创建的Tile拖进去。

4.3 可以开始绘制瓦片地图

4.4 问题处理:Grid有缝隙

如下,瓦片没有填充满整个Grid

更改Tilemap精灵的像素大小,更改成64即可。

修改后的结果:

这是初始创建瓦片地图的方法,但对于一般项目而言,提供的会是多个瓦片的集合,02部分会介绍关于Tile的其他方面的内容。


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

相关文章

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…

vue页面截图;H5页面截图;vue项目中将特定网页内容生成图片(截图);html2canvas截图

功能&#xff1a; 1.兼容 PC 和 Mobile&#xff1b; 2.对指定的区域进行截取&#xff1b; 3.可以控制截图大小&#xff1b; 4.截图生成base64图片地址 一、安装插件 npm install html2canvas --save 或 yarn add html2canvas二、在.vue页面引入使用 import html2canvas fro…

Java实现HTML页面截图功能

概述 业务开发中&#xff0c;经常会有HTML页面截图&#xff0c;或打印另存为PDF文件的需求。本文即是HTML页面截图需求的技术调研过程的成文。不想看长篇大论的同学&#xff0c;可以直接看Selenium部分&#xff0c;本人最后也是采取此方案。 html2canvas 直接上代码&#xf…

2种方式!带你快速实现前端截图

导语 | 本文将介绍在前端开发中页面截图的两种方式&#xff0c;包括对其实现原理和使用方式进行详细阐述&#xff0c;希望能为更多前端开发者提供一些经验和帮助。 一、 背景 页面截图功能在前端开发中&#xff0c;特别是营销场景相关的需求中, 是比较常见的。比如截屏分享&…

Element el-row el-col 布局组件详解

点此查看全部文字教程、视频教程、源代码 本文目录 1. 背景2. 分栏布局3. 分栏间隔4. 分栏偏移4. 对齐方式5. 响应式布局6. 小结 1. 背景 element的布局方式与bootstrap原理是一样的&#xff0c;将网页划分成若干行&#xff0c;然后每行等分为若干列&#xff0c;基于这样的方式…

Android基础篇 屏幕横竖屏切换(layout-land)下篇

默认情况下Activity进行屏幕旋转会自动进行onDestroy并重新onCreate 一、非默认情况下 在AndroidManifest.xml的Activity中配置 <activityandroid:name".ui.activity.XXXXXActivity"android:launchMode"singleTask"android:screenOrientation"por…

Android屏幕共享解决方案

屏幕共享是增强互动体验&#xff0c;提高沟通效率的重要功能。以下是一些实现Android屏幕共享的解决方案&#xff1a; 1、使用视频通话功能&#xff1a;在Android中&#xff0c;可以使用视频通话功能实现屏幕共享。通过视频通话&#xff0c;可以将自己的屏幕内容以视频的方式分…

让div居中的方式的几种方法

让div水平居中的方式的几种方法。 文章目录 一、margin二、绝对定位三、子元素绝对定位父元素相对定位四、flex布局总结 一、margin 第一种方式我们可以利用外边距属性来使div水平垂直居中 先来看一段有问题的代码 <!DOCTYPE html> <html lang"en"> &…

html网页图片和文字水平居中垂直居中显示

关注公众号&#xff1a;”奇叔码技术“ 回复&#xff1a;“java面试题大全”或者“java面试题” 即可免费领取资料 下面代码一致&#xff1a;示例 自己做的网站效果示例 div相对于页面水平居中显示&#xff1a; 核心代码&#xff1a;margin&#xff1a;0 auto&#xff1b;…