UI game, digerakkan oleh satu resource

Seperti apa tampilannya di dalam game

Preset abad pertengahan dan sci-fi — lembar karakter, inventaris, dan misi; formulir, grid, dan kartu ajakan; panel bersudut dan kontrol sentuh. Mengganti preset cukup satu baris kode.

Keenam preset dan cara menggantinya →

Apa yang tidak perlu lagi Anda urus

Yang paling menyita waktu di UI game bukanlah bentuk sebuah tombol — melainkan segala hal yang berbeda-beda antarperangkat. gohud mengurus perbedaan itu di satu tempat.

Ubah tampilan — warna dan bentuk

Sebuah Theme hanya bisa mengubah gaya apa yang digambar mesin. Sudut membulat adalah satu-satunya sudut yang dimiliki StyleBoxFlat, sedangkan joystick, slot cepat, dan coach mark digambar oleh kode — jadi tema saja tidak akan pernah bisa mengubah bentuknya. Karena itu gohud menyediakan preset: tema, skin, dan set ikon yang dipilih sebagai satu paket.

GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)   # tema, skin, dan ikon sekaligus

Keempatnya adalah layar galeri yang sama. Tidak ada satu baris kode pun yang berbeda — hanya nama presetnya. Sudut tombol, bentuk sakelar, baris daftar, dan garis tepi kolom masukan semuanya berubah bersamaan.

Koleksi abad pertengahan

medieval_dark memadukan besi dan kulit dengan emas antik; medieval_light memakai perkamen dan tinta. Bingkai menu membawa paku keling dan ornamen sudut kecil, sementara HUD yang selalu terlihat tetap tenang; 16 ikon ukiran menggambar ulang nama-nama benda, dan hanya judul serta subjudul yang memakai font Cinzel bawaan.

Kedua tangkapan layar itu adalah examples/medieval/medieval.tscn, dibangun dari widget standar. Panduan abad pertengahan dan cara membuat kerajaan Anda sendiri →

Layar yang sama di ponsel dan di desktop

Tangkapan layar galeri itu ponsel dalam mode potret. Di bawah ini kode yang sama pada 1280×800 — kontennya berhenti pada lebar yang nyaman dibaca (480dp) lalu memusat, sementara HUD tetap di sudut-sudut. Formulirnya memutari bagian HUD yang mengambang, tetapi tidak bergeser bila memang sudah tidak bertabrakan: memaksanya bergeser justru akan melempar konten keluar dari pusat pada layar lebar.

Lembar yang sama, tampilan yang berbeda

Pilih salah satu dari Project Settings → gohud → Theme → Preset, atau setel GoConfig.preset. Mengisi theme, skin, atau icons secara eksplisit mengalahkan preset, sehingga Anda bisa memakai sebuah preset dan menimpa salah satunya saja.

Skin — tempat yang tak terjangkau Theme

Sebuah skin memiliki joystick, muka slot cepat, cincin coach mark, chip, kerangka pemuatan, peringatan, pemisah, dan judul bagian. Turunkan kelasnya dan timpa hanya apa yang ingin Anda ubah.

class_name MySkin extends GoSkin

func slot_box(accent: Color, lit: bool) -> StyleBox:
    var box := GoStyleBoxCut.new()
    box.bg_color = accent
    box.cut = 6.0
    box.edge_color = accent
    return box

Ketiganya tersimpan ke dalam resource Theme — dan itulah yang membuat sebuah tema bisa mengubah bentuk, bukan hanya warna. GoSkinSciFi dan GoSkinMedieval adalah subkelas bawaan.

Widget

Seluruh bagiannya dalam satu tabel. Rinciannya satu per satu →

Menunggu, memberi tahu, menghitung

Formulir dan daftar

Bentuk-bentuk yang benar-benar dipakai game

Di atas layar

Keterbacaan itu diukur, bukan dikira-kira

"Cantik" itu selera; "terbaca" itu bisa diukur. Teks abu-abu samar terlihat baik-baik saja di monitor bagus dan lenyap di ponsel saat siang bolong — memilih dengan mata telanjang menjamin hal itu cepat atau lambat terjadi.

python3 addons/gohud/tools/check_contrast.py

Setiap pasangan warna dan setiap label keadaan tombol di atas panel tempatnya berada diukur terhadap WCAG, pada keenam tema. Warna tembus pandang lebih dulu dikomposit di atas latar sesungguhnya — mengukurnya secara langsung akan melaporkan rasio yang lebih baik daripada yang tampak di layar.

Karena itu warna teks diturunkan, bukan dipilih: pembangun tema mengambil entri palet sebagai titik berangkat lalu mendorong terangnya sampai melewati ambang batas pada setiap permukaan yang mungkin ditempatinya. Ubah paletnya dan kontrasnya ikut menyesuaikan. Aturannya dan jebakan di baliknya →