网易首页 > 网易号 > 正文 申请入驻

使用Tilemap创作等距2D环境

0
分享至

随着Unity 2018.3发布,我们加入了Isometric Tilemap等距瓦片地图,Hexagonal Tilemap六边形瓦片地图也在Unity 2018.2中加入。

全新的Tilemap功能提供了一种快速且高效的方式,来创作基于等距六边形网格布局的2D环境,这种环境被用于很多经典游戏,包括:《暗黑破坏神》、《辐射》系列、《文明》、《帝国时代》等。

项目下载

Isometric Tilemap等距瓦片地图,Hexagonal Tilemap六边形瓦片地图都构建于Unity 2017.2加入的Tilemap系统。

它们原生集成到Unity编辑器中,在Unity的未来版本中,这些功能可能会转移至资源包管理器中。

如果你对这些功能感兴趣,可以下载Isometric Starter Kit项目,其中包含动态角色和多个环境瓦片集。

Isometric Starter Kit项目下载:

https://oc.unity3d.com/index.php/s/E4UPMiU8hBc4Yqk

等距瓦片地图项目设置

开始使用Tilemap前,正确设置项目非常重要。等距瓦片地图适用于2D精灵,需要使用正确的渲染器来实现俯视角等距视图的效果。我们需要确保先渲染距离观看者较远的瓦片,然后再渲染距离较近的瓦片。

为了自定义屏幕上绘制2D对象的顺序,我们可以使用Unity的Custom Axis Sort自定义轴排序功能。我们可以根据摄像机定义该设置,或者在项目级别上进行全局定义。

在项目级别上定义Custom Axis Sort时,请点击Edit > Project Settings > Graphics,在Camera Settings部分,我们将看见Transparency Sort Mode下拉列表,以及Transparency Sort Axis的X,Y和Z值的设置。

默认情况下,Unity中Transparency Sort Axis的XYZ被设为(0, 0, 1)。但是,所有2D瓦片实际上位于相同的Z平面,因此我们可以通过使用屏幕上的高度而不是深度来定义瓦片位于前面还是背后,位于屏幕上较高位置的瓦片会排序在较低位置的瓦片后。

根据高度排序瓦片时,把Transparency Sort Mode改为Custom,把Transparency Sort Axis设为(0, 1, 0)。

了解2D排序的工作方式,请访问:

https://docs.unity3d.com/Manual/2DSorting.html

Tilemap类型

Tilemap功能由多个组件协同工作组成,首先是Grid网格和Tilemap瓦片地图游戏对象。

创建网格,只需在层级窗口单击右键,然后在2D Object选择希望使用的Tilemap类型。默认情况下,每个新网格会和一个对应类型的Tilemap子游戏对象同时创建。

目前支持的Tilemap类型有:

Tilemap-创建矩形网格和Tilemap,在2D Game Kit可以看到使用这种Tilemap的示例。

Hexagonal Point Top Tilemap-创建六边形网格和Tilemap,每个六边形的其中一个顶点指向屏幕上方。

Hexagonal Flat Top Tilemap-另一种六边形网格类型,该类型六边形的顶部是一条平行于屏幕顶部的边。

Isometric和Isometric Z as Y-这二种类型创建二个不同的等距网格实现,二者区别出现在模拟不同瓦片高度级别的时候,例如:在等距关卡有升高平台的时候。

常规Isometric Tilemap最适合用于为每个独立的瓦片高度级别,创建单独Tilemap游戏对象,它会简化创建自动碰撞形状的过程,但瓦片之间高度变化的灵活性较小,因为同一图层的所有瓦片必须位于相同“平面”。

对于Isometric Z as Y Tilemap,每个瓦片的Z位置值会和自定义Transparency Axis Sort设置结合使用,从而让瓦片有互相堆叠的效果。

在Z as Y瓦片地图上绘制时,我们可以动态地调整笔刷的Z设置,以切换不同高度。Z as YTilemap需要在Custom Transparency Sort Axis有额外的Z值,从而正确地进行渲染。

我们可以把网格看作保存Tilemap游戏对象的画架,而Tilemap游戏对象是画布,我们会将瓦片绘制到Tilemap游戏对象上。

开始在Tilemap上绘制时,我们需要笔刷和调色板。调色板是保存瓦片资源的地方,我们可以通过笔刷工具取用瓦片并开始绘制。

创建瓦片调色板时,请点击Window > 2D > Tile Palette,在打开窗口的左上角下拉列表选择“Create New Palette”。请设置适合自己用例的网格类型,本文示例中,我们使用常规等距瓦片地图和Isometric Starter Kit项目的资源。

把调色板的Cell Size设为Manual,以便自定义等距瓦片的大小。本示例中,瓦片对应着X为1,Y为0.5的网格,对于其它用例,它将取决于导入时选择的分辨率和单位像素量,以及瓦片旋转的等距角度上资源的大小。

导入资源的注意事项

我们可能无法确定适合资源的正确导入设置和瓦片地图大小,我们可以根据初始资源大小遵循常用的规则。

首先查看瓦片的分辨率,通常表示为方块的等距瓦片高度比宽度大,表现为平面而不是立方体的“平坦”瓦片宽度比高度大,但二个瓦片间的宽度总是相同。

如果想让瓦片正好是一个Unity单位,请在瓦片导入设置把Pixels Per Unit值设为它们的像素宽度。某些情况下,我们可能会调整该值,往往把它减小或增大为资源的实际分辨率。如果想实现一些瓦片占据多个网格单元并覆盖相邻瓦片的效果,该方法会很实用。

为了确定瓦片正确的Y网格值,使用单个瓦片的底部或顶部高度,将该值除以宽度,这将得到当X为1时,相对于X的Y值。

下面是一些示例。

对于我们在本项目使用的像素美术,所有瓦片的底部高度为32像素,宽度为64像素,因此使用的网格大小在Y轴为0.5。

示例图片的第二个方块来自Golden Skull Studios的资源包,示例瓦片缩小以便参考,原始资源的宽度为128像素。瓦片底部的高度为66像素,Y网格大小等于66除以128的结果,即0.515个单位。

基本Tilemap工作流程

一旦我们确定了正确的网格尺寸,我们可以向调色板添加瓦片。只要把瓦片精灵拖到Tile Palette窗口,这样会创建一个Tile瓦片资源。该资源包含瓦片本身的一些信息,例如:所使用的精灵,着色颜色和它会生成的碰撞体类型。

如果想查看调色板上瓦片的详细信息,请在Tile Palette 窗口顶部选择Select (S)工具,然后在检视窗口中,我们应该能看到它引用了哪个瓦片资源。

向Tilemap绘制新的瓦片,请选中Brush (B)笔刷工具,在调色板单击瓦片,然后便能在场景视图绘制出选中的瓦片。其它绘制工具还有Eraser (D)橡皮擦工具,Box Fill (U)方块填充工具,Flood Fill (G)瀑布填充工具和Tile Picker (I)瓦片选择器。

我们可能希望编辑瓦片在调色板的布局。单击工具栏下方Edit按钮,便会进入调色板编辑模式,但此工具会影响瓦片调色板本身,请记得在完成修改后退出该模式。

Tilemap渲染器模式

某些情况下,我们会发现不同类型瓦片没有正确地排序,即使它们位于相同的Tilemap,如下图所示。

这种情况由Tilemap Renderer组件的Mode设置决定,默认情况下,Mode设为Chunk(分块)。Chunk模式能有效减少Tilemap的性能消耗,它不会单独渲染每个瓦片,而是会将瓦片作为大型分块一次性进行批渲染。

但使用Chunk模式有二个主要缺点,其中一个缺点是该模式不支持对场景中其它2D对象进行动态排序。这意味着如果Tilemap处于Chunk模式,它将无法动态地排序其它对象的前后内容,例如角色。但在优化游戏时,Chunk模式非常高效,能够用于批渲染地面的大片区域。

但这并没有解决解决不同瓦片不能相互排序的问题。为了批渲染来自二个或以上不同精灵的瓦片,精灵必须统一为单个Sprite Atlas精灵图集资源下。

创建精灵图集时,请选择Assets > Create > Sprite Atlas,在Sprite Atlas设置中,有Objects for Packing列表,把所有打算批渲染的瓦片拖到该列表,调整为正确的导入设置,这里的导入设置通常和单个精灵的导入设置相同。

完成设置后,瓦片会被正确地排序,但瓦片只会在运行模式或运行时下有正确排序的效果。

因此,最好在编辑时把Tilemap Renderer组件的Mode设为Individual。该模式会单独排序每个瓦片,这意味着在运行模式外也能看到正确的渲染效果,如果此时仍要修改关卡,这种做法非常实用。

在完成关卡结构后,可以把Tilemap Renderer的Mode改为Chunk。

在添加物体时,例如:树木,道具以及与角色或其它对象动态排序的高地,Individual渲染模式也很实用。

本文中,我们会为所有Tilemap使用Individual模式。

使用多个Tilemap

对于等距瓦片地图和六边形瓦片地图的情况,如果添加道具对象到对齐网格的关卡,或者添加看起来比第一个图层更高的瓦片时,最好在同一网格上使用多个Tilemap

将另一个Tilemap附加到网格时,请右键单击网格游戏对象,创建对应类型的新Tilemap。

为了切换为在新Tilemap上进行绘制,在Tile Palette窗口修改主工具栏下方的Active Tilemap。

添加升高区域

通常有二种方法添加升高地面到关卡中,方法取决于使用的Tilemap类型,我们会介绍每个可能的情况。

下面的视频将介绍处理常规等距瓦片地图的其中一个方法,以及如何添加碰撞区域到瓦片。

使用常规等距瓦片地图

对于普通的等距瓦片地图,我们只需在相同网格创建一个新的Tilemap,然后设置为较大的Order in Layer值即可。然后修改Tile Anchor设置,使新图层锚定在网格的较高点。

示例中地面部分Tilemap的Tile Anchor(瓦片锚点)把XY值设为(0, 0),我们想让新图层绘制在高一个单位的位置,因此把新Tilemap的锚点改为(1, 1)。把Order in Layer设为1,使它比基础关卡只高一个单位。

现在,我们可以将活动Tilemap改为第二个高度级别,然后进行绘制。

使用Z as Y等距瓦片地图

有时使用相同Tilemap模拟不同高度的做法很实用,这种情况下可以使用Z as Y等距瓦片地图和网格。

使用Z as Y瓦片地图时,每个瓦片的Z值对瓦片渲染顺序有额外的影响。我们可以在绘制时调整瓦片的Z值,在Tile Palette窗口底部使用笔刷的Z Position设置即可,或者使用“+”和“-”热键修改。

为了使Z值产生正确影响并使瓦片正确排序,我们需要在Custom Axis Sort值添加Z影响,我们在此可使用的数值和Unity把单元位置从等距网格转换为世界空间值的方式相关联。例如:XYZ大小为(1, 0.5, 1),即等距图默认设置的网格有-0.26的Z轴排序值。

设置好正确的Custom Axis Sort值后,可以开始绘制有不同Z值的瓦片。我们也可以通过修改网格的Z大小,调整Z值向上或向下移动升高瓦片的增量。

计算Z值

我们可以使用通用公式来计算出轴排序的Z值。首先获取网格的Y值大小,如果不知道Y值大小,请查看前面导入资源的注意事项部分,将该值乘以-0.5,然后减去0.01。

通过使用该公式,大小为(1, 0.5, 1)的网格会得到-0.26的Z排序值,使用该值时,任何(1, 0.5, 1)的网格都会正确地排序瓦片。

添加碰撞

现在有了一些位置较高的瓦片,我们可以使用碰撞来控制玩家可以去到的区域和过渡位置。

添加碰撞的方法很多种,在示例中,我们希望使用斜坡让玩家在关卡升高和下降,虽然不清楚哪些对象应该有或没有碰撞体。然而我们可以使用额外的Tilemap手动定义碰撞。

在项目中,我们创建了一些精灵,它们对应着我们用于定义碰撞区域的不同形状。我们可以把这些形状绘制到第三个Tilemap上,实现不想让玩家通过的区域。例如:我们希望玩家只通过斜坡登上悬崖,而不是直接走到悬崖。

我们也可以在Tilemap Renderer组件添加自定义材质,从而给瓦片添加和关卡其它内容不同的颜色。

一旦放置好碰撞瓦片后,我们可以添加Tilemap Collider组件到碰撞Tilemap,这样会根据精灵形状,为每个单独瓦片自动生成碰撞体。

为了实现更好的性能,我们也可以添加Composite Collider 2D组件,在Tilemap Collider组件勾选Used by Composite,这样会使所有单独碰撞体统一为一个大型形状。

添加道具

在关卡中添加道具很简单,我们可以手动将道具精灵放置在场景中的任意位置,也可以将道具附加到Tilemap网格中,使它们成为单独瓦片。视情况选择最适用的方法。

在本示例项目中,我们在关卡手动放置了一些树木。树木和角色的Order in Layer值相同,因此角色能动态地位于树后面和树前面。

我们可以通过使用碰撞体定义玩家通过树的位置,有多种方法能实现该效果:

  • 方法一:附加子碰撞体到对象上,根据需要修改形状。

  • 方法二:在精灵编辑器定义对象的Custom Physics Shape。

打开精灵编辑器时,选择对象的精灵,在检视窗口找到Sprite Editor按钮。在左上角下拉列表切换为Custom Physics Shape编辑器,我们可以在这里创建多边形来定义自定义碰撞体的边界。

定义物理形状后,我们可以把Polygon Collider组件附加给对象,它会使用其物理形状。

如果在Tilemap上把道具用作瓦片,我们也可以使用网格碰撞体。

选择对应着道具瓦片的瓦片资源,我们可以看到Collider Type的下拉设置,默认设为Sprite,这表示自动生成的碰撞体会使用前面提到的物理性质。

如果设为Grid,碰撞体总会正好符合物品所附加的网格单元的形状。虽然这不是实现碰撞体最精确的方法,但这样适用于特定游戏类型。

为了给这些瓦片使用网格碰撞体,请选择道具,添加Tilemap Collider组件。

使用规则瓦片

在自动处理瓦片绘制工作流程时,规则瓦片非常实用。规则瓦片和普通瓦片类似,但它带有平铺参数的列表,通过使用这些参数即规则,瓦片可以根据相邻瓦片,自动选取应该绘制的精灵。

如果希望避免手动选取旋转角度不同的瓦片,也可以使用规则瓦片,例如:在创建悬崖或平台的时候。规则瓦片也可以用于随机选取相同瓦片的不同变体,以避免出现明显的相同图案,甚至能实现动态瓦片效果。

等距规则瓦片和六边形规则瓦片功能可以从GitHub的Unity 2D Extras代码库获取,这里也有其它有关Tilemap功能的实用工具。

访问Unity 2D Extras代码库:

https://github.com/Unity-Technologies/2d-extras

我们在Isometric Starter Kit项目为每个瓦片集加入了预制规则瓦片,下面是项目包含的瓦片示例。

小结

现在你了解如何在Unity使用等距瓦片地图,请下载Isometric Starter Kit项目,去尝试使用,你也可以通过脚本交互Tilemap。

更多Unity精彩技术经验分享和谈论,尽在Unity Connect平台(Connect.unity.com)。

  • 快速学习制作类似《部落冲突》的等距游戏

  • 教程 |Unity中使用Tilemap快速创建2D游戏世界

  • 创建程序化的游戏世界(1)

  • 创建程序化的游戏世界(2)

  • 《莫塔之子》:如何使用程序化生成功能

  • 使用Unity程序化方法制作游戏动画

  • 3款创作游戏的五星工具资源包

  • 达哥课堂|使用Shader Graph制作飘动的巨龙

官方活动

直播预告|影视动画与游戏开发中的角色设计探讨

4月10日晚8点,Unity技术美术专家林翰为大家带来CG角色设计方面的知识分享。了解直播内容,请点击此处。

直播地址:

https://connect.unity.com/events/live_session_cg_character_design

Unite Shanghai 2019

5月10日-12日上海,Unite大会强势回归。技术门票正在热销中,购票即获指定Asset Store资源商店精品21款资源的5折优惠券。

  • 了解Training Day开发者训练营课程内容,请点击此处。

  • 了解部分技术演讲内容,请点击此处。

购票请访问:Unite2019.csdn.net

特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐
谈了18个小时!终于迎来结果,伊朗代表当场破防,全程咬牙没离场

谈了18个小时!终于迎来结果,伊朗代表当场破防,全程咬牙没离场

云上乌托邦
2026-06-22 15:37:30
7万人泪目支持!伊朗逼平世界第10:升到小组第1 33岁门神逆天7扑

7万人泪目支持!伊朗逼平世界第10:升到小组第1 33岁门神逆天7扑

风过乡
2026-06-22 05:52:51
全球最高梅西雕像落成,网友吐槽:“C罗看了都释怀”

全球最高梅西雕像落成,网友吐槽:“C罗看了都释怀”

观星赏月
2026-06-22 07:41:27
申裕斌说,有很多教练都在帮助我研究孙颖莎,可孙颖莎只有邱贻可一个教练

申裕斌说,有很多教练都在帮助我研究孙颖莎,可孙颖莎只有邱贻可一个教练

乒乓助手
2026-06-23 02:30:57
一根筋!总让她打满全场,第四局失误送了七分,为何赵勇不调整?

一根筋!总让她打满全场,第四局失误送了七分,为何赵勇不调整?

南海浪花
2026-06-22 09:38:15
2:0!世界杯狂欢:双响+破纪录,32强已定四席,卫冕冠军避开强敌

2:0!世界杯狂欢:双响+破纪录,32强已定四席,卫冕冠军避开强敌

杨仔述
2026-06-23 03:12:19
重磅雄文!郑丽文必将被两岸现实淘汰出局!

重磅雄文!郑丽文必将被两岸现实淘汰出局!

经点星娱
2026-06-22 14:27:48
台湾首批MQ-9B无人机抵台

台湾首批MQ-9B无人机抵台

不一定有用的频道
2026-06-22 14:10:03
全球狂押500亿赌世界杯!92%胜率踢出0比0,有人百万身家秒归零

全球狂押500亿赌世界杯!92%胜率踢出0比0,有人百万身家秒归零

刘哥谈体育
2026-06-22 05:31:34
600540,被证监会立案!

600540,被证监会立案!

中国基金报
2026-06-23 02:46:07
历史要毁于一旦?已经独立百年的蒙古,正把中国40年的努力毁掉!

历史要毁于一旦?已经独立百年的蒙古,正把中国40年的努力毁掉!

户外钓鱼哥阿旱
2026-06-21 15:19:53
42岁离异的我嫁初恋,洞房夜他的一个举动,我前半生受的罪全值了

42岁离异的我嫁初恋,洞房夜他的一个举动,我前半生受的罪全值了

千秋文化
2026-06-19 20:10:18
2-2爆冷!世界杯双冠王2轮0胜,小组难出线,阿根廷卫冕希望增加

2-2爆冷!世界杯双冠王2轮0胜,小组难出线,阿根廷卫冕希望增加

小火箭爱体育
2026-06-22 09:45:23
19岁百万粉丝网红钟美美被波士顿大学录取:学校是正规大学,不靠“钞能力”入学;其13岁模仿老师走红,童年曾遭父亲家暴,拒绝过百万签约

19岁百万粉丝网红钟美美被波士顿大学录取:学校是正规大学,不靠“钞能力”入学;其13岁模仿老师走红,童年曾遭父亲家暴,拒绝过百万签约

大象新闻
2026-06-22 22:45:03
32年工龄,中国邮政A类普通老员工,这是我6月份的工资总收入与明细

32年工龄,中国邮政A类普通老员工,这是我6月份的工资总收入与明细

新浪财经
2026-06-21 19:55:10
吃相难看啊!山东一女顾客在快餐店,把免费绿豆汤里的绿豆捞空了

吃相难看啊!山东一女顾客在快餐店,把免费绿豆汤里的绿豆捞空了

火山詩话
2026-06-20 17:47:00
中国退役战机被哄抢!俄媒:伊朗采购48架歼-10B,二手货成香饽饽

中国退役战机被哄抢!俄媒:伊朗采购48架歼-10B,二手货成香饽饽

李健政观察
2026-06-22 17:32:47
18岁森碟海边度假照走红,放弃娱乐圈专注网球成榜样

18岁森碟海边度假照走红,放弃娱乐圈专注网球成榜样

调侃国际观点
2026-06-22 14:08:53
57岁港星谭耀文击败多位内地顶流封视帝,当众致谢佘诗曼

57岁港星谭耀文击败多位内地顶流封视帝,当众致谢佘诗曼

TVB剧评社
2026-06-22 21:48:39
钱再多有什么用?50岁功成名就的撒贝宁,还是要为82岁父亲操碎心

钱再多有什么用?50岁功成名就的撒贝宁,还是要为82岁父亲操碎心

寒士之言本尊
2026-06-21 15:39:50
2026-06-23 03:59:00
Unity incentive-icons
Unity
Unity中国官方帐户
2482文章数 6733关注度
往期回顾 全部

科技要闻

马云与阿里巴巴众高管下田插秧

头条要闻

阿根廷2-0奥地利 卫冕冠军2连胜提前晋级32强

头条要闻

阿根廷2-0奥地利 卫冕冠军2连胜提前晋级32强

体育要闻

法国球星祝中国队下届世界杯取得好成绩

娱乐要闻

陪睡陪玩是皮毛,向佐揭内娱暗规则

财经要闻

前美联储主席格林斯潘去世 享年100岁

汽车要闻

华为智驾ADS限时优惠月底结束 7月1日前下订立省3000元

态度原创

时尚
数码
教育
旅游
本地

羞辱妈妈的烂梗,越来越歹毒了

数码要闻

消息称三星显示已获苹果量产认证,将为折叠屏iPhone独供OLED面板

教育要闻

首届直博清华学长重返母校,见证科高毕业生最美的青春模样

旅游要闻

“茶和天下”端午游园会在悉尼举行

本地新闻

吃一次广东龙舟饭,才懂什么是豪华盛宴

无障碍浏览 进入关怀版