Paper 2D 图块集/图块地图

此页面中的功能当前仍处于 实验阶段,因此可能不支持部分功能。

通过 Paper 2D 中的 图块集图块地图 可快速完成框架布局,或 2D 关卡的“整体布局”。结合图块地图(含明确高宽的图块的 2D 网格)创建并使用图块集(从纹理拉取的图块合集)后,即可选择诸多图块“绘制”到图块地图上,然后利用图块地图进行关卡布局。也可在多个层上进行图块绘制,并指定特定层中地图的每个单元格上出现的图块。

创建图块集

和其他资源相似,可在 内容浏览器 中创建图块集。它们既可作为空白资源从头创建,也可从其他现有资源中生成。

空白图块集

新建空白图块集资源的步骤:

  1. 点击 内容浏览器 中的 addNewButton.png 按钮,然后在 Miscellaneous 下选择 Tile Set

    TileSetButton.png

  2. 为新建的图块集资源命名。

    PaperTitleSet.png

  3. 双击 资源将其在 Tile Set Editor 窗口中打开。

    PaperTitleSetEditor.png

  4. Details 面板中指定一个 Tile Sheet 纹理资源进行使用。

    TileSetData.png

从纹理创建图块集

从现有纹理创建图块集:

  1. 内容浏览器右键单击 纹理资源,然后在 Sprite Actions 下选择 Create Tile Set

    RightClickMethod.png

  2. 将基于所提供的纹理自动完成图块集的创建和命名。

    AutoCreate.png

    点击资源并按下 F2,或 单击右键 选择 Rename 即可重命名资源。

  3. 双击 资源将其在 Tile Set Editor 窗口中打开。

    CreatedTitleSet.png

图块集编辑器

新建一个图块集资源后,双击 将其在 图块集编辑器 中打开。

TileSetEditorWindow.png

在上图的 视口 窗口(1)中可找到指定用于图块集的图块表单。图块编辑器(Tile Editor) 窗口(2)显示当前选中的图块。可在 Details 面板中进行诸多设置,对图块集或组成图块集的单个 Sprite 产生影响(查看下方的 配置图块集)。

配置图块集

对图块集进行配置很有必要,以便精确选择表单中的每个图块。

视口左键单击 图块表单将出现一个白色的图块选择框,显示当前选中的图块。

DefaultSettings.png

在视口中进行 鼠标右键 拖动可执行平移,使用 鼠标滚轮 可在图块表单上进行放大缩小。

上图中的白色选择框代表默认使用的 32 像素 图块宽度图块高度。然而我们使用的图块明显大于此默认值,因此需要使图块宽度和高度覆盖整个图块(图中黄色框所示)。

图块编辑器 预览窗口显示当前选中的图块及其相关的图块编号(下图所示)。在下方的 Details 面板中可调整 图块宽度图块高度,使其完全包含整个图块。

CurrentlySelectedTile.png

在此例中,我们将 图块宽度图块高度 增加到 64 像素,以匹配图块尺寸。

点击查看全图。

视口中,白色图块选择框和图块表单中单独的一个图块完全重合(可能需要根据图块表单的设置方式试验多个数值)。图块编辑器窗口也更新显示在图块表单中选中的单个图块。

除设置 图块宽度图块高度 外,还可在 Details 面板中通过以下设置对图块集进行更多设置。

设置

描述

Tile Width

单个图块的宽度(像素)。

Tile Height

单个图块的高度(像素)。

Margin

沿图块表单周长的填充量(像素)。

Spacing

图块表单中图块之间的填充量(像素)。

Drawing Offset

此集中图块的绘制偏移(像素)。

Background Color

图块集查看器中显示的背景颜色。

单个图块设置/应用图块碰撞

Details 面板中还可进行单个图块设置(如应用碰撞到特定的图块)。

对图块应用碰撞

  1. 在视口中选择图块(1),然后点击用于碰撞的外形(2)。

    Collision_1.png

  2. 外形将被应用,还可在 图块编辑器 窗口中进行更多编辑。

    Collision_2.png

    留意编辑中的图块编号(上图绿色框),需要通过它应用设置到这个特定的图块。

  3. Details 面板中的 Sprite 部分下找到选中的图块并改为所需的 几何体类型(Geometry Type)

    Collision_3.png

    如需了解关于 sprite 碰撞类型的内容,请查阅 Sprite 碰撞 文档。

这将基于指定的几何体类型和使用的外形设置图块的碰撞。为使碰撞在游戏中实际生效,创建 图块地图 时需要设置 Sprite 碰撞域(查阅以下图块地图的创建/使用信息)。

创建图块地图

图块地图在 内容浏览器 中进行创建,在 图块地图编辑器(Tile Map Editor) 中进行编辑。

新建图块地图

新建图块地图资源的步骤:

  1. 内容浏览器 中点击 addNewButton.png 按钮,然后在 Miscellaneous 下选择 Tile Map

    NewTileMap.png

  2. 为新建的图块地图资源命名。

    NewPaperTileMap.png

  3. 双击 资源将其在 图块地图编辑器 窗口中打开。

    TileMapEditorWindow.png

图块地图编辑器

打开一个新的图块地图资源后,在图块地图编辑器中开始工作之前需要指定一个 Active Tile Set 进行使用。

  1. 工具箱 窗口中点击 选择 框即可指定使用的 活动图块集(Active Tile Set)

    SelectTileSetWindow.png

    然后选择当前需要使用的图块集。

    SelectTileSet.png

    创建的所有图块集均会显示在上图窗口中,以便您切换使用“活动图块集”。

  2. 选中一个图块集后,查看器将更新选择。

    TileMapReadyToEdit.png

组成图块地图编辑器的三个窗口显示如下。

TileMapEditorOverview.png

在上图的 工具盒 窗口中(1),可在不同图块集之间切换使用,完成图块地图的创建。用于 绘制消除填充 地图上图块的工具也显示于此(此外还包括翻转或旋转当前选中图块的选项)。此窗口的底部包含查看器,它的导航操作与图块集查看器相同(鼠标右键 拖动平移,鼠标滚轮 放大缩小)。

中间的窗口为 视口(2),用于填充图块地图布局。使用工具箱中的工具可对地图上的图块进行填充,通过对组成图块地图的图块进行绘制、消除或填充实现所需的效果。您可在此处按照自己的思路对游戏中的地图进行“绘制”。

Details 面板中(3),可对图块地图的层数进行配置,并对诸多设置进行调整(如图块地图自身的高/宽、组成地图的图块高/宽、虚幻单位和像素之间的转换系数、使用的碰撞类型,等等)。

启用图块地图的碰撞

如图块集部分所述,指定哪些图块使用碰撞后,还需要设置图块地图使用的碰撞类型。可在 Details 面板下的 Collision 部分进行设置。

Collision_4.png

可对碰撞厚度(即为使用 3D 碰撞域时碰撞几何体的挤压厚度)以及碰撞域(决定图块地图是否应拥有碰撞几何体并参与到物理世界中)进行设置。

Use 2D Physics 选项当前仍在调试阶段,可能存在问题,建议使用 Use 3D Physics 选项。

在关卡中进行游戏时,可通过 Show Collision 控制台命令检查图块是否带有碰撞。

ShowCollision.png

上图中,角色行走的上层地面图块应用了碰撞,而下层地面图块和水波图块未应用碰撞。

图块地图工作流范例

以下是创建图块地图的典型工作流范例。

  1. 打开图块地图资源。

  2. Details 面板中设置图块地图的 Map WidthMap Height

    SetMapSize.png

    这即是地图或关卡的尺寸。

  3. 然后设置地图中单个图块的 Tile WidthTile Height

    TileSizesInMap.png

    它们通常是图块集中定义的相同尺寸。

  4. 指定 活跃图块集 进行使用,构建图块地图。

  5. 再添加一些额外的层(一层为背景、一层为前景、一层为可进行操作的关卡几何体)。

    ReadyToPaint.png

    这可根据您的需求任选,通常一层为背景元素、一层为前景元素、另外一层放置角色行走的关卡几何体(地面、盒子、平台等)。

  6. 在查看器中选中一个图块,然后在地图中 单击左键 将其绘制在地图上。

    BeginPainting.png

    在查看器中 单击左键 并在图块上拖动,可同时选择多个图块并在地图中将它们绘制。

    MultipleTiles.png

    之后即可在地图中使用选中的图块进行绘制。

    InMapMultipleTiles.png

  7. 继续在地图上绘制、填充或移除图块,达成预期的布局效果。

    ExampleMap.png

  8. 必须在 Details 面板的 Collision 部分启用碰撞。

    Collision_4.png

    必须在图块集中指定哪些图块带有碰撞,哪些图块不带碰撞。

  9. 将图块地图资源拖入关卡,根据需求进行缩放或移动。

    ExampleGameImage.png