添加HUD界面元素
beginner
在本教程中,你将学习如何在HUD界面上添加自定义元素。
概述
HUD界面是游戏中持续显示的核心信息面板。很多时候你可能需要在这个界面上添加新元素,比如:完成特定事件后弹出的提示文字、显示玩家体力值的耐力条、展示移动速度的速度计等等!
要将创建的元素添加到HUD界面,你需要使用modification参数向root_panel(根面板)添加新的control(控件元素)。根面板是一个容器型元素,HUD界面上显示的所有元素几乎都包含在其中。
独立元素添加
以下代码创建了一个在屏幕顶部显示黑色方块的图片元素,一个在屏幕右上角显示"hud text"文字的标签元素,并通过修改root_panel将这些元素添加到HUD界面。
RP/ui/hud_screen.json
json
"hud_square": {
"type": "image",
"texture": "textures/ui/Black", // 原版纹理
"anchor_from": "top_middle",
"anchor_to": "top_middle",
"size": [ 64, 64 ],
"offset": [ 0, 4 ]
},
"hud_text": {
"type": "label",
"text": "hud text",
"anchor_from": "top_right",
"anchor_to": "top_right",
"offset": [ -4, 4 ]
},
"root_panel": {
"modifications": [
{
"array_name": "controls",
"operation": "insert_front",
"value": [
{ "hud_square@hud.hud_square": {} },
{ "hud_text@hud.hud_text": {} }
]
}
]
},所有添加到HUD界面的元素都列在根面板modifications的value部分。如果添加的元素存在于其他命名空间,可以修改元素中指定的命名空间(如@hud.hud_square)。例如,如果hud_square元素是在scoreboard命名空间下的scoreboards.json UI页面中创建的,那么在添加到根面板时应使用@scoreboard.hud_square。
组合元素添加
出于组织管理的考虑,通常不建议将大量元素单独添加到根面板。以下代码将之前定义的hud_square和hud_text元素(未显示)包裹在一个名为hud_elements_panel的面板元素中,然后将该面板元素添加到HUD的根面板。最终效果与独立元素添加方式相同。
RP/ui/hud_screen.json
json
"hud_elements_panel": {
"type": "panel",
"controls": [
{ "hud_square@hud_square": {} },
{ "hud_text@hud_text": {} }
]
},
"root_panel": {
"modifications": [
{
"array_name": "controls",
"operation": "insert_front",
"value": [
{ "hud_elements_panel@hud.hud_elements_panel": {} }
]
}
]
},hud_elements_panel没有直接定义尺寸参数,这样它将继承父元素(root_panel)的尺寸。这使得子元素的锚点定位、百分比尺寸等可以相对于HUD界面正常工作。

