微信号:Unity-GreaterChina

介绍:Unity官方开发者平台,分享最前沿的技术文章和开发经验,精彩的Unity活动和社区相关信息.

使用Tilemap创作等距2D环境

2019-04-08 12:12 Unity

随着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)。


 

推荐阅读


官方活动

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

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折优惠券。

购票请访问:Unite2019.csdn.net



点击“阅读原文”访问Unity Connect

 
Unity官方平台 更多文章 3款创作游戏的五星工具资源包 直播预告|影视动画与游戏开发中的角色设计探讨 达哥课堂|使用Shader Graph制作飘动的巨龙 Planet:使用Unity构建《David Bowie is》AR应用 Unite Shanghai 2019技术演讲部分内容曝光(二)
猜您喜欢 互联网+房产物业:社区服务盈利空间可达500亿! 完美圣诞攻略,程序猿和程序媛都有礼了~ Windows 下搭建 Hexo 博客并将其部署到 GitCafe 终极教程 丁磊走在薄冰上 吴小龙同學