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

在本课程中,您将学习 Action Game Maker 脚本的基础知识。
在本系列的第四部分,我们将创建一个 HP 条 UI


前置要求

我们将继续使用之前教程(#1#3)中的项目。
打开您的项目,准备开始。

步骤 1:调整玩家

  1. 打开 Object_Sampleplayer
  2. 打开 BaseSettings,将 HPMax HP 都设置为 20,并将 Blink Duration 设置为 0.1 秒。这通过添加闪烁效果使无敌状态更容易被察觉。
  3. 接下来,添加一个新节点:TakenDamageSettings
  4. 虽然 TakenDamageSettings 允许许多配置,但这次我们仅用它来添加一个 伤害语音
    创建一个新的伤害设置,在 Other Settings 中启用 Play Sound,并将声音设置为 male_1_1_A
  5. 测试游戏。现在玩家受到伤害时会闪烁并播放语音。但是,玩家和僵尸会互相推挤,所以让我们修复这个问题。
  6. 选择 Player 节点,将其 Collision > Collision Layer1 改为 2
    层级定义了对象所属的物理层级,而掩码定义了它会与哪些层级发生碰撞。
    僵尸使用 层级 2 / 掩码 1,因此通过将玩家置于 层级 2,它们将不再互相碰撞。
    7.(CollisionLayer/CollisionMask 的详细说明请参阅单独的手册。)*
  7. 现在你拥有了一个具有 20 HP 的角色,在受到敌人 1 点伤害 后,会进入 1 秒的无敌状态

注意事项

使用 TakenDamageSettings 可以做什么
你可以根据攻击设置中定义的攻击属性来配置伤害倍率。这对于设置弱点和抗性非常有用。
你还可以配置击退停顿,例如在受到重击时让游戏暂时减速。

步骤 2:创建 HP 条

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

注意事项

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

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

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

2 个赞