Unity(9)-TileMap瓦片地图

article/2025/7/21 7:04:46

文章目录

  • 前言
    • 相关介绍
    • 其他介绍
    • 上一篇笔记
    • 下一篇笔记
  • 一、图片预处理
  • 二、创建调色板(TilePalette）
  • 三、创建瓦片(Tile）
    • [1]. 方式一
    • [2]. 方式二
  • 四、修改瓦片(Tile）
    • [1]. 参数介绍
    • [2]. 修改Sprite
    • [3]. 修改Color
    • [4]. 修改ColliderType
  • 五、创建瓦片地图(TileMap）
  • 六、修改瓦片地图(TileMap）
    • [1]. 修改Tilemap组件
    • [2]. 修改TilemapRenderer组件
  • 七、使用调色板(TilePalette）
    • [1]. 吸管工具
    • [2]. 画笔工具
    • [3]. 网格调整
    • [4]. 橡皮工具
    • [5]. 矩形工具
    • [6]. 油漆桶工具
    • [7]. 箭头工具
    • [8]. 移动工具

前言

TileMap在Unity2017.2及以上版本可使用，素材来自爱给网
你可以右键下方的图片另存，再导入项目中使用

Unity版本： 2019.4.26
Visual Studio版本： 2019

在这里插入图片描述

相关介绍

Tilemap-Unity官方手册（中文）

CellSwizzle-Unity脚本API

UnityEngine.Grid-Unity脚本API

Unity Tilemap动态生成2d地图-CSDN

按照Rule Tile规则动态生成地图-CSDN

unity 14瓦片地图tilemap-CSDN

Unity Tilemap模块全攻略-CSDN课程

使用TileMap快速构造2D关卡-B站

使用Tilemap系统制作2D场景关卡地图-B站

TileMap瓦片地图的详细使用方法-B站

其他介绍

微软官方C#函数文档

Unity官方API文档（英文）

Unity官方API文档（中文）

Unity官方用户手册（中文）

Unity游戏蛮牛API文档（中文）

Unity教程-C语言中文网

Unity用户手册-unity圣典

Unity组件手册-unity圣典

Unity脚本手册-unity圣典

上一篇笔记

Unity(8)-开启或关闭背景音乐

下一篇笔记

Unity(10)-OnGUI界面

一、图片预处理

  • 如果你的图片已经切分过了，可以跳过这个步骤。
  • 因为图片素材是一张图片包含着多个图片素材，所以需要对图片进行处理。
    将图片转换成Multiple模式，即多图片模式。

在这里插入图片描述

然后点击SpriteEditor精灵编辑器

在这里插入图片描述

选择一种切分的方式Type进行切分

在这里插入图片描述

此时的图片很大概率切分是错误的，但是可以减少一部分切分的工作。

在这里插入图片描述

  • 图片的切分不是此文章需要关注的点，你可以根据文章Unity(3)-图片切分来学习图片切分的过程。
  • 为了方便演示，我只手动分了一部分的素材

在这里插入图片描述

  • 应用之后，展开图片就能看见那些被框起来的素材
  • 没有被框起来的素材不会出现在项目中

在这里插入图片描述
在这里插入图片描述

二、创建调色板(TilePalette）

点击菜单栏的Window，选择2D中的Tile Palette

在这里插入图片描述
在这里插入图片描述

点击Create New Palette下拉框后创建一个调色板

参数介绍
Name调色板名称
Grid网格类型
Cell Size每个网格的大小
Grid参数介绍
Rectangle矩形
Hexagon六边形
Isometric菱形
Isometric Z As Y菱形，将Z轴与Y轴替换
Cell Size参数介绍
Automatic自动设置，X轴宽度为1，Y轴宽度为1，Z轴宽度为0
Manual自定义

在这里插入图片描述
在这里插入图片描述

  • 在项目中选择该调色板的预制体，调色板含有Grid组件
    这个组件可以用来显示网格信息，如果需要调整调色板的网格大小可以修改对应的组件参数
  • 表格内容部分来自CellSwizzle-Unity脚本API和UnityEngine.Grid-Unity脚本API

在这里插入图片描述

参数介绍
Cell Size网格大小
Cell Gap网格间隙
Cell Layout网格布局
Cell Swizzle网格重排
Cell Layout参数介绍
Rectangle矩形
Hexagon六边形
Isometric菱形
Isometric Z As Y菱形，Z轴与Y轴互换
Cell Swizzle参数介绍
XYZ将单元格位置保持在 XYZ。
XZY将单元格位置从 XYZ 重排为 XZY。
YXZ将单元格位置从 XYZ 重排为 YXZ。
YZX将单元格位置从 XYZ 重排为 YZX。
ZXY将单元格位置从 XYZ 重排为 ZXY。
ZYX将单元格位置从 XYZ 重排为 ZYX。

在这里插入图片描述

在调色板界面中可以选择已经创建好的调色板

在这里插入图片描述

三、创建瓦片(Tile）

[1]. 方式一

选中文件夹

在这里插入图片描述

右键选择Create

在这里插入图片描述

在可选项中选择Tile

在这里插入图片描述

选择保存的位置和瓦片名称

在这里插入图片描述

一个瓦片资源就创建好了

在这里插入图片描述

[2]. 方式二

  • 方式二需要通过调色板Tile Palette实现
  • 点击菜单栏的Window，选择2D中的Tile Palette

在这里插入图片描述

选中之前创建的调色板

在这里插入图片描述

  • 下方是已经切分好的Sprite素材
  • 方式二是直接通过选中的素材Sprite来生成瓦片Tile
    按下Ctrl + 左键可以多选

在这里插入图片描述

先选择一个资源，再按下Shift + 左键可以连选

在这里插入图片描述

可以将选中的素材拖进调色板中
如果是该图片下所有的素材都需要时，可以直接将图片拖进去

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

四、修改瓦片(Tile）

[1]. 参数介绍

在项目中选中一个瓦片资源

在这里插入图片描述

参数介绍
Preview预览图片
Sprite精灵资源
Color颜色
Collider Type碰撞体类型
Collider Type参数介绍
None无碰撞体
Sprite根据Sprite素材的形状创建碰撞体
Grid根据网格的形状创建碰撞体

在这里插入图片描述

点击Sprite就可以跳转到对应的素材

在这里插入图片描述

[2]. 修改Sprite

修改Sprite参数有两种方式，一是直接将素材拖进去

在这里插入图片描述

二是点击右侧的圆圈，在选择面板中选择

在这里插入图片描述

在选择素材时，下发会有对应图片信息的预览

在这里插入图片描述

[3]. 修改Color

在这里插入图片描述

  • 在Color界面中，你可以调整R G B值来设置颜色，也可以通过可视化颜色界面选择。
  • R： Red，红色，范围[0,255]
    G： Green，绿色，范围[0,255]
    B： Blue，蓝色，范围[0,255]

在这里插入图片描述

A通道是用来修改瓦片的透明度的，阿尔法Alpha

在这里插入图片描述

[4]. 修改ColliderType

  • 不需要碰撞时选择None
  • 当素材是不规则的形状，就需要使用Sprite
  • 使用Grid会根据网格的大小生成碰撞体，容易出现大小不匹配的情况

在这里插入图片描述

五、创建瓦片地图(TileMap）

在这里插入图片描述

右键选择2D Object的Tilemap

在这里插入图片描述

  • 创建Tilemap游戏对象时，会创建一个Grid父类游戏对象用来显示网格
  • 选中Grid及其子游戏对象时，在场景中都可以显示网格
    其实Grid就是一个无组件的空物体加上了Grid组件和Transform组件

在这里插入图片描述
在这里插入图片描述

有需要的话可以创建多个TileMap，这样你就可以针对不同的瓦片资源进行管理

在这里插入图片描述

然后将瓦片地图拖动到项目中创建预制体

在这里插入图片描述

六、修改瓦片地图(TileMap）

在项目中选中一个瓦片地图的预制体

在这里插入图片描述

包含有三个组件Transform、Tilemap（瓦片地图）和Tilemap Renderer（瓦片地图渲染器）

在这里插入图片描述

[1]. 修改Tilemap组件

  • Tilemap组件参数如下
  • 在Orientation参数为Custom时，下面的Position、Rotation和Scale才能设置值
Tilemap参数介绍
Animation Frame Rate动画帧速率
Tile Anchor锚点
Orientation瓦片地图绘制在哪个面
Position位置
Rotation旋转
Scale缩放
Orientation参数介绍
XY在X和Y轴绘制，默认
XZ在X和Z轴绘制
YX在Y和X轴绘制
YZ在Y和Z轴绘制
ZX在Z和X轴绘制
ZY在Z和Y轴绘制
Custom自定义绘制

在这里插入图片描述

[2]. 修改TilemapRenderer组件

  • 下方表格的内容来自瓦片地图渲染器 (Tilemap Renderer)
  • 当启用Detect Chunk Culling Bounds后，Chunk Culling Bounds才可输入值
参数介绍
Material定义用于渲染精灵纹理的材质。
Sort Order设置所选瓦片地图上的瓦片排序方向
Mode设置渲染器的渲染模式
Detect Chunk Culling Bounds确定渲染器如何检测用于剔除瓦片地图块的边界。这些边界可扩展瓦片地图块的边界，以确保在剔除过程中不会裁剪过大的精灵。
Chunk Culling Bounds输入剔除边界扩展的值（采用 Unity 单位）
Sorting Layer设置瓦片地图的排序图层 (Sorting Layer)。从下拉框中选择现有的排序图层，或创建新的排序图层
Order in Layer设置瓦片地图在其排序图层中的渲染优先级。首先渲染编号较低的图层。编号较高的图层叠加在前者之上。
Mask Interaction设置瓦片地图渲染器 (Tilemap Renderer) 在与精灵遮罩交互时的行为方式
Sort Order参数介绍
Bottom Left从左下角的点开始
Bottom Right从右下角的点开始
Top Left从左上角的点开始
Top Right从右上角的点开始
Mode参数介绍
Chunk渲染器按位置对瓦片进行分组，并将瓦片的精灵一起批处理以进行渲染。选择此模式可在瓦片地图中获得最佳渲染性能。
Individual渲染器单独渲染每个瓦片，同时还会考虑它们的位置和排序顺序。此模式使瓦片上的精灵能够与场景中的其他渲染器或与自定义排序轴进行交互。
Detect Chunk Culling Bounds参数介绍
Auto渲染器会自动检查瓦片使用的精灵，以确定要使用的扩展剔除边界。
Manual于扩展边界以剔除瓦片地图块的值是手动设置的，而不使用 Editor 的自动检测功能。
Mask Interaction参数介绍
None瓦片地图渲染器不与场景中的任何精灵遮罩交互。这是默认选项。
Visible Inside Mask瓦片地图在精灵遮罩覆盖瓦片地图的地方是可见的，而在遮罩外部不可见
Visible Outside Mask瓦片地图在精灵遮罩外部是可见的，而在遮罩内部不可见。精灵遮罩会隐藏其覆盖的精灵部分。

在这里插入图片描述

七、使用调色板(TilePalette）

[1]. 吸管工具

快捷键：I
功能：

在这里插入图片描述

在调色板TilePalette直接点击瓦片Tile就会快速地调用吸管工具

在这里插入图片描述

吸管工具也可以选中多个素材

在这里插入图片描述

[2]. 画笔工具

快捷键： B
功能： 在瓦片地图Tilemap中绘制瓦片Tile

在这里插入图片描述

在一个调色板中选择素材时，会首先调用吸管工具，然后重新返回画笔工具

在这里插入图片描述

  • 然后需要在场景中选择需要绘制的瓦片地图Tilemap
  • 这样绘制的瓦片信息就会被保存在对应的瓦片地图里

在这里插入图片描述
在这里插入图片描述

[3]. 网格调整

  • 可以看到上一步操作时瓦片Tile的大小和网格不匹配，这样在绘制的时候瓦片就是在网格居中绘制。
  • 为了实现绘制的瓦片是相邻的，需要把网格大小调整成瓦片资源的大小
    此时的瓦片资源会比瓦片地图的网格小，所以可以将瓦片地图的网格调小
  • 在瓦片地图对象中是没法变更网格大小的，网格组件存在于Grid对象中
    选中Grid对象，把X和Y改小适应瓦片的大小即可

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

[4]. 橡皮工具

快捷键： D 或按住Shift
功能： 删除瓦片地图Tilemap的瓦片Tile

在这里插入图片描述
在这里插入图片描述

[5]. 矩形工具

快捷键： U
功能： 绘制或删除多个瓦片Tile

在这里插入图片描述

绘制一个区域的瓦片，先选择矩形工具和瓦片素材，选中一块区域创建瓦片资源

在这里插入图片描述

删除一个区域的瓦片，先选择矩形工具，按下Shift键选中一块区域删除区域内的瓦片

在这里插入图片描述

[6]. 油漆桶工具

快捷键： G
功能： 快速填充瓦片Tile

在这里插入图片描述

加入瓦片地图中有一块空心的区域，需要绘制成某个瓦片时就可以使用到油漆桶

在这里插入图片描述

  • 也可以通过油漆桶，替换一片相邻且使用相同素材的瓦片
  • 如果两个瓦片只有四个角接触到，则瓦片不算相邻

在这里插入图片描述

[7]. 箭头工具

快捷键： S
功能： 选中瓦片Tile

在这里插入图片描述

在这里插入图片描述

[8]. 移动工具

快捷键： M
功能： 移动选中的瓦片Tile

在这里插入图片描述
在这里插入图片描述


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

相关文章

cocos2d-x瓦片地图制作详解

cocos2d-x瓦片地图制作详解

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

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理论知识（四）之地图的图层(切片/瓦片)概念

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

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

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

本文字数：9099字 预计阅读时间：25分钟 这里，首先我们从概念出发，搞清楚瓦片地图服务以及地图瓦片的原理，读起来似乎有点拗口，但是从字面上看得出它们必定拥有着区别与联系，前者是WebGIS中的一个…
阅读更多...
【Unity入门计划】基本概念(8)-瓦片地图 TileMap 01

【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游戏开发之三-瓦片地图

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

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

瓦片地图是什么鬼

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

Unity-瓦片地图详解

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

html2canvas页面截图图片不显示

前两天在一个群里，有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字，我没有做过屏幕截图的需求，所以不是很清楚，今天稍稍测试了一下。 在github上将html2canvas源码下载到本地，examples文件夹…
阅读更多...
js如何实现页面截图生成并分享功能，如何向后端传递

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

通过html2canvas生成分享图片 什么是 html2canvs? html2canvas 的作用就是允许让我们直接在用户浏览器上拍摄网页或其部分的“截图”。它的屏幕截图是基于 DOM 的，因此可能不会 100% 精确到真实的表示，因为它不会生成实际的屏幕截图，而是基…
阅读更多...
移动端H5页面截图【含 domtoimage、html2canvas 】

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

起因： 由于云栖大会项目需要支持 名片保存到本地功能【如下图红框】，所以，需要单独截取页面中的名片信息，并且保存到本地。 推荐给：需要获取页面内容，给页面截图的小伙伴 介绍两个工具： html2c…
阅读更多...
小程序 超长页面截图保存web-view+html2canvas

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

web-view文档建议参考----支付宝提供的文档，html2canvas官方文档（官网可以下载html2canvas.js 和 html2canvas.min.js）。由于篇幅受限，这里就贴了一下用法，对于web-view的配置情况，需要自己去查看文档&…
阅读更多...
服务端实现对页面截图 - PhantomJs

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

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

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单个页面截图和多个页面截图

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

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

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实现页面截图

使用html2canvas.js实现页面截图

由于最近项目需求&#xff0c;需要实现html页面截图&#xff0c;经过查资料&#xff0c;找到了这个东东html2canvas&#xff0c;刚开始截出来的图片&#xff0c;空白、模糊、图片不完整&#xff0c;各种问题&#xff0c;但幸好有各路大神的见解&#xff0c;把问题解决了&#x…
阅读更多...
vue页面截图；H5页面截图；vue项目中将特定网页内容生成图片(截图)；html2canvas截图

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页面截图功能

Java实现HTML页面截图功能

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

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

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

Copyright @ 2022~2023