Unity学习:瓦片地图

article/2025/7/21 7:19:26

目录

一、tilemap

 二、rule tiles

 三、rule override tile

 四、advanced override tile

五、伪透视图


这里首先给出unity的官方文档:

https://docs.unity3d.com/Manual/class-Tilemap.htmlicon-default.png?t=M3K6https://docs.unity3d.com/Manual/class-Tilemap.html

一、tilemap

创建

 

 创建完之后是这个

拖入图片,将贴图类型设置为精灵

 关于瓦片像素

例如,此时这个图片是64*64

 而Pixels Per Unit中默认为100

相当于在100*100的格子中放入一个64*64的方块,呈现以下效果(格子没有被填满):

 

 所以我们需要把100改成64:

 改了之后的效果如下:

 瓦片分割

我们找一个192*192的图片,设置为精灵,此时将Pixels Per Unit中设置为64,有64*3 = 192,面积为3倍,所以格子数为3的平方,即9倍,放到瓦片调色板上形成了一个九宫格。

如果不分割的话,绘制出来是这样的:

 

于是我们需要点开sprite editor,

在那之前要将single->multiple:

 在sprite editor中点slice进行切割,设置如图:

点slice,再apply即可,会出现9个sprite,是分割好的瓦片:

 二、rule tiles

在rule tiles文件夹里新建一个ruletile

选择精灵素材:

 

 添加tiling rules:

 选择切割好的精灵中的一个(九个的操作都一样),根据选择的精灵来设置规则,如,以下精灵,上面不能放图片,左边不能放图片,下面和右边可以放,于是设置如下(点一下是绿箭头,两下是红叉),然后剩下的八张图片同理配置:

 把设置好的ruletile拖到调色板中就可以用了:

 瓦片会自行按规则排列:

 三、rule override tile

创建

 将做好的ruletile拖到相应位置上

 替换下面9个素材图片即可,但注意要对应的规则,因为这里不能更改规则,然后就可以绘制了。

 四、advanced override tile

 与上面不同的是,这个替换素材之后可以改变规则。

五、伪透视图

补充

透视图指的是有深度、距离感的图,一般要三维中的深度轴来表现场景的深度,而二维游戏中没有这个深度,只能通过前后来仿造深度效果,称为“伪透视图”

先前通过调整瓦片的 Order in Layer 属性来解决了瓦片地图的排序问题,但并非总是希望一个游戏对象在另一个游戏对象之上,比如,在同一个瓦片地图中,玩家角色在一个物体之前(比如一棵树)时,应该是玩家遮挡树,而玩家移动到树后时,应该是树遮挡玩家,这就需要“伪造”透视图。

在 2D 游戏中,场景里的 “前后” 是由 Y 轴决定的,需要让 Unity 根据游戏对象的 y 坐标来绘制游戏对象

Y 轴 y 坐标值越小,越靠前,应该遮挡 y 坐标值较大的游戏对象,也就是 y 坐标较小的游戏对象后绘制,就会位于上层

拖一个tree,两个cube到场景上,发现人一直覆盖在物体上,没有在物体前面与后面的区分。

 于是我们在y轴上基于精灵位置来绘制精灵,editor-project setting -graphics,把transparency sort mode中的default换成custom axis,x,y,z换成0,1,0

 为了实现较为真实的 “伪透视” 效果,我们在游戏对象的pivot中把比对位置重center改为bottom,或用sprite editor,打开后把蓝色圆圈位置拖到最下方中间,然后将游戏对象的 Sprite Sort Point 由 Center 改为 Pivot 即可。

额,可能写得不太行,但这就是一个学习的总结!


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

相关文章

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…

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…