Unity | 渡鸦避难所-9 | 角色名字及血条等信息

1 效果预览

游戏中角色的名字和血条是非常重要的元素，它们可以帮助玩家了解角色的身份和状态。在 Unity 中，可以使用 UGUI 来实现这些功能

2 实现方案

1 画布 (Canvas)

画布 (Canvas) 组件表示进行 UI 布局和渲染的抽象空间。所有 UI 元素都必须是附加了画布组件的游戏对象的子对象。从菜单 (GameObject > Create UI) 创建 UI 元素对象时，如果场景中没有画布 (Canvas) 对象，则会自动创建该对象。更多信息请参阅文档https://docs.unity3d.com/cn/current/Manual/class-Canvas.html

1 Render Mode

UI 在屏幕上或作为 3D 空间对象进行渲染的方式。提供的选项包括 Screen Space - Overlay、Screen Space - Camera 和 World Space

World Space 模式将 UI 视为场景中的平面对象进行渲染。但是，与 Screen Space - Camera 模式不同，该平面不需要面对摄像机，可以根据喜好任意定向。画布的大小可以使用矩形变换来设置，但画布在屏幕上的大小将取决于摄像机的视角和距离。其他场景对象可以位于画布后面、穿透画布或位于画布前面

游戏中角色的名字和血条随着角色移动，具有近大远小的效果，且可以和场景中的其他物体产生遮挡关系，因此这里选择 World Space

2 名字（TextMeshPro）

TextMeshPro 是 Unity 的最终文本解决方案。它是 Unity UI Text 和旧版 Text Mesh 的完美替代方案

功能强大且易于使用的 TextMeshPro（也称为 TMP）使用高级文本渲染技巧以及一组自定义着色器；它大幅改进了视觉质量，同时为用户创建文本样式和纹理提供了难以置信的灵活度

TextMeshPro 能够更好地控制文本格式和布局，提供了字符、单词、行和段落间距调整、字距调整、文本对齐、链接、超过 30 种富文本标签、多种字体和精灵支持、自定义样式等功能

强大的性能。由于 TextMeshPro 创建的几何体与 Unity 的文本组件一样，每个字符都使用两个三角形，因此这种改进的视觉质量和灵活性不会带来任何性能成本的损失

在 Hierarchy 中目标对象右键 UI > Text - TextMeshPro，在 Inspector 中调整文本的位置、对齐方式等，

角色名字不需要点击事件，为了节约性能，点击 Extra Settings，取消 Raycast Target 的勾选

为了让 TextMeshPro 组件自适应文本内容的尺寸，需要添加 Content Size Fitter 组件，宽高适配均选择为 Preferred Size。关于该组件更多信息，请参阅文档：https://docs.unity3d.com/cn/current/Manual/script-ContentSizeFitter.html

3 血条（Image）

血条的显示需要两张图片，黑色做背景，上面叠加当前血量。角色在受伤或者治疗时，血条跟随血量变化更改尺寸

资源有限，这里仅通过更改 Image 组件的颜色来实现该功能。更多关于 Image 组件的信息，请参阅文档：https://docs.unity3d.com/cn/current/Manual/script-Image.html

在 Hierarchy 中目标对象右键 UI > Image，在 Inspector 中调整图片的锚点、位置、尺寸、颜色等。血条也不需要点击事件，同样取消 Raycast Target 的勾选

如果使用图片的话，可以更改 Image Type 为 Filled，Fill Method 设置为 Horizontal，Fill Origin 设置为 Left。通过脚本改变 Fill Amount 属性，血条的宽度就会从左侧开始改变

Source Image 为空的话，只能通过更改 Anchors，让 Image 组件在改变宽度时，保持左侧位置不变

更过脚本更改 Image 宽度：

public void UpdateHp(int hp)
{
    float width = hp / _totalHp * 1.2f;
    hpBar.sizeDelta = new Vector2(width, hpBar.sizeDelta.y);
}