教程：脚本课程 #4 — 让我们创建一个 UI

动作游戏制作器 官方教程
,
3

步骤 2：创建 HP 条

  1. 打开 gamescene 标签页并选择 UI。
    image
    image371×121 7.31 KB
  2. 添加一个新节点：ImageGauge。
    任何您希望始终可见且不受摄像机滚动影响的 UI 元素都应放置在 UI 下。
    image
    image902×351 12.8 KB
  3. 按如下方式配置 ImageGauge 属性：
    将 当前值 设置为 sampleplayer.hp，将 最大值 设置为 sampleplayer.max_hp。
    Object_Sampleplayer.tscn 位于 sampleobject 文件夹中。
    image
    image443×276 21.7 KB
  4. 接下来，配置 ImageGauge 内 TextureProgressBar 的属性。
    启用 九宫格拉伸，并将 左限制 和 右限制 设置为 10px。
    这允许在调整大小时不扭曲条的比例。
    image
    image431×245 13.8 KB
  5. 为 ImageGauge 设置纹理。
    使用来自 templates > objects > ui > interface > variation_02_Ornate 的图像：
  1. 调整 ImageGauge 的大小。
    蓝色边框区域是 UI 显示区域。根据需要缩放该条。
    image
    image1104×634 50.2 KB
  2. 测试游戏。
    如果设置正确，HP 将显示为白色条，并在被僵尸击中时减少。
  3. 现在让我们添加一个边框。
    在 ImageGauge 下添加一个新节点：NinePatchRect。
    此节点使用九宫格设置创建一个在拉伸时保持比例的矩形。
    image
    image750×238 8.94 KB
  4. 将 NinePatchRect 的纹理设置为 I_002_hp_horizontal_01.png，然后单击 Edit Region 按钮。
    image
    image451×270 10.3 KB
  5. 九宫格编辑器将打开。
    如图所示调整 黑白条（不是纯白线）。
    image
    image962×572 14.7 KB
  6. 调整大小并将其放置在 HP 条上方。
    image
    image819×264 29.6 KB
  7. HP 条完成！

注意事项

条类型
通过更改 ImageGauge 的 填充模式，您可以创建各种类型的条，包括垂直和圆形条。
您还可以使用 Tint 属性更改条的颜色。

关于九宫格
九宫格是一种将图像分为 9 个部分并按比例拉伸以避免扭曲的技术。
此方法也适用于消息窗口等元素。

:blue_book: 下一课程：第 5 部分

2 个赞