我的书签
添加书签
移除书签Heads up display
The final piece our game needs is a User Interface (UI) to display things like score, a “game over” message, and a restart button.
CanvasLayer node named HUD. “HUD” stands for “heads-up display”, an informational display that appears as an overlay on top of the game view.
CanvasLayer 节点可以让我们在游戏的其他部分的上一层绘制 UI 元素，这样它所显示的信息就不会被任何游戏元素（如玩家或敌人）所覆盖。
HUD 中需要显示以下信息：
ScoreTimer更改。Game Over或Get Ready！Start开始按钮来开始游戏。 Control 。要创建 UI，我们需使用 Control 下的两种节点：Label 和 Button。HUD的子节点：ScoreLabel的 Label。Message的 Label。StartButton的 Button。MessageTimer的 Timer。ScoreLabel并在属性检查器的Text字段中键入一个数字。Control节点的默认字体很小，不能很好地缩放。游戏素材包中有一个字体文件(Xolonium-Regular.ttf)。 要使用此字体，需要执行以下操作： 1. 1.ScoreLabel, you can click the down arrow next to the Font property and choose “Copy”, then “Paste” it in the same place on the other two Control nodes. Set “Custom Font Size” property of theScoreLabel. A setting of64works well. 注解 Anchors and Margins:Controlnodes have a position and size, but they also have anchors and margins. Anchors define the origin - the reference point for the edges of the node. Margins update automatically when you move or resize a control node. They represent the distance from the control node’s edges to its anchor. 按如下图所示排列节点。点击“布局”按钮以设置 Control 节点的布局： 你可以拖动节点以手动放置它们，或者要进行更精确的放置，请使用以下设置：ScoreLabel
- 布局：“顶部全幅”
- Text：
0 - Align：“Center”
Message
- 布局：“水平居中全幅”
- Text：
Dodge the Creeps! - Align：“Center”
- Autowrap：“启用”
StartButton
- Text：
Start - 布局：“底部居中”
Margin：
-200-100MessageTimer中，将Wait Time设置为2并将One Shot属性设置为“启用”。HUD： GDScript C# C++extends CanvasLayersignal start_game
public class HUD : CanvasLayer{ // Don't forget to rebuild the project so the editor knows about the new signal. [Signal] public delegate void StartGame();}
// Copy `player.gdns` to `hud.gdns` and replace `Player` with `HUD`.// Attach the `hud.gdns` file to the HUD node.// Create two files `hud.cpp` and `hud.hpp` next to `entry.cpp` in `src`.// This code goes in `hud.hpp`. We also define the methods we'll be using here.#ifndef HUD_H#define HUD_H#include <Button.hpp>#include <CanvasLayer.hpp>#include <Godot.hpp>#include <Label.hpp>#include <Timer.hpp>class HUD : public godot::CanvasLayer { GODOT_CLASS(HUD, godot::CanvasLayer) godot::Label *_score_label; godot::Label *_message_label; godot::Timer *_start_message_timer; godot::Timer *_get_ready_message_timer; godot::Button *_start_button; godot::Timer *_start_button_timer;public: void _init() {} void _ready(); void show_get_ready(); void show_game_over(); void update_score(const int score); void _on_StartButton_pressed(); void _on_StartMessageTimer_timeout(); void _on_GetReadyMessageTimer_timeout(); static void _register_methods();};#endif // HUD_H
start_game信号通知Main节点，按钮已经被按下。 GDScript C# C++func show_message(text): $Message.text = text $Message.show() $MessageTimer.start()
public void ShowMessage(string text){ var message = GetNode<Label>("Message"); message.Text = text; message.Show(); GetNode<Timer>("MessageTimer").Start();}
当想显示一条临时消息时，比如“Get Ready”，就会调用这个函数。 GDScript C# C++// This code goes in `hud.cpp`.#include "hud.hpp"void HUD::_ready() { _score_label = get_node<godot::Label>("ScoreLabel"); _message_label = get_node<godot::Label>("MessageLabel"); _start_message_timer = get_node<godot::Timer>("StartMessageTimer"); _get_ready_message_timer = get_node<godot::Timer>("GetReadyMessageTimer"); _start_button = get_node<godot::Button>("StartButton"); _start_button_timer = get_node<godot::Timer>("StartButtonTimer");}void HUD::_register_methods() { godot::register_method("_ready", &HUD::_ready); godot::register_method("show_get_ready", &HUD::show_get_ready); godot::register_method("show_game_over", &HUD::show_game_over); godot::register_method("update_score", &HUD::update_score); godot::register_method("_on_StartButton_pressed", &HUD::_on_StartButton_pressed); godot::register_method("_on_StartMessageTimer_timeout", &HUD::_on_StartMessageTimer_timeout); godot::register_method("_on_GetReadyMessageTimer_timeout", &HUD::_on_GetReadyMessageTimer_timeout); godot::register_signal<HUD>("start_game", godot::Dictionary());}
func show_game_over(): show_message("Game Over") # Wait until the MessageTimer has counted down. yield($MessageTimer, "timeout") $Message.text = "Dodge the\nCreeps!" $Message.show() # Make a one-shot timer and wait for it to finish. yield(get_tree().create_timer(1), "timeout") $StartButton.show()
async public void ShowGameOver(){ ShowMessage("Game Over"); var messageTimer = GetNode<Timer>("MessageTimer"); await ToSignal(messageTimer, "timeout"); var message = GetNode<Label>("Message"); message.Text = "Dodge the\nCreeps!"; message.Show(); await ToSignal(GetTree().CreateTimer(1), "timeout"); GetNode<Button>("StartButton").Show();}
当玩家死亡时调用这个函数。将显示“Game Over”2 秒，然后返回标题屏幕并显示“Start”按钮。 注解// This code goes in `hud.cpp`.// There is no `yield` in GDNative, so we need to have every// step be its own method that is called on timer timeout.void HUD::show_get_ready() { _message_label->set_text("Get Ready"); _message_label->show(); _get_ready_message_timer->start();}void HUD::show_game_over() { _message_label->set_text("Game Over"); _message_label->show(); _start_message_timer->start();}
get_tree().create_timer(2)函数替代使用Timer节点。这对于延迟非常有用，例如在上述代码中，在这里我们需要在显示“开始”按钮前等待片刻。 GDScript C# C++func update_score(score): $ScoreLabel.text = str(score)
public void UpdateScore(int score){ GetNode<Label>("ScoreLabel").Text = score.ToString();}
// This code goes in `hud.cpp`.void HUD::update_score(const int p_score) { _score_label->set_text(godot::Variant(p_score));}
Main调用。MessageTimer的timeout()信号和StartButton的pressed()信号并添加以下代码到新函数中： GDScript C# C++func _on_StartButton_pressed(): $StartButton.hide() emit_signal("start_game")func _on_MessageTimer_timeout(): $Message.hide()
public void OnStartButtonPressed(){ GetNode<Button>("StartButton").Hide(); EmitSignal("StartGame");}public void OnMessageTimerTimeout(){ GetNode<Label>("Message").Hide();}
// This code goes in `hud.cpp`.void HUD::_on_StartButton_pressed() { _start_button_timer->stop(); _start_button->hide(); emit_signal("start_game");}void HUD::_on_StartMessageTimer_timeout() { _message_label->set_text("Dodge the\nCreeps"); _message_label->show(); _start_button_timer->start();}void HUD::_on_GetReadyMessageTimer_timeout() { _message_label->hide();}
将 HUD 场景连接到 Main 场景
HUD场景，保存并返回Main场景。和Player场景的做法一样，在Main场景中实例化HUD场景。如果您没有错过任何东西，完整的场景树应该像这样：HUD功能与我们的Main脚本连接起来。这需要在Main场景中添加一些内容：new_game，将 HUD 的start_game信号连接到主节点的new_game()函数。观察绿色的连接图标现在是否在脚本中的func new_game()左边出现。new_game()函数中，更新分数显示并显示“Get Ready”消息： GDScript C# C++$HUD.update_score(score)$HUD.show_message("Get Ready")
var hud = GetNode<HUD>("HUD");hud.UpdateScore(Score);hud.ShowMessage("Get Ready!");
_hud->update_score(score);_hud->show_get_ready();
game_over()中我们需要调用相应的HUD函数： GDScript C# C++$HUD.show_game_over()
GetNode<HUD>("HUD").ShowGameOver();
_hud->show_game_over();
_on_ScoreTimer_timeout()以保持不断变化的分数的同步显示： GDScript C# C++$HUD.update_score(score)
GetNode<HUD>("HUD").UpdateScore(Score);
_hud->update_score(score);
Main.tscn。删除旧的小怪
所有小怪删除它自己的方法，为此可以使用“分组”功能。Mob场景中，选择根节点，然后单击检查器旁边的“节点”选项卡（在该位置可以找到节点的信号）。 点击“信号”旁边的“分组”，然后可以输入新的组名称，点击“添加”。new_game()function inMain: GDScript C# C++get_tree().call_group("mobs", "queue_free")
// Note that for calling Godot-provided methods with strings,// we have to use the original Godot snake_case name.GetTree().CallGroup("mobs", "queue_free");
get_tree()->call_group("mobs", "queue_free");
call_group()函数调用组中每个节点上的删除函数——让每个怪物删除其自身。 The game’s mostly done at this point. In the next and last part, we’ll polish it a bit by adding a background, looping music, and some keyboard shortcuts.
