上篇文章,我们把调色板做好了。这时候点击调色板的画笔工具(注意,不要在 Edit 模式下点击)然后将鼠标放到 Scene 面板上,可以看到图块可以被画到游戏界面上。可是很奇怪,好像画面上只能放置几个图块,然后感觉图块之间的间隔特别大。

这是因为我们导入这个图集(Atlas)的时候,设置的 Pixel Per Unit 是 100,所以代表一个方块有 100 × 100 个像素点。可是我们的图块实际上只有 16 × 16 个像素点。

在 Hierarchy 面板中,点击 Grid 然后在其 Inspector 面板中的 Cell Size 属性值里 x 和 y 分别写上 0.16(我们在设镜头设置那篇文章中有提到过)。这是因为图块定义 100PPU,可实际是 16PPU,所以 16 / 100 = 0.16。调整完之后,就可以顺利在界面上进行绘制了。

我们在 hierarchy 面板中创建的 floor 图层用于放置作为背景的图块(例如地板),我们还可以另外添加如 wall、accessories 图层。并且对某些图层设置碰撞体,使角色不能通过该碰撞体或者触发陷阱。

回到 Tile Palette 面板,我们选择黑色的图块(wall_0)然后点击画笔右侧的矩形工具。回到 Scene 界面,确保我们是看得到镜头的边界的(如上图)如果看不到,点击 Main Camera,然后在 Inspector 界面中展开 Camera 组件即可。

我们在镜头边界的右上五个开始,点击并拖曳鼠标到镜头右下五格,可以看到界面中出现一片深色区域。

我们选择浅色的图块,作为地板,然后绘制一个凸字形的区域。在游戏里,玩家可以在这个区域(浅色块)间自由行动。绘制完之后,因为玩家移动,镜头会跟随,所以玩家在走到边缘的时候可能会看到边上没有被黑色块覆盖的区域,这些区域将会被显示成蓝色(默认镜头背景色)造成出戏。

为了防止这事情发生,所以我们需要延长黑色块的大小。因为我们现在选的是地板块(浅色),我们可以点击 ctrl 键,然后点击黑色块来获取该图块。并且在需要增加图块的位置长按拖曳鼠标画上即可。成品如下:

地板绘制好之后,我们需要做一些装饰。所以我们在 Hierarchy 面板中的 Grid 右键点击它,然后选择 2D Object / Tilemap / Rectangle 创建新的 Tilemap 层,将其命名为 Design。这个层将作为装饰、不带有碰撞体。

和 Floor 一样,Design 的 Sorting Layer 也需要选择 Floor。然后发现 Floor 的 Order In Layer 为 0,这是该 Sorting Layer 下的排序,从 0 开始,0 最先被渲染,接着是 1……所以我们将 Design 的 Order In Layer 设置为 1。

在 Tile Palette 面板中,将 Active Tilemap 切换为 Design(也就是刚刚我们创建的 Game Object),接下来就可以在地图上绘制装饰物了。以下是几个快速操作手段:

  1. 按 B 键可以快速切换到笔刷工具
  2. 按 CTRL 键可以在地图上选取所需的图块
    1. 按 CTRL 键并长安选中拖曳鼠标可以选中多个图块
  3. 按 SHIFT 键可以删除不想要的图块
  4. 可以在 Tile Palette 长按鼠标并拖曳以批量选取一套(比如回复泉水由三个块组成,可以直接在调色盘上拖拽通知选中三个图块)

最后画出来的地图结果如下(我偷偷在 Tile Palette 中加了个带墙体的柱子):

阻挡物 Collider

我们在 Grid 的 Game Object 上右键,创建 2D Object / Tilemap / Rectangle 然后将其命名为 Collision,Sorting Layer 改为 Floor 而 Order In Layer 改为 5(确保他在所有图层之前)

我们用深色的块来涂,表示障碍物。这里可以通过 Scene 界面种 右下角的 Focus On 下拉框,选择 Tilemap,这样就能清楚的看到我们绘制的图块。绘制之后效果如下:

然后我们选中 Hierarchy 面板中的 Collision 物体,点击 Inspector 面板中的 Layer 下拉框,选择之前我们创建的 Blocking 图层。然后下方点击 Add Component 按钮添加 Tilemap Collider2D 组件。再来吧 Tilemap Renderer 左侧的勾取消掉,你就只会看到一个个绿色的方块,而不会看到当着视线的深色图块了。

我们把 Scene 面板中右下角 Focus On 切换为 None,以恢复正常视觉效果。

接下来我们测试游戏,可以发现玩家只能在我们规定的范围内移动了。但是仔细观察,角色似乎怎么走都在箱子前方,有点违和,我们也会在接下来的教学中修改这个 BUG。

那么本教学就到这里了,记得注册我们的官网账号和加入我们的 Discord 服务器,以获取更多游戏开发的资讯哦!