Tampilan kepala

Bagian terakhir yang dibutuhkan permainan kita adalah Antarmuka Pengguna (UI) untuk menampilkan hal-hal seperti skor, pesan "permainan berakhir", dan tombol mulai ulang.

Buat adegan baru, klik tombol "Node Lain" dan tambahkan node CanvasLayer bernama HUD. "HUD" adalah singkatan dari "heads-up display", tampilan informasi yang muncul sebagai overlay di atas tampilan permainan.

Node CanvasLayer memungkinkan kita menggambar elemen UI pada lapisan di atas bagian permainan lainnya, sehingga informasi yang ditampilkan tidak tertutup oleh elemen permainan apa pun seperti pemain atau massa.

HUD perlu menampilkan informasi berikut:

• Skor, diubah oleh ScoreTimer.

• Pesan seperti "Game Over" atau "Get Ready!"

• Tombol "Mulai" untuk memulai permainan.

Node dasar untuk elemen UI adalah Control . Untuk membuat UI, kita akan menggunakan dua jenis node Control : Label dan Button .

Buat yang berikut sebagai anak dari HUDnode tersebut:

• Label bernamaScoreLabel.

• Label bernamaMessage.

• Tombol bernamaStartButton.

• Pengatur waktu bernamaMessageTimer.

Klik ScoreLabeldan ketik angka ke dalam Textkolom di Inspektur. Font default untuk Controlnode berukuran kecil dan tidak dapat diskalakan dengan baik. Ada berkas font yang disertakan dalam aset game yang disebut "Xolonium-Regular.ttf". Untuk menggunakan font ini, lakukan hal berikut:

Di bawah "Theme Overrides > Fonts", pilih "Load" dan pilih file "Xolonium-Regular.ttf".

Ukuran font masih terlalu kecil, tingkatkan ke 64bawah "Theme Overrides > Font Sizes". Setelah Anda melakukan ini dengan ScoreLabel, ulangi perubahan untuk node Messagedan StartButton.

Catatan

Jangkar: Control simpul memiliki posisi dan ukuran, tetapi mereka juga memiliki jangkar. Jangkar menentukan titik asal - titik referensi untuk tepi simpul.

Atur node seperti yang ditunjukkan di bawah ini. Anda dapat menyeret node untuk menempatkannya secara manual, atau untuk penempatan yang lebih tepat, gunakan "Anchor Presets".

Label Skor

1. Tambahkan teks 0.

2. Atur "Perataan Horizontal" dan "Perataan Vertikal" ke Center.

3. Pilih "Anchor Preset" .Center Top

Pesan

1. Tambahkan teks .Dodge the Creeps!

2. Atur "Perataan Horizontal" dan "Perataan Vertikal" ke Center.

3. Atur "Mode Bungkus Otomatis" ke Word, jika tidak, label akan tetap berada pada satu baris.

4. Di bawah "Kontrol - Tata Letak/Transformasi", atur "Ukuran X" untuk 480menggunakan seluruh lebar layar.

5. Pilih "Anchor Preset" Center.

Tombol Mulai

1. Tambahkan teks Start.

2. Pada "Kontrol - Tata Letak/Transformasi", atur "Ukuran X" ke 200dan "Ukuran Y" ke untuk 100 menambahkan sedikit bantalan antara batas dan teks.

3. Pilih "Anchor Preset" .Center Bottom

4. Di bawah "Kontrol - Tata Letak/Transformasi", atur "Posisi Y" ke 580.

Pada MessageTimer, atur ke dan atur properti ke "Aktif".Wait Time2One Shot

Sekarang tambahkan skrip ini ke HUD:

using Godot;

public partial class HUD : CanvasLayer
{
    // Don't forget to rebuild the project so the editor knows about the new signal.

    [Signal]
    public delegate void StartGameEventHandler();
}

Sekarang kita ingin menampilkan pesan sementara, seperti "Bersiap", jadi kita menambahkan kode berikut

public void ShowMessage(string text)
{
    var message = GetNode<Label>("Message");
    message.Text = text;
    message.Show();

    GetNode<Timer>("MessageTimer").Start();
}

Kita juga perlu memproses apa yang terjadi saat pemain kalah. Kode di bawah ini akan menampilkan "Game Over" selama 2 detik, lalu kembali ke layar judul dan, setelah jeda sebentar, menampilkan tombol "Start".

async public void ShowGameOver()
{
    ShowMessage("Game Over");

    var messageTimer = GetNode<Timer>("MessageTimer");
    await ToSignal(messageTimer, Timer.SignalName.Timeout);

    var message = GetNode<Label>("Message");
    message.Text = "Dodge the Creeps!";
    message.Show();

    await ToSignal(GetTree().CreateTimer(1.0), SceneTreeTimer.SignalName.Timeout);
    GetNode<Button>("StartButton").Show();
}

Fungsi ini dipanggil saat pemain kalah. Fungsi ini akan menampilkan "Game Over" selama 2 detik, lalu kembali ke layar judul dan, setelah jeda sebentar, menampilkan tombol "Start".

Catatan

Bila Anda perlu berhenti sebentar, alternatif untuk menggunakan simpul Timer adalah dengan menggunakan create_timer()fungsi SceneTree. Ini dapat sangat berguna untuk menambahkan penundaan seperti pada kode di atas, di mana kita ingin menunggu beberapa saat sebelum menampilkan tombol "Start".

Tambahkan kode di bawah ini untuk HUDmemperbarui skor

public void UpdateScore(int score)
{
    GetNode<Label>("ScoreLabel").Text = score.ToString();
}

Hubungkan pressed()sinyal dari StartButtondan timeout() sinyal dari MessageTimerke HUDnode, dan tambahkan kode berikut ke fungsi baru:

// We also specified this function name in PascalCase in the editor's connection window.
private void OnStartButtonPressed()
{
    GetNode<Button>("StartButton").Hide();
    EmitSignal(SignalName.StartGame);
}

// We also specified this function name in PascalCase in the editor's connection window.
private void OnMessageTimerTimeout()
{
    GetNode<Label>("Message").Hide();
}

Menghubungkan HUD ke Utama

Sekarang setelah kita selesai membuat HUDadegan, kembali ke Main. Buat instance HUDadegan Mainseperti yang Anda lakukan pada Playeradegan. Pohon adegan akan terlihat seperti ini, jadi pastikan Anda tidak melewatkan apa pun:

Sekarang kita perlu menghubungkan HUDfungsionalitas ke skrip kita Main. Ini memerlukan beberapa tambahan pada Mainadegan:

Pada tab Node, hubungkan sinyal HUD start_gameke new_game() fungsi node Utama dengan mengeklik tombol "Pick" di jendela "Connect a Signal" dan memilih new_game()metode atau ketik "new_game" di bawah "Receiver Method" di jendela tersebut. Pastikan ikon koneksi hijau sekarang muncul di samping skrip.func new_game()

Di new_game(), perbarui tampilan skor dan tampilkan pesan "Bersiap":

var hud = GetNode<HUD>("HUD");
hud.UpdateScore(_score);
hud.ShowMessage("Get Ready!");

Kita game_over()perlu memanggil HUDfungsi yang sesuai:

GetNode<HUD>("HUD").ShowGameOver();

Terakhir, tambahkan ini untuk _on_score_timer_timeout()menjaga tampilan tetap sinkron dengan perubahan skor:

GetNode<HUD>("HUD").UpdateScore(_score);

Peringatan

Ingatlah untuk menghapus panggilan ke new_game()jika _ready()Anda belum melakukannya, jika tidak, permainan Anda akan mulai secara otomatis.

Sekarang Anda siap untuk bermain! Klik tombol "Mainkan Proyek".

Menghapus creep lama

Jika Anda bermain hingga "Game Over" dan kemudian langsung memulai permainan baru, creep dari permainan sebelumnya mungkin masih ada di layar. Akan lebih baik jika semuanya menghilang di awal permainan baru. Kita hanya perlu cara untuk memberi tahu semua monster agar menyingkir. Kita dapat melakukannya dengan fitur "grup".

Di dalam Mobscene, pilih simpul akar dan klik tab "Simpul" di sebelah Inspektur (tempat yang sama tempat Anda menemukan sinyal simpul). Di sebelah "Sinyal", klik "Grup" untuk membuka ikhtisar grup dan tombol "+" untuk membuka dialog "Buat Grup Baru".

Beri nama grup mobsdan klik "ok" untuk menambahkan grup adegan baru.

Sekarang semua massa akan berada dalam grup "massa".

Kita kemudian dapat menambahkan baris berikut ke new_game()fungsi di Main:

// Note that for calling Godot-provided methods with strings,
// we have to use the original Godot snake_case name.
GetTree().CallGroup("mobs", Node.MethodName.QueueFree);

Fungsi tersebut call_group()memanggil fungsi bernama pada setiap node dalam suatu grup - dalam kasus ini kita memberi tahu setiap massa untuk menghapus dirinya sendiri.

Permainan ini sebagian besar sudah selesai pada tahap ini. Pada bagian berikutnya dan terakhir, kita akan sedikit menyempurnakannya dengan menambahkan latar belakang, musik berulang, dan beberapa pintasan keyboard.