gohud — kit HUD & UI untuk Godot 4

Baru: arcade, komik, Material 3, dan tampilan untuk anak-anak

Empat keluarga baru bergabung dengan default, sci-fi, dan abad pertengahan — kini ada empat belas tampilan bawaan, masing-masing gelap dan terang. Setiap widget, popup, dan bagian HUD langsung memakainya tanpa perubahan pada kode Anda: ganti presetnya dan seluruh layar ikut berubah.

Galeri gohud dalam material_light — tombol pil, kartu terisi, dan warna Material 3 — `material_light`

Galeri gohud dalam material_dark — bentuk Material 3 yang sama pada skema dasar gelap — `material_dark`

Galeri gohud dalam kids_light — tombol jeli tebal berwarna krayon di halaman yang cerah — `kids_light`

Galeri gohud dalam kids_dark — kotak mainan yang sama di halaman biru malam — `kids_dark`

Galeri gohud dalam comic_light — garis tepi tinta tebal dan bayangan tegas di halaman krem seperti kertas — `comic_light`

Galeri gohud dalam comic_dark — garis tepi krem dan warna primer kuning di halaman malam — `comic_dark`

Galeri gohud dalam arcade_light — tombol bercat dengan gradasi dan kilau, papan HUD tebal berbingkai biru di halaman biru langit — `arcade_light`

Galeri gohud dalam arcade_dark — tombol-tombol cerah yang sama di halaman malam — `arcade_dark`

Material 3 — untuk layar aplikasi

Material 3 Expressive, diukur terhadap token M3 resmi: tombol pil dengan pelat 40dp di dalam target sentuh 48dp, dialog dan lembar 28dp, kartu terisi, kolom bergaris tepi, dan slider Expressive. Komponen aplikasi — bilah navigasi, bilah aplikasi atas, FAB, bilah pencarian, chip, progres, dan pemilih tanggal — mengikuti token komponen M3, dan judulnya memakai font Roboto bawaan. Untuk toko, setelan, kotak masuk, dan setiap layar yang semestinya terasa seperti aplikasi.

Anak-anak — kotak mainan

Dibuat untuk anak-anak: setiap tombol, baris, dan panel adalah permen jeli dengan garis tepi tebal dan bibir padat yang tenggelam saat ditekan, setiap jenis kontrol dengan warna krayonnya sendiri. Slot cepat berupa balok permen, lencana berupa stiker, joystick-nya pelangi, jendela mendapat pita judul yang cerah dan tombol tutup permen yang bulat, dan setiap tekanan membuatnya memipih. Ukuran dan font proyek Anda tetap persis seperti semula.

Komik — tinta tebal

Setiap muka adalah panel buku komik: warna permukaan di dalam garis tepi tinta yang tebal, dengan bayangan tegas di belakangnya yang hilang saat muka itu ditekan. Satu setelan menyalakan atau mematikan semua bayangan, dua lagi mengatur lebar garis tepi dan ukuran bayangan, dan satu panggilan melakukan hal yang sama untuk satu widget saja. Jendela mendapat keterangan judul kuning.

Arcade — tombol bercat

Setiap tombol dicat — gradasi, kilau putih, dan bibir yang tenggelam saat ditekan, di dalam garis tepi tinta biru tua — dan labelnya putih dengan garis tepi tinta: hijau untuk bermain, biru untuk yang lain, merah untuk menghapus. Papannya tebal, berupa bingkai berwarna di sekeliling ceruk pucat, dan jendela mendapat spanduk judul emas serta tombol tutup merah yang bundar.

GoUi.use_preset(GoThemePresets.MATERIAL_LIGHT)   # atau MATERIAL_DARK
GoUi.use_preset(&"kids_light")                   # atau &"kids_dark"
GoUi.use_preset(&"comic_light")                  # atau &"comic_dark"
GoUi.use_preset(&"arcade_light")                 # atau &"arcade_dark"

Material 3 secara rinci → · Anak-anak secara rinci → · Arcade, widget demi widget ↓ · Komik, widget demi widget ↓ · Popup yang sama dalam keempat belas tampilan →

Arcade: tombol bercat dan papan tebal

Tampilan terbaru mendandani setiap layar seperti mesin arcade. Setiap tombol dicat — gradasi dari atas yang terang ke bawah yang lebih pekat, goresan kilau putih, dan bibir yang tenggelam saat ditekan, semuanya di dalam garis tepi tinta biru tua — dan labelnya putih dengan garis tepi tinta. Setiap papan tebal: bingkai berwarna dengan kilaunya sendiri di sekeliling ceruk pucat. arcade_light menaruh papan putih di halaman biru langit; arcade_dark menaruh papan biru tua di halaman malam. Setiap gambar di bawah ini adalah layar gohud sungguhan — kode yang sama, satu baris preset.

GoUi.use_preset(&"arcade_light")   # atau &"arcade_dark"

Galeri gohud dalam arcade_light — tombol bercat hijau, biru, merah, dan lavender serta papan HUD berbingkai biru di halaman biru langit — `arcade_light` · galeri

Lembar bawah dalam arcade_light — papan berbingkai tebal yang naik dari tepi bawah dengan baris-baris berupa tutup tombol — `GoSheet`

Coach mark dalam arcade_light — keterangan berbingkai yang menunjuk ke sebuah tombol — `GoCoachMark`

Laci samping dalam arcade_dark — papan biru tua berisi baris navigasi di atas layar yang diredupkan — `GoDrawer`

Popover dalam arcade_dark — gelembung berbingkai yang tertambat pada tombol yang membukanya — `GoPopover`

Dialog peringatan dalam arcade_dark — spanduk Level up! emas, tombol tutup merah, dan tombol Great hijau di papan biru tua berbingkai biru — `GoDialogs.alert()`

Snackbar dalam arcade_light — papan putih berbingkai cokelat di sepanjang tepi bawah dengan aksi Undo — `GoSnackbar`

Setiap tombol dicat

Tombol dalam arcade_light — Play hijau, Details biru, tombol putih bergaris tepi, Delete koral, Delete forever merah, tombol ringkas lavender, dan tombol nonaktif abu-abu, masing-masing dicat dengan gradasi, kilau, dan bibir di dalam garis tepi biru tua — `GoStyle.button()`

Tab dalam arcade_light — tab terpilih adalah tombol bercat biru, yang lain tombol lavender — `GoStyle.tabs()`

Kontrol tersegmen dalam arcade_light — tombol-tombol bercat yang terpisah, yang terpilih biru dan tertekan ke dalam — Tombol tersegmen

Toggle dan kotak centang dalam arcade_light — trek hijau mengilap saat menyala, lavender saat mati, dan kotak centang hijau — Toggle dan kotak centang

Kartu dalam arcade_light — ceruk pucat di dalam bingkai biru tebal dengan kilau dan bibir — `GoStyle.card()`

Formulir dalam arcade_light — kolom putih yang cekung, sebuah toggle, dan tombol Save hijau — `GoForm`

Kisi pilihan dalam arcade_light — tutup tombol, yang terpilih berbingkai emas di atas rona hijau — `GoStyle.choice_grid()`

Kisi slot dalam arcade_light — inventaris berisi tutup tombol mengilap dengan jumlah tumpukan — `GoSlotGrid`

Baris daftar dalam arcade_light — setiap baris berupa tutup tombol pucat dengan ikon — Baris daftar

Pemilih tanggal dalam arcade_light — hari-hari berupa tutup tombol, hari terpilih adalah tombol bercat — `GoDatePicker`

Slider dalam arcade_light — tabung biru mengilap di dalam alur tinta dan kenop bundar berupa tutup tombol — `GoStyle.slider()`

Grup radio dalam arcade_light — tutup tombol bundar, yang terpilih bertitik biru — `GoStyle.radio_group()`

Chip filter dalam arcade_light — chip berupa tutup tombol, yang terpilih berona biru dengan tanda centang, serta chip yang dapat dihapus dengan tanda silang — `GoStyle.filter_chip()`

Bilah pencarian dalam arcade_light — kolom putih yang cekung di dalam garis tepi tinta dengan ikon pencarian dan ikon filter — `GoSearchBar`

Stepper dalam arcade_light — setiap langkah berupa tutup tombol pucat, langkah yang terbuka menampilkan tombol Next hijau — `GoStepper`

Tabel papan peringkat dalam arcade_light — baris berselang-seling berupa tutup tombol yang timbul — `GoTable`

Bilah navigasi bawah dalam arcade_light — ikon tab terpilih di atas pil tutup tombol biru, lencana hitungan merah — `GoNavBar`

Pemilih waktu dalam arcade_light — jam dan menit di atas tutup tombol besar, tombol AM dan PM di atas dial jam — `GoTimePicker`

Input kode dalam arcade_light — delapan sel berupa tutup tombol, sel yang sedang diisi berbingkai emas — `GoCodeInput`

Pemilih roda dalam arcade_light — jumlah terpilih di atas pita tutup tombol, yang lain memudar di atas dan di bawahnya — `GoWheelPicker`

Di malam hari: `arcade_dark`

Di halaman gelap, tintanya menjadi warna halaman itu sendiri, jauh lebih pekat, sementara catnya tetap sama cerahnya.

Tombol dalam arcade_dark — cat cerah yang sama di halaman malam — `GoStyle.button()` di malam hari

Bilah HUD dalam arcade_dark — tabung HP merah, MP biru, dan XP hijau di dalam alur cekung — `GoBar`

Kartu HUD dalam arcade_dark — ceruk biru tua di dalam bingkai biru tebal di atas game — `GoStyle.hud_panel()`

Slot cepat dalam arcade_dark — tutup tombol dengan jumlah tumpukan, slot yang sedang cooldown berbingkai emas — `GoSlot`

Joystick virtual dalam arcade_dark — bantalan mengilap di dalam cincin tinta dengan empat panah dan kenop berupa tutup tombol — `GoJoystick`

Peringatan dalam arcade_dark — papan kecil berbingkai kuning, hijau, merah, dan biru — Peringatan

Tombol aksi mengambang dalam arcade_dark — tombol bercat emas dengan kilau — `GoFab`

Kalender hadiah dalam arcade_dark — hari-hari berupa tutup tombol, hari ini berbingkai emas — `GoRewardCalendar`

Kontrol tersegmen dalam arcade_dark — tombol Day yang terpilih dicat biru, Week dan Month lavender, semua labelnya putih — Tombol tersegmen

Tampilan tab dalam arcade_dark — tombol tab bercat di atas baris item berupa tutup tombol biru tua — `GoTabView`

Daftar gulir dalam arcade_dark — baris item di atas tutup tombol biru tua dan sederet chip filter, yang terpilih biru — `GoScroll`

Toggle dan kotak centang dalam arcade_dark — trek hijau mengilap saat menyala, lavender saat mati — Toggle dan kotak centang

Chip kelangkaan dalam arcade_dark — pelat kecil bercat dari Common hingga Cursed — `GoStyle.chip()`

Kisi slot dalam arcade_dark — inventaris berisi tutup tombol biru tua dengan ikon putih dan jumlah tumpukan — `GoSlotGrid`

Slider rentang dalam arcade_dark — rentang biru di antara dua kenop mengilap di dalam alur gelap — `GoRangeSlider`

Paginasi dalam arcade_dark — halaman saat ini berupa tombol bercat hijau — `GoPagination`

Lencana dalam arcade_dark — pelat koral bergaris tepi tinta di atas ikon-ikon — `GoBadge`

Cara kerja tampilan arcade

Mukanya

Setiap tombol dan papan adalah GoStyleBoxArcade: garis tepi tinta, badan bergradasi, bibir, dan kilau, digambar di dalam persegi panjang milik kontrol itu sendiri — ukuran tombol tetap sama dari satu keadaan ke keadaan lain, dan tekanan hanya membuatnya tenggelam.

Label yang terbaca

Label putih dengan garis tepi tinta terbaca di atas cat apa pun yang dipisahkan oleh garis tepinya — WCAG menghitung garis tepi sebagai bagian dari huruf. Setiap cat digeser sampai labelnya mencapai 4.6:1 di setiap ketinggian gradasinya.

Jendela

Judul jendela berada di atas spanduk emas dengan huruf putih bergaris tepi tinta, di samping tombol tutup merah yang bundar. Dialog, lembar, laci, dan popover adalah papan berbingkai tebal.

Satu tombol bisa memakai warnanya sendiri — tombol toko berwarna oranye di menu jeda:

menu.add_child(GoStyle.arcade_paint(GoStyle.button("Shop", _shop), Color("#FF8A1E")))

Arcade secara rinci → · Popup yang sama dalam keempat belas tampilan →

Komik: tinta tebal dan bayangan tegas

Tampilan komik menggambar setiap muka seperti panel di buku komik — warna permukaan di dalam garis tepi tinta yang tebal, dengan bayangan padat yang tegas jatuh ke bawah dan ke kanan. comic_light bertinta hitam di halaman krem seperti kertas dengan warna primer biru kobalt; comic_dark bertinta krem di halaman malam dengan warna primer kuning. Setiap gambar di bawah ini adalah layar gohud sungguhan — kode yang sama, satu baris preset.

GoUi.use_preset(&"comic_light")   # atau &"comic_dark"

Galeri gohud dalam comic_light — tombol, baris, dan bilah bertinta dengan bayangan tegas di halaman krem seperti kertas — `comic_light` · galeri

Galeri gohud dalam comic_dark — tinta krem dan warna primer kuning di halaman malam — `comic_dark` · galeri

Lembar bawah dalam comic_light — panel bertinta yang naik dari tepi bawah dengan baris-baris bertinta — `GoSheet`

Coach mark dalam comic_light — keterangan bertinta yang menunjuk ke sebuah tombol — `GoCoachMark`

Laci samping dalam comic_dark — panel bertinta berisi baris navigasi di atas layar yang diredupkan — `GoDrawer`

Popover dalam comic_dark — gelembung bertinta yang tertambat pada tombol yang membukanya — `GoPopover`

Tombol, toggle, tab, slider, kartu, formulir, tabel, pemilih, dan chip semuanya memakai tinta — Anda tidak perlu menata gayanya satu per satu. Tekan sebuah tombol dan bayangannya hilang: mukanya tenggelam ke tempatnya, seperti stempel. Muka yang dinonaktifkan kehilangan bayangannya dan memudar, sehingga yang bisa ditekan tampak menonjol dari yang tidak.

Tombol dalam comic_light — tombol primer, sekunder, bergaris tepi, bahaya, ringkas, polos, dan nonaktif, masing-masing dengan garis tepi hitam tebal dan bayangan tegas — `GoStyle.button()` — semua jenis

Toggle dan kotak centang dalam comic_light — trek dan kenop bertinta, kotak bertinta dengan tanda centang — Toggle dan kotak centang

Tombol radio dalam comic_light — cincin bertinta, yang terpilih dengan titik terisi — Tombol radio

Tab dalam comic_light — tab terpilih adalah panel bertinta, yang lain berada di atas garis bawah bertinta — `GoStyle.tabs()`

Kontrol tersegmen dalam comic_light — sel bertinta, yang terpilih terisi — Pil tersegmen

Slider dalam comic_light — alur bertinta, isian aksen tipis, dan pegangan bertinta — `GoStyle.slider()`

Pilihan tarik-turun dalam comic_light — tombol bertinta dengan panah chevron — Pilihan tarik-turun

Kartu dalam comic_light — panel putih dengan garis tepi tebal dan bayangan tegas — `GoStyle.card()`

Formulir dalam comic_light — kolom bertinta dengan petunjuk, sebuah toggle, dan tombol Simpan bertinta — `GoForm`

Baris daftar dalam comic_light — setiap baris berupa strip bertinta dengan ikon, subjudul, atau label bahaya — Baris daftar

Tabel dalam comic_light — kepala tabel di atas garis tinta, dan setiap baris skor berupa strip bertinta — `GoTable`

Pemilih tanggal dalam comic_light — sel hari bertinta, hari terpilih terisi — `GoDatePicker`

Pemilih waktu dalam comic_light — kotak jam dan menit bertinta, tombol AM dan PM, serta piringan jam — `GoTimePicker`

Stepper dalam comic_light — baris langkah bertinta, langkah yang selesai dicentang dan langkah berikutnya memudar — `GoStepper`

Chip filter dan chip input dalam comic_light — pil bertinta, filter terpilih diwarnai dengan tanda centang — Chip filter

Bilah navigasi dalam comic_light — garis tinta di atas, tab aktif dalam pil bertinta, dan lencana pada Alerts — `GoNavBar`

Grup input dalam comic_light — kolom dan tombol Send-nya menyatu menjadi satu bentuk bertinta — `GoInputGroup`

Tombol terpisah dalam comic_light — sebuah aksi dan panah menu sebagai dua belahan bertinta — `GoSplitButton`

Paginasi dalam comic_light — halaman saat ini adalah tombol bertinta dengan bayangan tegas — `GoPagination`

Di malam hari: `comic_dark`

Di halaman gelap, garis tepi hitam akan lenyap, jadi comic_dark menggambarnya dengan warna krem dan menjatuhkan bayangan samar yang diwarnai dengan tinta yang sama. Bagian HUD — slot cepat, bilah, joystick, dan kalender hadiah — mengikuti aturan yang sama.

Tombol dalam comic_dark — garis tepi krem, warna primer kuning, dan bayangan tegas yang samar di halaman malam — `GoStyle.button()` di malam hari

Slot cepat dalam comic_dark — balok bertinta dengan jumlah tumpukan dan cooldown, slot yang menyala berbingkai kuning — `GoSlot`

Bilah HUD dalam comic_dark — HP, MP, dan XP dalam alur bertinta krem — `GoBar`

Joystick virtual dalam comic_dark — cincin krem dan kenop yang memberi bayangan — `GoJoystick`

Peringatan dalam comic_dark — panel info, sukses, peringatan, dan bahaya bertinta krem — Peringatan

Kisi slot dalam comic_dark — inventaris berisi balok-balok bertinta — `GoSlotGrid`

Kalender hadiah dalam comic_dark — sel hari bertinta, hari yang sudah diklaim dicentang dan hari ini berbingkai kuning — `GoRewardCalendar`

Chip kelangkaan dalam comic_dark — pil bertinta, masing-masing diwarnai dengan warnanya sendiri — Chip

Slider rentang dalam comic_dark — dua pegangan bertinta di atas alur bertinta — `GoRangeSlider`

Bilah pencarian dalam comic_dark — bilah bertinta dengan ikon pencarian dan filter — `GoSearchBar`

Tombol aksi mengambang dalam comic_dark — tombol kuning bertinta krem dengan bayangan tegas — `GoFab`

Cara kerja tampilan komik

Satu StyleBox untuk setiap muka

Setiap muka adalah GoStyleBoxComic: isian, garis tepi, dan bayangan, digambar di dalam persegi panjang milik kontrol itu sendiri. Ia membaca ukuran garis tepi dan bayangan dari GoConfig setiap kali menggambar, jadi satu setelan mengubah seluruh layar sekaligus.

Ditekan berarti datar

Tombol yang ditekan melepas bayangannya dan bergeser ke tempatnya. Saat hover, bayangan tetap ada; fokus menambahkan cincin tinta di bagian dalam yang tidak pernah menutupi garis tepi; muka yang dinonaktifkan kehilangan bayangan dan memudar.

Skin menintai sisanya

GoSkinComic menintai apa yang digambar oleh kode: slot cepat, chip, lencana, avatar, pemberitahuan, bilah navigasi, FAB, sel tanggal, dan joystick, yang kenopnya memberi bayangan.

Jendela mendapat keterangan judul

Judul jendela berada di atas keterangan kuning, seperti kotak narasi dalam komik, di samping tombol tutup bundar bertinta. Dialog, lembar, laci, dan popover adalah panel bertinta yang buram.

Terbaca siang dan malam

Kedua palet lolos pemeriksaan kontras WCAG yang sama seperti setiap preset lain, termasuk tombol yang ditekan dan yang nonaktif. Bila warna keterangan judul terlalu dekat dengan warna halaman, garis tepinya beralih ke warna halaman.

Tata letak tidak berubah

Garis tepi dan bayangan muat di dalam setiap kontrol dan padding tetap seperti yang diberikan tema, sehingga layar yang ditata dengan tampilan lain tetap mempertahankan tata letaknya — dan font proyek Anda.

Tiga setelan dan satu panggilan

Tiga setelan GoConfig mengubah setiap muka komik sekaligus. Tidak ada yang dibangun ulang — layar menggambar ulang begitu Anda mengaturnya.

GoUi.config.comic_border_width = 2.0   # garis tepi (dp) — default 3
GoUi.config.comic_shadow_size = 6.0    # bayangan (dp) — default 4
GoUi.config.comic_shadow = false       # tanpa bayangan di mana pun

Satu widget bisa menempuh jalannya sendiri, apa pun kata setelannya. Berikan true sebagai argumen terakhir untuk menyertakan semua yang ada di dalamnya.

GoStyle.comic_shadow(skip_button, false)     # tombol ini datar
GoStyle.comic_shadow(card, true, true)       # kartu ini dan semua isinya tetap berbayangan
GoStyle.comic_border(title, 5.0)             # garis tepi lebih tebal untuk yang satu ini

Buat komik Anda sendiri. tools/new_theme.py inked --from comic_light menyalin paletnya; ubah warna kertas, tinta, dan primer, lalu jalankan tools/make_theme.py inked. Tinta, bayangan, dan skin-nya ikut serta.

Komik secara rinci → · Popup yang sama dalam keempat belas tampilan →

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.

Tema abad pertengahan gohud — lembar karakter dengan bar darah, mana, dan stamina, sebuah tas berisi slot cepat, serta jurnal misi dalam bingkai emas tempaan — **Abad pertengahan** — karakter, inventaris, dan misi

Tema abad pertengahan gohud — panel masukan dengan kolom nama, sakelar, kotak centang, dan penggeser volume, sebuah grid petak, serta kartu ajakan undangan kelompok dengan Terima dan Tolak — **Abad pertengahan** — formulir, grid, dan kartu ajakan

Tema sci-fi gohud — panel kontrol sentuh bersudut potong dengan joystick heksagonal, sakelar Fixed / Follow / Relative, dan tombol aksi bulat — **Sci-fi** — panel bersudut dan kontrol sentuh

Keempat belas 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.

Setiap ukuran adalah token

Jarak, sudut, dan ukuran teks dipanggil lewat nama, bukan ditulis sebagai angka. Tukar temanya dan seluruh layar ikut berubah.

Ukuran terlihat ≠ ukuran yang bisa ditekan

Tombol tutup terlihat 36dp tetapi target sentuhnya 48dp. Di tempat slot berdesakan saling tumpang tindih, yang pusatnya lebih dekat yang menerima tekanan.

Notch dan keyboard

Bagian-bagian HUD duduk di dalam area aman, dan kolom masukan naik ke atas keyboard virtual begitu keyboard muncul.

Tombol kembali menutup satu hal

Escape dan tombol Back Android menutup hanya permukaan paling atas. Jendela yang bertumpuk tidak lenyap bersamaan.

Pemberitahuan tidak pernah merampas input

Tekan menembus snackbar dan tombol di bawahnya tetap menerimanya. Fokus pun tidak diambil.

Ikon diminta lewat namanya

Widget hanya tahu GoIconSet.CLOSE. Tukar setnya dan semua gambar berubah tanpa menyentuh satu baris kode. Ikon →

Empat belas tampilan, satu baris

GoUi.use_preset() menukar tema, skin, dan ikon sekaligus — bingkai membulat, sci-fi bersudut potong, tempaan abad pertengahan, komponen aplikasi Material 3, permen jeli anak-anak, tinta komik, atau cat arcade.

Keterbacaan yang terukur

Setiap tema diperiksa terhadap WCAG, termasuk keadaan tombol dan panel HUD tembus pandang di atas putih murni dan hitam murni.

Semuanya berjalan tanpa mengaktifkan plugin. Mengaktifkannya menambahkan autoload GoRuntime yang melacak ukuran jendela, skala dp, dan tinggi keyboard, ditambah project setting untuk resource konfigurasi dan preset — kemudahan, bukan keharusan.

Memasang gohud

Dua jalan. Serahkan pada agen AI, atau letakkan foldernya di proyekmu — tidak ada lagi yang perlu diatur.

Instalasi

Mulai cepat

Lima baris menampilkan layar bertema. Langkah lengkapnya ada di halaman pemasangan.

Mulai cepat

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

Preset	Tampilan
`default_dark`	gohud yang asli — sudut membulat, aksen biru lembut
`default_light`	Bentuk yang sama pada palet terang
`scifi_dark`	Sudut potong, tepi dan pendar neon sian, joystick heksagonal, kurung penanda sasaran
`scifi_light`	Bentuk bersudut yang sama dalam palet cetak biru yang cerah
`medieval_dark`	Besi gelap dan kulit, bingkai emas antik, paku keling, ikon ukiran, judul Cinzel
`medieval_light`	Perkamen, tinta, dan perunggu dengan bingkai tempaan yang sama
`material_light` Baru	Material 3 untuk layar aplikasi — tombol berbentuk pil, dialog 28dp, kartu terisi, bilah navigasi, FAB, dan bilah pencarian sebuah aplikasi, Roboto
`material_dark` Baru	Bentuk Material 3 yang sama pada skema dasar gelap
`kids_light` Baru	Kotak mainan untuk anak-anak — tombol permen jeli dengan garis tepi tebal dan bibir yang tenggelam saat ditekan, warna krayon, halaman yang cerah
`kids_dark` Baru	Kotak mainan yang sama di halaman biru malam
`comic_light` Baru	Panel buku komik — garis tepi tinta tebal dan bayangan tegas di setiap muka, panel putih di halaman krem seperti kertas; bayangan, ukurannya, dan lebar garis tepi adalah setelan
`comic_dark` Baru	Tinta yang sama di halaman malam — garis tepi krem dan warna primer kuning
`arcade_light` Baru	Mesin arcade — setiap tombol dicat dengan gradasi, kilau, dan bibir, berlabel putih dengan garis tepi tinta; papan berbingkai tebal di halaman biru langit, spanduk judul emas pada jendela
`arcade_dark` Baru	Tombol-tombol cerah yang sama di papan biru tua dan halaman malam

Galeri gohud dengan preset default_dark — sudut membulat, aksen biru — `default_dark` — sudut membulat, aksen biru lembut

Preset default_light — bentuk yang sama pada palet terang — `default_light` — bentuk sama, palet terang

Preset scifi_dark — sudut potong dan neon sian — `scifi_dark` — sudut potong, neon sian

Preset scifi_light — bentuk bersudut yang sama dalam palet cetak biru — `scifi_light` — bentuk bersudut sama, palet cetak biru

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.

medieval_dark — lembar karakter, tas berisi slot cepat, dan jurnal misi — `medieval_dark` — besi dan kulit

medieval_light — layar karakter, tas, dan misi yang sama di atas perkamen — `medieval_light` — perkamen dan tinta

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.

default_dark pada 1280x800 — konten memusat, HUD di sudut-sudut — `default_dark` · 1280×800

scifi_dark pada 1280x800 — tata letak sama dengan panel bersudut potong dan neon — `scifi_dark` · 1280×800

Lembar yang sama, tampilan yang berbeda

Sebuah lembar bawah dalam default_dark — Default — kartu membulat, baris pencarian dan footer yang menempel

Sebuah lembar bawah dalam scifi_dark — tepi aksen neon di sepanjang bagian atas — Sci-fi — tepi aksen di atas, sudut terpotong, pendar

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.

Tema baru cukup satu berkas JSON. new_theme.py kingdom --from medieval_dark menulis palet yang menjabarkan setiap nilai warisan; make_theme.py kingdom membangun temanya, gambar kontrolnya, dan kenop skinnya, lalu presetnya muncul di pemilih. Setiap setelan dan kenop →

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

Kelas	Bentuk yang bisa dibuatnya
`GoStyleBoxCut`	Sudut terpotong diagonal (chamfer), satu tepi aksen yang ditebalkan, pendar di luar
`GoStyleBoxBracket`	Hanya penanda sudut, tanpa mengurung kontennya
`GoStyleBoxMedieval`	Bingkai tempaan dengan paku keling, ukiran sudut, sorotan bevel, dan serat material
`GoStyleBoxJelly`	Permen jeli — garis tepi tebal, bibir padat yang tenggelam saat ditekan, badan yang lebih terang di bagian atas, dan kilau putih
`GoStyleBoxComic`	Panel buku komik — garis tepi tinta tebal dan bayangan jatuh yang tegas, keduanya diukur oleh `GoConfig` selagi game berjalan
`GoStyleBoxArcade`	Tombol atau papan arcade — badan bergradasi, kilau putih, bibir yang tenggelam saat ditekan, dan garis tepi tinta; papan menambahkan bingkai berwarna yang tebal di sekeliling ceruk pucat

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

Slot cepat, joystick, dan chip yang digambar oleh setiap skin bawaan — default, anak-anak, Material, abad pertengahan, dan sci-fi — Apa yang digambar sebuah skin — default, anak-anak, Material, abad pertengahan, sci-fi

Slot cepat, joystick, dan chip yang digambar oleh skin komik — garis tepi tinta dan bayangan tegas — …dan skin komik

Slot cepat, joystick, dan chip yang digambar oleh skin arcade — tutup tombol mengilap dan bantalan dengan empat panah — …dan skin arcade

GoStyle.box() selalu mengembalikan StyleBoxFlat, karena kode pemanggilnya menerima objek itu lalu menyetel bg_color atau corner_radius. Pakai GoStyle.surface() bila bentuk khusus harus tetap bertahan.

Widget

Seluruh bagiannya dalam satu tabel. Rinciannya satu per satu → · Setiap widget beserta gambarnya → · Popup dan dialog, panduan lengkapnya →

Kelas	Basis	Fungsinya
`GoSurface`	Control	Cangkang kartu mengambang — penempatan di tengah, bawah, atau tertambat, header dan footer yang menempel, body yang bergulir, tarik untuk mengubah ukuran
`GoSheet`	CanvasLayer	Halaman yang naik dari bawah, pada lapisannya sendiri sehingga selalu berada di atas HUD
`GoDialogs`	Node	Konfirmasi dan peringatan yang bisa Anda `await`; `destructive` untuk tindakan yang tak bisa dibatalkan
`GoForm`	MarginContainer	Formulir berlebar terbatas yang menghindari keyboard virtual dan, dengan `avoid_hud`, menghindari HUD
`GoScroll`	ScrollContainer	Gulir sentuh; bilah gulirnya menyelip ke dalam padding kartu
`GoNotice`	PanelContainer	Snackbar yang tidak mengambil input maupun fokus
`GoPromptCard`	PanelContainer	Pertanyaan yang tidak menghentikan jalannya game
`GoCoachMark`	Control	Tur berpemandu yang menunjuk kontrol sungguhan; menekan sasarannya akan melanjutkan tur
`GoHudAnchor`	Control	Menyematkan bagian HUD ke salah satu dari sembilan titik area aman
`GoBar`	Control	Bar darah, mana, dan pengalaman dengan perubahan yang dilandaikan
`GoSlot`	Button	Satu slot cepat — ikon, jumlah, waktu jeda, dan pintasan pada satu muka
`GoJoystick`	Control	Stik virtual dalam mode tetap, mengikuti, atau relatif
`GoIconButton`	Button	Terlihat kecil, ditekan besar
`GoStyle`	statis	Tombol, baris daftar, kolom masukan, chip, tabel, tab, dan lainnya, dibuat dengan satu cara yang konsisten

Menunggu, memberi tahu, menghitung

Kelas	Basis	Fungsinya
`GoSnackbar`	Node	pesan yang menempatkan dirinya sendiri
`GoSpinner`	Control	menunggu tanpa tahu kapan berakhirnya
`GoBadge`	PanelContainer	titik belum dibaca, tanda BARU, dan 99+

Formulir dan daftar

Kelas	Basis	Fungsinya
`GoField`	VBoxContainer	baris yang bisa salah
`GoInputGroup`	HBoxContainer	masukan yang dilas ke tombolnya
`GoCombobox`	Button	pemilih yang bisa mencari
`GoCodeInput`	VBoxContainer	kode kupon dan hadiah
`GoTable`	VBoxContainer	kepala kolom yang bisa diurutkan, baris yang bisa dipilih
`GoPagination`	HBoxContainer	halaman, atau baris Selengkapnya

Bentuk-bentuk yang benar-benar dipakai game

Kelas	Basis	Fungsinya
`GoRewardCalendar`	VBoxContainer	absensi harian
`GoRadar` · `GoDonut`	Control	statistik dalam sekali lihat
`GoCarousel`	VBoxContainer	banner dan pemilihan karakter
`GoKbd`	HBoxContainer	petunjuk tombol yang tidak berbohong

Di atas layar

Kelas	Basis	Fungsinya
`GoDrawer`	CanvasLayer	panel samping
`GoPopover`	RefCounted	kartu yang disematkan
`GoContextMenu`	RefCounted	tekan lama dan klik kanan
`GoConsole`	CanvasLayer	konsol pengembang

Go HUD Skill

gohud membawa AI skill: seluruh API, templat siap jalan, dan peluncur pratinjau. Tempelkan satu blok ke agen codingmu — ia memasang gohud dan tahu cara memakainya.

Go HUD Skill

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 keempat belas 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 →

Pemeriksaan, rilis, dan situs ini

Satu titik masuk menjalankan semua pemeriksaan; tiap bagian melihat sesuatu yang tak terlihat oleh yang lain.

bash addons/gohud/tools/check_all.sh

Pemeriksaan	Apa yang ditangkapnya
`run_tests.sh` pada empat ukuran layar	Perilaku dan tata letak widget, posisi RTL, fokus keyboard, kontras skin saat runtime, semua preset
`new_project_check.sh`	Ketergantungan tersembunyi pada proyek induk; dengan `--zip` menguji rilis apa adanya, dengan `--export` sebuah build Web
`check_contrast.py`	Kontras WCAG setiap berkas tema, termasuk keadaan tombol dan panel tembus pandang
`check_generated.py` · `check_scaffold.sh`	Tema hasil generasi cocok dengan paletnya; tema sekali pakai berhasil dibangun dan lolos uji kontras
`check_package.py`	Versi yang diambil dari package.json, perpindahan changelog, dan isi ZIP, pada salinan sementara
`check_site.py`	Tautan, jangkar, bahasa halaman, glosarium, dan tabel kenop situs ini

Jalan uji terakhir yang tercatat — 2026-09-13, Godot 4.7.2, macOS, renderer Compatibility. 438 dari 438 pemeriksaan pada 390×844, 844×390, 768×1024, dan 1280×800 di proyek kosong; 438 dari 438 lagi dengan autoload GoRuntime; satu ekspor Web; nol kegagalan kontras pada keenam tema. Perangkat Android atau iOS sungguhan tidak termasuk dalam jalan uji ini.

Versi rilis

cat addons/gohud/package.json       # { "version": "1.1.0" }
bash addons/gohud/tools/release.sh  # semua pemeriksaan → ZIP → ZIP itu di proyek kosong
bash addons/gohud/tools/package.sh  # 1.1.0 → builds/1.1.0/gohud-1.1.0.zip

Versinya adalah yang tertulis di package.json — pengemasan tidak pernah menaikkannya. Untuk merilis versi baru, ubah dulu angka itu. Jalan yang berhasil menyamakan plugin.cfg dan GoUi.VERSION dengan nilai itu, dan saat versi itu dikemas pertama kali, memindahkan catatan Unreleased di CHANGELOG.md menjadi entri bertanggal. Mengemas versi yang sama lagi akan membangun ulang ZIP-nya dan menggantikan yang lama. Jalan yang gagal tidak mengubah apa pun. ZIP-nya tidak menyertakan situs web ini, berkas uji, tools, dan package.json.

Situs ini

python3 addons/gohud/tools/make_site.py            # glosarium dan tabel kenop skin, dibuat dari kode sumber
python3 addons/gohud/tools/check_site.py           # tautan, jangkar, bahasa, glosarium, tabel hasil generasi
bash addons/gohud/tools/site_shots.sh /tmp/shots   # tangkapan layar desktop dan ponsel untuk setiap halaman

Halaman-halamannya HTML biasa di dalam www/ — bahasa Inggris di akar, bahasa Korea di ko/. Sebuah workflow GitHub Actions menerbitkan folder itu sebagai akar situs.

UI game, digerakkan oleh satu resource

Baru: arcade, komik, Material 3, dan tampilan untuk anak-anak

Material 3 — untuk layar aplikasi

Anak-anak — kotak mainan

Komik — tinta tebal

Arcade — tombol bercat

Arcade: tombol bercat dan papan tebal

Setiap tombol dicat

Di malam hari: arcade_dark

Cara kerja tampilan arcade

Mukanya

Label yang terbaca

Jendela

Komik: tinta tebal dan bayangan tegas

Setiap widget bertinta

Di malam hari: comic_dark

Cara kerja tampilan komik

Satu StyleBox untuk setiap muka

Ditekan berarti datar

Skin menintai sisanya

Jendela mendapat keterangan judul

Terbaca siang dan malam

Tata letak tidak berubah

Tiga setelan dan satu panggilan

Seperti apa tampilannya di dalam game

Apa yang tidak perlu lagi Anda urus

Setiap ukuran adalah token

Ukuran terlihat ≠ ukuran yang bisa ditekan

Notch dan keyboard

Tombol kembali menutup satu hal

Pemberitahuan tidak pernah merampas input

Ikon diminta lewat namanya

Empat belas tampilan, satu baris

Keterbacaan yang terukur

Memasang gohud

Mulai cepat

Ubah tampilan — warna dan bentuk

Koleksi abad pertengahan

Layar yang sama di ponsel dan di desktop

Lembar yang sama, tampilan yang berbeda

Skin — tempat yang tak terjangkau Theme

Widget

Menunggu, memberi tahu, menghitung

Formulir dan daftar

Bentuk-bentuk yang benar-benar dipakai game

Di atas layar

Go HUD Skill

Keterbacaan itu diukur, bukan dikira-kira

Pemeriksaan, rilis, dan situs ini

Versi rilis

Situs ini

Di malam hari: `arcade_dark`

Di malam hari: `comic_dark`