Godot HEART CONTAINERS: 3 WAYS（心形容器：3种方法）

Problem

You need to display a heart container bar (or other icon-based bar).
你需要显示一个心形容器栏（或其他基于图标的栏）。

Solution

A common way of displaying the player’s health is via a series of icons (typically hearts) that disappear as the player takes damage.
一种常见的显示玩家生命值的方式是通过一系列图标（通常是心形），当玩家受到伤害时，这些图标会消失。

In this recipe, we’re going to explore three ways of displaying this information, which I’m labeling “simple”, “empty”, and “partial”:
在这个食谱中，我们将探索三种显示这些信息的方式，我将它们标记为 “简单”、"空 "和 “部分”。

This image shows what the bar displays when the player has 3 health.
该图像显示了玩家有3条生命值时bar显示的方式。

• simple: Only the hearts are displayed.
• 简单的：只显示心形。
• empty: Empty heart containers are displayed.
• 空的：显示空心容器。
• partial: The player can have partially filled containers.
• 部分：玩家可以拥有部分装满的容器。

Setting up the bar

The heart images I’m using are 53x45. You can get them here:
我使用的心脏图像是53x45。你可以在这里得到它们。

Kenney.nl: Platformer Art Deluxe

Ideally, your heart bar will be easy to drop into your overall HUD/UI. It therefore makes sense to make it a separate scene. We’ll start with an HBoxContainer which will keep things aligned. Set the Custom Constants/Separation to 5.
理想情况下，您的心形条很容易放入您的整体HUD / UI中。 因此，使其成为一个单独的场景是有意义的。 我们将从一个HBoxContainer开始，它将保持一致。 将自定义常量/分隔设置为5。

Add a TextureRect child. Drag your heart texture into the Texture property and set the Stretch Mode to “Keep”. Name the node “1” and then press “Ctrl-D” to duplicate the node for as many hearts as you need (5 in this example). Your node setup should look like this:
添加一个TextureRect子节点。将你的心形纹理拖入Texture属性，并将拉伸模式设置为 “保持”。将节点命名为 “1”，然后按 "Ctrl-D "键，根据你需要的心形复制节点（本例中为5个）。你的节点设置应该是这样的。

Adding a script

The script below will cover all three bar configurations for flexibility. If you only need one in your game, you can remove the code relating to the other modes.
下面的脚本将涵盖所有三种条配置，以提高灵活性。如果你在游戏中只需要一个，你可以删除与其他模式相关的代码。

To begin, we’re going to load the textures we need and define our three bar modes:
首先，我们要加载我们需要的纹理，并定义我们的三种条形模式。

extends HBoxContainerenum MODES {simple, empty, partial}var heart_full = preload("res://assets/hud_heartFull.png")
var heart_empty = preload("res://assets/hud_heartEmpty.png")
var heart_half = preload("res://assets/hud_heartHalf.png")export (MODES) var mode = MODES.simplefunc update_health(value):match mode:MODES.simple:update_simple(value)MODES.empty:update_empty(value)MODES.partial:update_partial(value)

Calling update_health() on the bar will cause it to display the passed value, based on the selected mode.
根据所选模式，在bar上调用update_health()将使其显示传递的值。

We’re not going to do any bounds checking on the value input. There are many ways you may have health implemented in your game, and so that’s left to you.
我们不会对输入的值进行任何界限检查。在你的游戏中，你可能会有很多方法来实现生命值，所以这就交给你了。

First, the update_simple() method. Here, we loop through the heart containers and set the visibility of each TextureRect:
首先，是update_simple()方法。 在这里，我们遍历心形容器并设置每个TextureRect的可见性：

func update_simple(value):for i in get_child_count():get_child(i).visible = value > i

update_empty() is very similar, except instead of hiding the icon, we change its texture to the empty container:
update empty()与之非常相似，只是我们不是隐藏图标，而是将其纹理更改为空容器

func update_empty(value):for i in get_child_count():if value > i:get_child(i).texture = heart_fullelse:get_child(i).texture = heart_empty

Finally, for the partially filled containers, we have a third texture and twice the number of possible values:
最后，对于部分填充的容器，我们有三种纹理和一个心形表示两条命。

func update_partial(value):for i in get_child_count():if value > i * 2 + 1:get_child(i).texture = heart_fullelif value > i * 2:get_child(i).texture = heart_halfelse:get_child(i).texture = heart_empty

Here’s an example using each of the bar modes:
下面是一个使用每种bar模式的例子。

Wrapping up

Use this heart bar setup as a basis for your own HUD. This technique can be expanded to support a wide variety of information displays.
使用这个心条设置作为你自己的HUD的基础。这种技术可以扩展到支持各种各样的信息显示。

Download the project file here: heart_bars.zip
在这里下载项目文件：heart_bars.zip