第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层

5.1 新建正交(正常)地图:

从菜单栏 文件 - 新建 - 创建新地图

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_游戏开发

选择正常、CSV、右下、宽高10块,图块大小宽高32像素:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_游戏开发_02

出现如下界面,完成了地图新建:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_游戏开发_03

5.2 新建图块集

点击 新建图块集,在弹出来的新图块集窗口中,选择Tiled安装目录下的example中的tmw_desert_spacing.png,勾选嵌入地图,边距间距设置为1像素。具体每个属性的解释在上一章节中。

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_04

完成导入图图块集后界面如下:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_游戏开发_05


5.3绘制地图

工具栏的工具分为图块层工具、对象层工具、工具扩展。

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_06

5.3.1 图块层工具

5.3.1.1 图章刷

图章刷工具(Stamp Brush Tool)是 Tiled 中用于编辑图块层的主要工具之一。它的作用主要包括:

高效绘制:允许用户快速在地图上绘制和复制图块区域,这对于填充大面积或重复使用特定图块模式非常有用。

图块绘制:用户可以选择一个或多个图块,并将它们 “estamp” 到地图的特定位置上。

图块复制:用户可以复制地图上的现有图块区域,并将其粘贴到其他位置,这有助于保持地图的一致性和节省时间。

绘制与复制:点击要画上去的图块,点击图章刷工具,在地图左击则画一块,在地图的某个图块上鼠标右击则复制这个图块。

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_07

绘制形状:除了绘制单个图块,图章刷工具还支持绘制线条和圆形,这使得创建更复杂的图形和设计成为可能。

画线条:

选择图块,在地图上,按住shift按键,鼠标左键拖动画直线:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_08

画圆:

选择图块,在地图上,按住ctrl + shift按键,从圆心拉出直径,然后横向拉出圆圈:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_游戏开发_09

通过使用图章刷工具,用户可以更加高效地构建和细化游戏关卡的视觉效果。

一次绘画多个图块:

在图块集上拖动鼠标框选多个图块,可以在地图上绘画多图块:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_10


5.3.1.2 图章刷+工具扩展

图章刷+随机

点击了图章刷以后,再按下色子按键,框选多个图块,则绘画的时候,将随机选择框选的某个图块,对地图进行绘制。

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_11

图章刷+旋转

点击了图章刷以后,按下旋转按键,四个旋转按键将会把选择的图块进行相应的变形,从左右到变化如下图:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_游戏开发_12

5.3.1.3 地形刷

地形的相关知识将在下个章节涉及,这里先介绍地形刷的作用和基本使用方式。

地形刷工具(Terrain Brush Tool)是一个自动化工具,用于在地图上自动应用地形过渡。这个工具可以根据预设的地形规则来替换或修改图块,以创建更加自然和连贯的地形效果。以下是使用地形刷工具的基本步骤:

定义地形规则:在使用地形刷工具之前,需要定义地形规则。这通常涉及到创建一个地形集(Terrain Set),其中包含了不同地形类型以及它们之间的过渡规则。地形规则定义了当两种或多种地形相遇时,应该使用哪些图块来表示过渡。

激活地形刷工具:在 Tiled 的工具栏中,选择地形刷工具。这个工具通常由一个带有地形图标的按钮表示。

选择地形集:在地图上选择一个图块层,然后从图块集中选择一个地形集。确保你的图块层已经与地形集关联。

设置地形类型:在工具选项中,选择你想要绘制的初始地形类型。地形刷工具将使用这个类型作为起点来绘制和应用过渡规则。

绘制地形:在地图上点击并拖动鼠标,地形刷工具会根据你定义的地形规则自动绘制地形过渡。随着你在地图上移动鼠标,工具会实时更新地形,使得地形之间的转换看起来更加自然。

调整过渡:如果需要,你可以调整过渡的柔和程度或者修改地形规则,以达到理想的视觉效果。


地形刷工具是一个强大的功能,它可以大大简化地图制作过程中的手动工作,尤其是在创建大型和复杂地形时。正确使用地形刷工具可以提高工作效率,并确保地图中的地形过渡平滑且符合设计的风格。

5.3.1.4 填充工具

同图块填充:

选择图块A,点击填充工具,在地图上点击图块B,将会把你点击的这个图块B相临接的同样是B的图块变成A.

全部填充:

选择图块,在地图上按住shift填充,将把整个地图填充。

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_游戏开发_13

5.3.1.5 填充工具+工具扩展

框选一些图块,选择填充工具,点选随机色子按键,将会把填充的内容随机按照框选的图块组合生成:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_14

5.3.1.6 填充形状工具

选择想要绘制的图块,点击填充形状工具,在地图拖拽画出矩形,这个矩形将被选择的图块填充。

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_15

5.3.1.7 填充形状工具+工具扩展

选择框选一些想要绘制的图块,点击填充形状工具,点击随机色子按键,在地图拖拽画出矩形,这个矩形将被选择的图块们随机填充。

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_16

5.3.1.8橡皮擦

左击删除,右击拉框批量删除。

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_游戏开发_17

5.3.1.9 矩形选框

矩形选框可以选出形状不规则的选取,通过:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_18

工具扩展进行形状的组合:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_19

在选择了选取以后,就可以通过图章刷、填充工具、填充形状工具进行组合操作,这些工具将把选取作为可以编辑的全局,非选取不会被操作。

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_20

5.3.1.10 魔法棒

这个工具点击地图,将选择一个选取,这个选取是以点击的图块为中心,与该图块相邻的所有图形与该图块一样的图块。适合一次选中一块同样的图块。

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_游戏开发_21

5.3.1.11 选择同个图块

点选 选择同个图块案件,在地图上选择某个图块,会发现地图上所有相同的图块都被选中,相当于建立了一个选区。此时可以辅助其他工作,例如填充工具,在图块集上选择另一个图块,点选shift按键,即可将选区所有图块都变成新选择的图块。

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_22

5.3.2 用图块层工具在多个图层绘制

多个图块层的作用是完成地图元素的遮挡,显得更为真实。例如河流是最底层,往上一层是地面,再往上一层是石头,再往上一层是植物 建筑。上层元素会遮挡下层元素。

为了演示遮挡关系,这里用一个例子解释,选用另一个tileset来演示,上面例子的图块集没有透明背景,因此不好演示。

5.3.2.1 新建地图

这次我们选择Tiled安装目录中的example中的buch-outdoor.png这个作为tileset,检查这个buch-outdoor.png发现其是一个16*16的图块集,并且间距边距应该都是0,所以要新建一个地图。如下:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_23

新建完成进入如下界面:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_24

5.3.2.1 新建图块集

选择新建图块集,在弹出的新图块集界面,选择example中的buch-outdoor.png,设置块高宽为16像素,边距间距0像素。

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_游戏开发_25

建立完成进入如下界面:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_26

5.3.2.2绘制底层沼泽

选择填充工具,将这个图层都填充成蓝色沼泽,并将图层的名字从图块层1命名为沼泽。

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_游戏开发_27

5.3.2.3 绘制草地

新建图层,命名为草地,将草地图层置于沼泽图层上方。

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_游戏开发_28

在草地层绘制:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_29

5.3.2.4 绘制物品层

新建一个物品层:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_30

绘制物品:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_游戏开发_31

####5.3.2.5 绘制植物

新建一个植物层:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_图块层_32

绘制植物:

第五章 游戏开发Tiled篇-Tiled正常方向(Orthogonal)地图编辑——绘制图块层_游戏开发_33

可以看到树木和箱子有遮挡关系。

5.4 总结

以上就是图块层的绘画基本操作。本文围绕游戏开发中 Tiled 的正常方向地图编辑展开,首先介绍了新建正交地图和图块集的方法,接着详细阐述了绘制地图的各类图块层工具,包括图章刷、地形刷、填充工具等及其工具扩展的功能和使用方式,最后通过示例展示了用图块层工具在多个图层绘制以实现元素遮挡、使画面更真实的过程。

下面将进入地形章节。