Belajar Game Developer - UI & UX Game

#Pendahuluan

Semua sistem yang kita bangun di episode 3-7 — gerak, mekanik, skor — tidak akan terasa apa-apa tanpa lapisan yang langsung dilihat pemain: UI (User Interface). Dan UI yang baik tidak lahir dari sekadar menempatkan tombol dan label, melainkan dari UX (User Experience) — seberapa mudah pemain memahami dan menikmati permainan.

Episode ini membangun antarmuka Rimba Runner: HUD (skor, nyawa), menu (start, pause, game over), dan menggunakan UI toolkit dari tiga engine. Yang lebih penting, kita membahas prinsip UX game — feedback, affordance, readability — karena antarmuka yang membingungkan adalah alasan tercepat pemain menutup game.

#HUD: Informasi Tanpa Mengganggu

HUD (Heads-Up Display) menampilkan informasi penting selama bermain: skor, nyawa, waktu, atau amunisi. Prinsip utamanya: informasi cukup, tidak mengganggu. HUD yang penuh elemen justru merusak immersion dan menghalangi pandangan.

Untuk Rimba Runner, HUD minimal berisi skor dan nyawa. Di Godot, bangun scene UI dengan node CanvasLayer (agar tidak ikut bergerak dengan dunia) yang berisi HBoxContainer berisi dua label:

HUD (CanvasLayer)
└── HBoxContainer
    ├── ScoreLabel (Label: "Skor: 0")
    └── HealthLabel (Label: "Nyawa: 3")

Lalu hubungkan ke skor lewat signal (pola episode 4-6):

HUD terhubung ke skor

extends CanvasLayer
 
@onready var score_label: Label = $HBoxContainer/ScoreLabel
@onready var health_label: Label = $HBoxContainer/HealthLabel
 
func _ready() -> void:
    GameState.score_changed.connect(_on_score_changed)
    GameState.health_changed.connect(_on_health_changed)
 
func _on_score_changed(value: int) -> void:
    score_label.text = "Skor: %d" % value
 
func _on_health_changed(value: int) -> void:
    health_label.text = "Nyawa: %d" % value

Perhatikan pola arsitekturnya: HUD tidak menghitung skor, ia hanya mendengarkan perubahan. Data tinggal di GameState (singleton/autoload), HUD tinggal menampilkan. Ini menerapkan prinsip separation of concerns dari episode 6 ke lapisan UI.

#UI Toolkit di Tiga Engine

Setiap engine punya toolkit UI dengan konsep yang saling bersesuaian:

Prinsip bersama yang penting: layout container. Daripada menempatkan posisi absolut setiap elemen, gunakan container (HBox/VBox/Grid) agar UI otomatis rapi dan responsif terhadap ukuran layar. Inilah kenapa UI yang dibangun dengan container hampir tidak pernah "berantakan saat resolusi berubah", sedangkan posisi absolut sering patah di layar lebar atau kecil.

Contoh di Unity menggunakan RectTransform anchors: dengan set anchor skor ke kiri-atas dan tombol ke kanan-bawah, UI tetap di tempat yang benar berapa pun resolusi. Inilah praktik wajib untuk game yang dirilis lintas platform (bahas lengkapnya di episode 26).

#Menu dan Alur Screen

Menu bukan sekadar "layar pembuka" — ia adalah state machine visual (konsep episode 2 diterapkan ke UI). Alur standar game:

Setiap layar adalah scene/widget tersendiri, dan transisi terjadi lewat mekanisme scene engine (get_tree().change_scene_to_file di Godot, SceneManager.LoadScene di Unity, Open Level di Unreal). Contoh menangani pause di Godot — pause hanya jalan jika node ada di tree:

Pause menu

func _unhandled_input(event: InputEvent) -> void:
    if event.is_action_pressed("pause"):
        get_tree().paused = not get_tree().paused
        pause_menu.visible = get_tree().paused

Kunci yang sering dilupakan: node UI seperti tombol harus process_mode = PROCESS_MODE_WHEN_PAUSED agar tetap berfungsi saat game di-pause. Kalau tidak, tombol "Resume" ikut membeku — bug klasik yang membuat pemain harus me-restart game.

#Prinsip UX Game

UI yang bagus secara teknis belum tentu bagus secara pengalaman. Tiga prinsip UX yang wajib diterapkan:

• Feedback — setiap aksi pemain harus mendapat respons dalam sepersekian detik: tombol berubah warna saat ditekan, skor bertambah dengan animasi kecil, karakter berbunyi saat melompat. Tanpa feedback, pemain merasa game "mati".
• Affordance — elemen harus "mengajak" untuk digunakan: tombol terlihat bisa ditekan (ada bayangan, border, warna kontras), jalan yang bisa dilalui terlihat jelas dari latar. Pemain tidak boleh menebak-nebak.
• Readability — kontras dan ukuran teks memadai; HUD tidak menabrak area penting gameplay; font jelas pada semua ukuran layar. Uji di layar kecil dan jauh dari mata.

Contoh nyata untuk Rimba Runner: nyawa yang berkurang sebaiknya tidak hanya mengubah angka label — tambahkan flash merah dan getaran kecil. Ini feedback yang "terasa", bukan sekadar "terbaca". Episode 17 akan mendalami game feel yang berkaitan erat dengan prinsip ini.

#Penutup

UI dan UX adalah jembatan antara semua sistem game dan perasaan pemain.

Inti yang harus dibawa pulang:

• HUD menampilkan informasi penting tanpa mengganggu; jadikan tipis dan jelas.
• Gunakan container/layout engine, bukan posisi absolut, agar UI responsif.
• Menu adalah state machine: pisahkan tiap layar, dan atur process_mode untuk pause.
• Tiga prinsip UX: feedback, affordance, readability.
• UI yang bagus tidak lahir dari tool, tapi dari keputusan pengalaman.

Di episode 9 selanjutnya kita akan menambahkan dimensi emosional: audio game — sound design, integrasi musik, dan spatial audio, lengkap dengan praktik integrasi audio ke Rimba Runner. Sampai jumpa di episode 9!