gohud — Godot 4 için HUD ve UI kiti

Yeni: arcade, çizgi roman, Material 3 ve çocuklar için bir görünüm

Varsayılan, bilimkurgu ve ortaçağ ailelerine dört yeni aile katıldı — artık her biri koyu ve açık olmak üzere on dört yerleşik görünüm var. Her widget, açılır pencere ve HUD parçası bunları kodunuzda hiçbir değişiklik yapmadan kullanır: ön ayarı değiştirin, ekranın tamamı onu izlesin.

material_light ile gohud galerisi — hap biçimli düğmeler, dolgulu kartlar ve Material 3 renkleri — `material_light`

material_dark ile gohud galerisi — aynı Material 3 biçimleri koyu temel şemada — `material_dark`

kids_light ile gohud galerisi — güneşli bir sayfada pastel boya renklerinde tombul jöle düğmeler — `kids_light`

kids_dark ile gohud galerisi — aynı oyuncak kutusu gece mavisi bir sayfada — `kids_dark`

comic_light ile gohud galerisi — krem kâğıt renginde bir sayfada kalın mürekkep çizgileri ve sert gölgeler — `comic_light`

comic_dark ile gohud galerisi — gece renginde bir sayfada krem çizgiler ve sarı bir birincil renk — `comic_dark`

arcade_light ile gohud galerisi — gök mavisi bir sayfada renk geçişli ve parıltılı boyalı tuşlar, kalın mavi çerçeveli bir HUD panosu — `arcade_light`

arcade_dark ile gohud galerisi — gece renginde bir sayfada aynı parlak tuşlar — `arcade_dark`

Material 3 — uygulama ekranları için

Resmî M3 token'larına göre ölçülmüş Material 3 Expressive: 48dp dokunma hedefinin içinde 40dp plakalı hap biçimli düğmeler, 28dp iletişim kutuları ve alt sayfalar, dolgulu kartlar, çerçeveli alanlar ve Expressive kaydırıcı. Uygulama bileşenleri — gezinme çubuğu, üst uygulama çubuğu, FAB, arama çubuğu, chip'ler, ilerleme göstergesi ve tarih seçici — M3 bileşen token'larını izler; başlıklar pakete dahil Roboto ile yazılır. Mağazalar, ayarlar, gelen kutuları ve bir uygulama gibi hissettirmesi gereken her ekran için.

Kids — oyuncak kutusu

Çocuklar için yapıldı: her tuş, satır ve panel; kalın bir dış çizgisi ve basılınca içeri gömülen sağlam bir alt kenarı olan bir jöle şekerdir ve her denetim türünün kendi pastel boya rengi vardır. Hızlı slotlar şeker bloklar, rozetler çıkartmalar, joystick bir gökkuşağıdır; pencereler güneş sarısı bir başlık kurdelesi ve yuvarlak, şeker gibi bir kapatma düğmesi alır; basılan düğme de jöle gibi ezilir. Boyutlar ve projenizin yazı tipi olduğu gibi kalır.

Comic — kalın mürekkep

Her yüz bir çizgi roman karesidir: kalın bir mürekkep çizgisinin içinde yüzey rengi ve arkasında, yüze basılınca kaybolan sert bir gölge. Tek bir ayar tüm gölgeleri açar ya da kapatır, iki ayar daha çizgi kalınlığını ve gölge boyutunu belirler; tek bir çağrı da aynısını tek bir widget için yapar. Pencereler sarı bir başlık kutusu alır.

Arcade — boyalı tuşlar

Her tuş boyalıdır — lacivert bir mürekkep çizgisinin içinde bir renk geçişi, beyaz bir parıltı ve basılınca içeri gömülen bir alt kenar — ve mürekkep çizgili beyaz yazıyla etiketlenir: oynamak için yeşil, geri kalanı için mavi, silmek için kırmızı. Panolar kalındır, soluk bir iç zeminin çevresinde renkli bir çerçeve; pencereler altın sarısı bir başlık şeridi ve yuvarlak kırmızı bir kapatma tuşu alır.

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

Material 3 ayrıntılı olarak → · Kids ayrıntılı olarak → · Arcade, her widget tek tek ↓ · Comic, her widget tek tek ↓ · Aynı açılır pencere on dört görünümün hepsinde →

Arcade: boyalı tuşlar ve kalın panolar

En yeni görünüm her ekranı bir atari makinesi gibi giydirir. Her tuş boyalıdır — açık bir üstten daha koyu bir alta inen bir renk geçişi, beyaz bir parıltı darbesi ve basılınca içeri gömülen bir alt kenar, hepsi lacivert bir mürekkep çizgisinin içinde — ve etiketi mürekkep çizgili beyaz yazıdır. Her pano kalındır: soluk bir iç zeminin çevresinde, kendi parıltısı olan renkli bir çerçeve. arcade_light gök mavisi bir sayfaya beyaz panolar koyar; arcade_dark gece renginde bir sayfaya lacivert panolar koyar. Aşağıdaki her resim gerçek bir gohud ekranıdır — aynı kod, tek bir ön ayar satırı.

GoUi.use_preset(&"arcade_light")   # ya da &"arcade_dark"

arcade_light ile gohud galerisi — gök mavisi bir sayfada yeşil, mavi, kırmızı ve lavanta rengi boyalı tuşlar ve mavi çerçeveli bir HUD panosu — `arcade_light` · galeri

arcade_light ile bir alt sayfa — alt kenardan yükselen, tuş kapağı biçiminde satırları olan kalın çerçeveli bir pano — `GoSheet`

arcade_light ile bir rehber işareti — bir tuşu gösteren çerçeveli bir açıklama balonu — `GoCoachMark`

arcade_dark ile bir yan çekmece — karartılmış ekranın üstünde, gezinme satırlarından oluşan lacivert bir pano — `GoDrawer`

arcade_dark ile bir açılır balon — onu açan tuşa bağlı, çerçeveli bir balon — `GoPopover`

arcade_dark ile bir uyarı — altın sarısı bir Level up! şeridi, kırmızı bir kapatma tuşu ve mavi çerçeveli lacivert bir pano üstünde yeşil bir Great tuşu — `GoDialogs.alert()`

arcade_light ile bir snackbar — alt kenar boyunca, Undo eylemi olan kahverengi çerçeveli beyaz bir pano — `GoSnackbar`

Her tuş boyalı

arcade_light ile düğmeler — yeşil Oyna, mavi Ayrıntılar, beyaz çerçeveli bir tuş, mercan rengi Sil, kırmızı Kalıcı olarak sil, lavanta rengi sıkışık bir tuş ve gri devre dışı bir tuş; her biri lacivert bir çizginin içinde renk geçişi, parıltı ve alt kenarla boyanmış — `GoStyle.button()`

arcade_light ile sekmeler — seçili sekme mavi boyalı bir tuş, diğerleri lavanta rengi tuşlar — `GoStyle.tabs()`

arcade_light ile bölümlü bir denetim — ayrı boyalı tuşlar, seçili olan mavi ve içeri basılmış — Bölümlü tuşlar

arcade_light ile anahtarlar ve onay kutuları — açıkken yeşil parlak bir ray, kapalıyken lavanta rengi, yeşil onaylı bir kutu — Anahtarlar ve onay kutuları

arcade_light ile kartlar — parıltısı ve alt kenarı olan kalın mavi çerçevelerin içinde soluk iç zeminler — `GoStyle.card()`

arcade_light ile bir form — içe gömük beyaz bir alan, bir anahtar ve yeşil bir Kaydet tuşu — `GoForm`

arcade_light ile bir seçim ızgarası — tuş kapakları, seçili olan yeşil bir tonun üstünde altın sarısı kenarlı — `GoStyle.choice_grid()`

arcade_light ile bir slot ızgarası — yığın sayılı parlak tuş kapaklarından bir envanter — `GoSlotGrid`

arcade_light ile liste satırları — her satır simgeli, soluk bir tuş kapağı — Liste satırları

arcade_light ile bir tarih seçici — tuş kapağı biçiminde günler, seçili gün boyalı bir tuş — `GoDatePicker`

arcade_light ile bir kaydırıcı — mürekkep bir olukta mavi parlak bir tüp ve yuvarlak, tuş kapağı biçiminde bir topuz — `GoStyle.slider()`

arcade_light ile bir radyo düğmesi grubu — yuvarlak tuş kapakları, seçili olanda mavi bir nokta — `GoStyle.radio_group()`

arcade_light ile filtre çipleri — tuş kapağı biçiminde çipler, seçili olan mavi tonlu ve onay işaretli, ayrıca çarpı işaretiyle kaldırılabilen çipler — `GoStyle.filter_chip()`

arcade_light ile bir arama çubuğu — mürekkep bir çizginin içinde içe gömük beyaz bir alan, bir arama ve bir filtre simgesi — `GoSearchBar`

arcade_light ile bir adım göstergesi — her adım soluk bir tuş kapağı, açık adımda yeşil Next tuşu görünüyor — `GoStepper`

arcade_light ile bir lider tablosu — her ikinci satır kabarık bir tuş kapağı — `GoTable`

arcade_light ile bir alt gezinme çubuğu — seçili sekmenin simgesi tuş kapağı biçiminde mavi bir hap üstünde, kırmızı bir sayı rozeti — `GoNavBar`

arcade_light ile bir saat seçici — saat ve dakika büyük tuş kapaklarında, bir saat kadranının üstünde AM ve PM tuşları — `GoTimePicker`

arcade_light ile bir kod girişi — tuş kapağı biçiminde sekiz hücre, yazılmakta olan hücre altın sarısı kenarlı — `GoCodeInput`

arcade_light ile bir çark seçici — seçili miktar tuş kapağı biçiminde bir şeritte, diğerleri yukarıda ve aşağıda soluyor — `GoWheelPicker`

Gece: `arcade_dark`

Koyu bir sayfada mürekkep, çok daha koyu hâliyle sayfanın kendisi olur; boyalar ise aynı parlaklıkta kalır.

arcade_dark ile düğmeler — gece renginde bir sayfada aynı parlak boyalar — Gece `GoStyle.button()`

arcade_dark ile HUD çubukları — içe gömük oluklarda kırmızı HP, mavi MP ve yeşil XP tüpleri — `GoBar`

arcade_dark ile HUD kartları — oyunun üstünde, kalın mavi bir çerçeve içinde lacivert bir iç zemin — `GoStyle.hud_panel()`

arcade_dark ile hızlı slotlar — yığın sayılı tuş kapakları, bekleme süresindeki slot altın sarısı kenarlı — `GoSlot`

arcade_dark ile sanal bir joystick — mürekkep bir halkanın içinde dört oklu parlak bir ped ve tuş kapağı biçiminde bir topuz — `GoJoystick`

arcade_dark ile uyarılar — sarı, yeşil, kırmızı ve mavi çerçeveli küçük panolar — Uyarılar

arcade_dark ile kayan eylem düğmeleri — parıltılı, altın sarısı boyalı tuşlar — `GoFab`

arcade_dark ile bir ödül takvimi — tuş kapağı biçiminde günler, bugün altın sarısı kenarlı — `GoRewardCalendar`

arcade_dark ile bölümlü bir denetim — seçili Day tuşu mavi boyalı, Week ve Month lavanta rengi, tüm etiketler beyaz — Bölümlü tuşlar

arcade_dark ile bir sekme görünümü — lacivert tuş kapaklarından oluşan öğe satırlarının üstünde boyalı sekme tuşları — `GoTabView`

arcade_dark ile kayan bir liste — lacivert tuş kapakları üstünde öğe satırları ve bir sıra filtre çipi, seçili olan mavi — `GoScroll`

arcade_dark ile anahtarlar ve onay kutuları — açıkken yeşil parlak bir ray, kapalıyken lavanta rengi — Anahtarlar ve onay kutuları

arcade_dark ile nadirlik çipleri — Common'dan Cursed'a küçük boyalı plakalar — `GoStyle.chip()`

arcade_dark ile bir slot ızgarası — beyaz simgeli ve yığın sayılı lacivert tuş kapaklarından bir envanter — `GoSlotGrid`

arcade_dark ile bir aralık kaydırıcısı — koyu bir olukta iki parlak topuz arasında mavi bir dolgu — `GoRangeSlider`

arcade_dark ile sayfalama — geçerli sayfa yeşil boyalı bir tuş — `GoPagination`

arcade_dark ile rozetler — simgelerin üstünde mürekkep çizgili mercan rengi plakalar — `GoBadge`

Arcade görünümü nasıl çalışır

Yüz

Her tuş ve pano bir GoStyleBoxArcade'dir: denetimin kendi dikdörtgeninin içine çizilen bir mürekkep çizgisi, renk geçişli bir gövde, bir alt kenar ve bir parıltı — bir tuş durumdan duruma boyutunu korur, basmak onu yalnızca içeri gömer.

Okunan etiketler

Mürekkep çizgili beyaz bir etiket, çizginin ayırdığı her boyanın üstünde okunur — WCAG çizgiyi harfin bir parçası sayar. Her boya, etiketi renk geçişinin her yüksekliğinde 4.6:1'i geçene kadar kaydırılır.

Pencereler

Bir pencerenin başlığı, yuvarlak kırmızı bir kapatma tuşunun yanında, altın sarısı bir şeridin üstünde mürekkep çizgili beyaz harflerle durur. İletişim kutuları, alt sayfalar, çekmeceler ve açılır balonlar kalın çerçeveli panolardır.

Tek bir tuş kendi rengini alabilir — bir duraklatma menüsünde turuncu bir mağaza tuşu:

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

Arcade ayrıntılı olarak → · Aynı açılır pencere on dört görünümün hepsinde →

Çizgi roman: kalın mürekkep ve sert bir gölge

Çizgi roman görünümü her yüzü bir çizgi roman karesi gibi çizer — kalın bir mürekkep çizgisinin içinde yüzey rengi ve aşağıya, sağa düşen sert, dolgun bir gölge. comic_light krem kâğıt renginde bir sayfaya siyah mürekkeple, kobalt bir birincil renkle çizer; comic_dark ise gece renginde bir sayfaya krem mürekkeple, sarı bir birincil renkle çizer. Aşağıdaki her resim gerçek bir gohud ekranıdır — aynı kod, tek bir ön ayar satırı.

GoUi.use_preset(&"comic_light")   # ya da &"comic_dark"

comic_light ile gohud galerisi — krem kâğıt renginde bir sayfada mürekkeple çizilmiş, sert gölgeli tuşlar, satırlar ve çubuklar — `comic_light` · galeri

comic_dark ile gohud galerisi — gece renginde bir sayfada krem mürekkep ve sarı bir birincil renk — `comic_dark` · galeri

comic_light ile bir alt sayfa — alt kenardan yükselen, mürekkeple çizilmiş satırları olan mürekkep çizgili bir panel — `GoSheet`

comic_light ile bir rehber işareti — bir düğmeyi gösteren mürekkep çizgili bir konuşma balonu — `GoCoachMark`

comic_dark ile bir yan çekmece — karartılmış ekranın üstünde, gezinme satırlarından oluşan mürekkep çizgili bir panel — `GoDrawer`

comic_dark ile bir açılır balon — onu açan düğmeye bağlı, mürekkep çizgili bir balon — `GoPopover`

Düğmeler, anahtarlar, sekmeler, kaydırıcılar, kartlar, formlar, tablolar, seçiciler ve chip'ler hep mürekkebi taşır — onları tek tek biçimlendirmezsiniz. Bir tuşa basın, gölgesi kaybolur: yüz, bir mühür gibi yerine gömülür. Devre dışı yüzler gölgelerini yitirip solar; böylece basılabilen, basılamayandan ayrışır.

comic_light ile düğmeler — birincil, ikincil, çerçeveli, tehlike, sıkışık, yalın ve devre dışı tuşlar; her biri kalın siyah bir çizgi ve sert bir gölgeyle — `GoStyle.button()` — her türü

comic_light ile anahtarlar ve onay kutuları — mürekkep çizgili bir ray ve topuz, onay işaretli mürekkep çizgili kutular — Anahtarlar ve onay kutuları

comic_light ile radyo düğmeleri — mürekkep çizgili halkalar, seçili olanda dolu bir nokta — Radyo düğmeleri

comic_light ile sekmeler — seçili sekme mürekkep çizgili bir panel, diğerleri bir mürekkep alt çizgisinin üstünde durur — `GoStyle.tabs()`

comic_light ile bölümlü bir denetim — mürekkep çizgili hücreler, seçili olan dolu — Bölümlü haplar

comic_light ile bir kaydırıcı — mürekkep çizgili bir oluk, ince bir vurgu dolgusu ve mürekkep çizgili bir tutamak — `GoStyle.slider()`

comic_light ile açılır seçim kutuları — köşeli ok işaretli mürekkep çizgili tuşlar — Seçim kutuları

comic_light ile bir kart — kalın bir çizgi ve sert bir gölgeyle beyaz bir panel — `GoStyle.card()`

comic_light ile bir form — ipucu olan mürekkep çizgili bir alan, bir anahtar ve mürekkep çizgili bir Kaydet tuşu — `GoForm`

comic_light ile liste satırları — her satır simgeli, alt başlıklı ya da tehlike etiketli mürekkep çizgili bir şerit — Liste satırları

comic_light ile bir tablo — bir mürekkep çizgisinin üstünde başlık, her skor satırı mürekkep çizgili bir şerit — `GoTable`

comic_light ile bir tarih seçici — mürekkep çizgili gün hücreleri, seçili gün dolu — `GoDatePicker`

comic_light ile bir saat seçici — mürekkep çizgili saat ve dakika kutuları, AM ve PM tuşları ve bir saat kadranı — `GoTimePicker`

comic_light ile bir adım göstergesi — mürekkep çizgili adım satırları, tamamlanan adım onaylı, sıradaki adım soluk — `GoStepper`

comic_light ile filtre ve giriş chip'leri — mürekkep çizgili haplar, seçili filtre renklendirilmiş ve onay işaretli — Filtre chip'leri

comic_light ile bir gezinme çubuğu — üstte bir mürekkep çizgisi, mürekkep çizgili bir hapın içinde geçerli sekme ve Alerts üstünde bir rozet — `GoNavBar`

comic_light ile bir giriş grubu — bir alan ve onun Gönder tuşu, tek bir mürekkep çizgili biçime kaynaştırılmış — `GoInputGroup`

comic_light ile bir bölünmüş düğme — bir eylem ve bir menü oku, mürekkep çizgili iki yarım olarak — `GoSplitButton`

comic_light ile sayfalama — geçerli sayfa sert gölgeli, mürekkep çizgili bir tuştur — `GoPagination`

Gece: `comic_dark`

Koyu bir sayfada siyah bir çizgi kaybolurdu; bu yüzden comic_dark onu krem renginde çizer ve aynı mürekkeple renklendirilmiş soluk bir gölge düşürür. HUD parçaları — hızlı slotlar, çubuklar, joystick ve ödül takvimi — aynı kurallara uyar.

comic_dark ile düğmeler — gece renginde bir sayfada krem çizgiler, sarı bir birincil renk ve soluk sert gölgeler — Gece `GoStyle.button()`

comic_dark ile hızlı slotlar — yığın sayısı ve bekleme süresi olan mürekkep çizgili bloklar, yanan slotlar sarı kenarlı — `GoSlot`

comic_dark ile HUD çubukları — krem mürekkep çizgili oluklarda HP, MP ve XP — `GoBar`

comic_dark ile sanal bir joystick — krem bir halka ve gölge düşüren bir topuz — `GoJoystick`

comic_dark ile uyarılar — krem mürekkeple bilgi, başarı, uyarı ve tehlike panelleri — Uyarılar

comic_dark ile bir slot ızgarası — mürekkep çizgili bloklardan bir envanter — `GoSlotGrid`

comic_dark ile bir ödül takvimi — mürekkep çizgili gün hücreleri, alınan günler onaylı, bugün sarı kenarlı — `GoRewardCalendar`

comic_dark ile nadirlik chip'leri — her biri kendi rengiyle renklendirilmiş mürekkep çizgili haplar — Chip'ler

comic_dark ile bir aralık kaydırıcısı — mürekkep çizgili bir oluk üstünde mürekkep çizgili iki tutamak — `GoRangeSlider`

comic_dark ile bir arama çubuğu — arama ve filtre simgeli mürekkep çizgili bir çubuk — `GoSearchBar`

comic_dark ile kayan eylem düğmeleri — krem mürekkepli, sert gölgeli sarı tuşlar — `GoFab`

Çizgi roman görünümü nasıl çalışır

Her yüz için tek bir StyleBox

Her yüz bir GoStyleBoxComic'tir: denetimin kendi dikdörtgeninin içine çizilen bir dolgu, bir çizgi ve bir gölge. Çizgi ve gölge boyutlarını her çizişte GoConfig'ten okur; böylece tek bir ayar ekranın tamamını bir anda değiştirir.

Basılı demek düz demek

Basılan bir tuş gölgesini bırakır ve yerine oturur. Üzerine gelince gölge kalır; odak, çizgiyi asla örtmeyen içten bir mürekkep halkası ekler; devre dışı yüzler gölgelerini yitirip solar.

Gerisini kaplama mürekkepler

GoSkinComic, kodun çizdiği her şeyi mürekkepler: hızlı slotlar, chip'ler, rozetler, avatarlar, bildirimler, gezinme çubuğu, FAB, tarih hücreleri ve topuzu gölge düşüren joystick.

Pencereler bir başlık kutusu alır

Bir pencerenin başlığı, çizgi romandaki anlatıcı kutusu gibi sarı bir başlık kutusunun üstünde, mürekkep çizgili yuvarlak bir kapatma düğmesinin yanında durur. İletişim kutuları, alt sayfalar, çekmeceler ve açılır balonlar opak, mürekkep çizgili panellerdir.

Gece gündüz okunaklı

Her iki palet de, basılı ve devre dışı tuşlar dahil, diğer her ön ayarla aynı WCAG kontrast denetimlerinden geçer. Bir başlık kutusunun rengi sayfaya fazla yakın kalacaksa, çizgisi sayfa rengine geçer.

Yerleşim değişmez

Çizgi ve gölge her denetimin içine sığar, iç boşluk da temanın verdiği gibi kalır; böylece başka bir görünümde yerleştirilmiş bir ekran yerleşimini — ve projenizin yazı tipini — korur.

Üç ayar ve tek bir çağrı

Üç GoConfig ayarı tüm çizgi roman yüzlerini bir anda değiştirir. Hiçbir şey yeniden kurulmaz — siz ayarladıkça ekran yeniden çizilir.

GoUi.config.comic_border_width = 2.0   # çizgi (dp) — varsayılan 3
GoUi.config.comic_shadow_size = 6.0    # gölge (dp) — varsayılan 4
GoUi.config.comic_shadow = false       # hiçbir yerde gölge yok

Ayarlar ne derse desin, tek bir widget kendi yolunu seçebilir. İçindeki her şeyi de kapsamak için son argüman olarak true verin.

GoStyle.comic_shadow(skip_button, false)     # bu düğme düz durur
GoStyle.comic_shadow(card, true, true)       # bu kart ve içindeki her şey gölgesini korur
GoStyle.comic_border(title, 5.0)             # bunda daha kalın bir çizgi

Kendi çizgi romanınızı yapın. tools/new_theme.py inked --from comic_light paleti kopyalar; kâğıt, mürekkep ve birincil renkleri değiştirip tools/make_theme.py inked komutunu çalıştırın. Mürekkep, gölge ve kaplama da beraberinde gelir.

Comic ayrıntılı olarak → · Aynı açılır pencere on dört görünümün hepsinde →

Bir oyunda nasıl görünüyor

Ortaçağ ve bilimkurgu ön ayarları — karakter sayfaları, envanterler ve görevler; formlar, ızgaralar ve soru kartları; köşeli paneller ve dokunmatik denetimler. Ön ayarı değiştirmek tek satır koddur.

gohud ortaçağ teması — can, mana ve dayanıklılık çubukları olan bir karakter sayfası, hızlı slotlardan oluşan bir heybe ve dövme altın çerçeveler içinde bir görev günlüğü — **Ortaçağ** — karakter, envanter ve görevler

gohud ortaçağ teması — ad alanı, anahtar, onay kutuları ve ses kaydırıcısı olan bir giriş paneli, karolardan oluşan bir ızgara ve Kabul Et ile Reddet seçenekli bir grup daveti soru kartı — **Ortaçağ** — formlar, ızgaralar ve soru kartları

gohud bilimkurgu teması — altıgen joystick, Sabit / Takip / Göreli anahtarı ve yuvarlak eylem düğmeleri olan pahlı bir dokunmatik denetim paneli — **Bilimkurgu** — köşeli paneller ve dokunmatik denetimler

On dört ön ayarın tamamı ve nasıl değiştirilecekleri →

Sizin elinizden aldıkları

Oyun arayüzünde en çok zamanı yiyen şey bir düğmenin biçimi değildir — cihazdan cihaza birbirinden ayrışan her şeydir. gohud bu ayrışmayı tek bir yerde halleder.

Her ölçü bir token'dır

Boşluklar, köşeler ve yazı boyutları sayı olarak yazılmaz, adıyla çağrılır. Temayı değiştirin, ekranın tamamı onunla birlikte hareket eder.

Görünen boyut ≠ basılabilir boyut

Bir kapatma düğmesi 36dp görünür ama dokunma hedefi 48dp'dir. Sıkışık slotlar üst üste bindiğinde, basışı merkezi daha yakın olan alır.

Çentikler ve klavyeler

HUD parçaları güvenli alanın içinde durur; sanal klavye belirdiğinde bir giriş alanı onun üstüne yükselir.

Geri, tek bir şeyi kapatır

Escape ve Android'in Geri tuşu yalnızca en üstteki yüzeyi kapatır. Üst üste açılmış pencereler birlikte yok olmaz.

Bildirimler girdiyi çalmaz

Bir snackbar'ın üstüne basın, altındaki düğme basışı alır. Odak da elinden alınmaz.

Simgeler adıyla istenir

Widget'lar yalnızca GoIconSet.CLOSE bilir. Seti değiştirin, tek satır koda dokunmadan bütün çizimler değişsin. Simgeler →

On dört görünüm, tek satır

GoUi.use_preset() temayı, kaplamayı ve simgeleri birlikte değiştirir — yuvarlak, pahlı bilimkurgu, dövme ortaçağ çerçeveleri, Material 3 uygulama bileşenleri, Kids jöle şekerleri, çizgi roman mürekkebi veya arcade boyası.

Okunaklılık ölçülerek

Her tema WCAG'a göre denetlenir; düğme durumları ve saf beyaz ile saf siyah üstündeki yarı saydam HUD panelleri dahil.

Her şey eklenti etkinleştirilmeden de çalışır. Etkinleştirmek, pencere boyutunu, dp ölçeğini ve klavye yüksekliğini izleyen bir GoRuntime autoload'u ile yapılandırma kaynağı ve ön ayar için proje ayarlarını ekler — kolaylıktır, zorunluluk değil.

gohud kurulumu

İki yol var. Yapay zekâ ajanınıza yaptırın ya da klasörü projenize bırakın — başka ayarlanacak bir şey yok.

Kurulum

Hızlı başlangıç

Beş satır, temalı bir ekranı gösterir. Baştan sona anlatım kurulum sayfasında.

Hızlı başlangıç

Görünümü değiştirin — renkleri ve biçimi

Bir Theme yalnızca motorun çizdiğini yeniden biçimlendirebilir. StyleBoxFlat'in sahip olduğu tek köşe yuvarlak köşedir; joystick, hızlı slotlar ve rehber işareti ise kodla çizilir — dolayısıyla tek başına bir tema onların biçimini asla değiştiremez. gohud bu yüzden ön ayarlarla gelir: tek bir birim olarak seçilen bir tema, bir kaplama ve bir simge seti.

GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)   # tema, kaplama ve simgeler birlikte

Ön ayar	Görünüm
`default_dark`	Özgün gohud — yuvarlak köşeler, yumuşak mavi vurgu
`default_light`	Aynı biçimler, açık bir palet üstünde
`scifi_dark`	Pahlı köşeler, camgöbeği neon kenarlar ve ışıma, altıgen joystick, hedefleme köşelikleri
`scifi_light`	Aynı köşeli biçimler, parlak bir teknik çizim paletinde
`medieval_dark`	Koyu demir ve deri, antika altın çerçeveler, perçinler, gravür simgeler, Cinzel başlıklar
`medieval_light`	Parşömen, mürekkep ve bronz; aynı dövme çerçevelerle
`material_light` Yeni	Uygulama ekranları için Material 3 — hap biçimli düğmeler, 28dp iletişim kutuları, dolgulu kartlar, bir uygulamanın gezinme çubuğu, FAB'ı ve arama çubuğu, Roboto
`material_dark` Yeni	Aynı Material 3 biçimleri koyu temel şemada
`kids_light` Yeni	Çocuklar için oyuncak kutusu — kalın dış çizgili, basılınca içeri gömülen bir alt kenarı olan jöle şeker tuşlar, pastel boya renkleri, güneşli bir sayfa
`kids_dark` Yeni	Aynı oyuncak kutusu gece mavisi bir sayfada
`comic_light` Yeni	Çizgi roman kareleri — her yüzde kalın bir mürekkep çizgisi ve sert bir gölge, krem kâğıt renginde bir sayfada beyaz paneller; gölge, gölgenin boyutu ve çizgi kalınlığı birer ayardır
`comic_dark` Yeni	Aynı mürekkep gece renginde bir sayfada — krem çizgiler ve sarı bir birincil renk
`arcade_light` Yeni	Bir atari makinesi — her tuş renk geçişi, parıltı ve alt kenarla boyanmış, mürekkep çizgili beyaz yazıyla etiketlenmiş; gök mavisi bir sayfada kalın çerçeveli panolar, pencerelerde altın sarısı bir başlık şeridi
`arcade_dark` Yeni	Aynı parlak tuşlar lacivert panolarda ve gece renginde bir sayfada

default_dark ön ayarıyla gohud galerisi — yuvarlak köşeler, mavi vurgu — `default_dark` — yuvarlak köşeler, yumuşak mavi vurgu

default_light ön ayarı — aynı biçimler, açık bir palet üstünde — `default_light` — aynı biçimler, açık palet

scifi_dark ön ayarı — pahlı köşeler ve camgöbeği neon — `scifi_dark` — pahlı köşeler, camgöbeği neon

scifi_light ön ayarı — aynı köşeli biçimler, teknik çizim paletinde — `scifi_light` — aynı köşeli biçimler, teknik çizim paleti

Bu dördü aynı galeri ekranıdır. Tek bir satır kod bile farklı değil — yalnızca ön ayarın adı. Düğme köşeleri, anahtar biçimleri, liste satırları ve giriş kenarlıkları hep birlikte hareket eder.

Ortaçağ koleksiyonu

medieval_dark demir ve deriyi antika altınla eşleştirir; medieval_light parşömen ve mürekkep kullanır. Menü çerçeveleri bir perçin ve küçük bir köşe süsü taşırken sürekli görünen HUD sessiz kalır; 16 gravür simge nesne adlarını yeniden çizer ve yalnızca başlıklar ile alt başlıklar pakete dahil Cinzel yazı tipini kullanır.

medieval_dark — karakter sayfası, hızlı slotlardan oluşan heybe ve görev günlüğü — `medieval_dark` — demir ve deri

medieval_light — aynı karakter, heybe ve görev ekranları parşömen üstünde — `medieval_light` — parşömen ve mürekkep

Her iki görüntü de standart widget'lardan kurulmuş examples/medieval/medieval.tscn dosyasıdır. Ortaçağ rehberi ve kendi krallığınızı nasıl kuracağınız →

Aynı ekran telefonda ve masaüstünde

Galeri görüntüleri dikey tutulan bir telefondur. Aşağıdaki ise aynı kodun 1280×800'deki hali — içerik okunabilir bir genişlikte (480dp) durur ve ortalanır, HUD ise köşelerde kalır. Form, yüzen HUD parçalarının etrafından dolaşır ama onlardan zaten uzaktaysa yerinden kıpırdamaz: yine de itmek geniş bir ekranda içeriği merkezden kaydırırdı.

1280x800'de default_dark — içerik ortalanmış, HUD köşelerde — `default_dark` · 1280×800

1280x800'de scifi_dark — pahlı paneller ve neonla aynı yerleşim — `scifi_dark` · 1280×800

Aynı sayfa, başka bir görünüm

default_dark içinde bir alt sayfa — Varsayılan — yuvarlak kart, sabit arama satırı ve alt bilgi

scifi_dark içinde bir alt sayfa — üst kenar boyunca neon vurgu kenarı — Bilimkurgu — üstte vurgu kenarı, kesik köşeler, ışıma

Birini Project Settings → gohud → Theme → Preset yolundan seçin ya da GoConfig.preset değerini verin. theme, skin veya icons alanlarını açıkça doldurmak ön ayarı geçersiz kılar; böylece bir ön ayarı alıp yalnızca birini değiştirebilirsiniz.

Yeni bir tema tek bir JSON dosyasıdır. new_theme.py kingdom --from medieval_dark, devralınan her değeri açık açık yazan bir palet oluşturur; make_theme.py kingdom temayı, denetim grafiklerini ve kaplama ayarlarını üretir, ardından ön ayar seçicide belirir. Her ayar ve her düğme →

Kaplamalar — bir Theme'in erişemediği yer

Bir kaplama; joystick'e, hızlı slot yüzlerine, rehber işareti halkasına, chip'lere, iskeletlere, uyarılara, ayırıcılara ve bölüm başlıklarına sahiptir. Alt sınıfını türetin ve yalnızca değiştirmek istediğinizi ezin.

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

Sınıf	Yapabildiği biçimler
`GoStyleBoxCut`	Çapraz kesilmiş köşeler (pah), kalınlaştırılmış tek bir vurgu kenarı, dışa doğru ışıma
`GoStyleBoxBracket`	İçeriği kuşatmadan yalnızca köşe işaretleri
`GoStyleBoxMedieval`	Perçinli, köşesi gravürlü, eğim ışıltılı ve malzeme dokulu dövme bir çerçeve
`GoStyleBoxJelly`	Bir jöle şeker — kalın bir dış çizgi, basılınca içeri gömülen sağlam bir alt kenar, üstü daha açık bir gövde ve beyaz bir parıltı
`GoStyleBoxComic`	Bir çizgi roman karesi — kalın bir mürekkep çizgisi ve sert bir düşen gölge; ikisinin de boyutunu oyun çalışırken `GoConfig` belirler
`GoStyleBoxArcade`	Bir arcade tuşu ya da panosu — renk geçişli bir gövde, beyaz bir parıltı, basılınca içeri gömülen bir alt kenar ve bir mürekkep çizgisi; bir pano buna soluk bir iç zeminin çevresinde kalın, renkli bir çerçeve ekler

Altısı da bir Theme kaynağına serileştirilir — bir temanın yalnızca rengi değil biçimi de değiştirebilmesini sağlayan şey budur. Pakete dahil alt sınıflar GoSkinSciFi, GoSkinMedieval, GoSkinMaterial, GoSkinKids, GoSkinComic ve GoSkinArcade'dir.

Pakete dahil her kaplamanın çizdiği hızlı slotlar, joystick ve chip — varsayılan, Kids, Material, ortaçağ ve bilimkurgu — Bir kaplamanın çizdikleri — varsayılan, Kids, Material, ortaçağ, bilimkurgu

Comic kaplamasının çizdiği hızlı slotlar, joystick ve chip — mürekkep çizgileri ve sert gölgeler — …ve Comic kaplaması

Arcade kaplamasının çizdiği hızlı slotlar, joystick ve chip — parlak tuş kapakları ve dört oklu bir ped — …ve Arcade kaplaması

GoStyle.box() her zaman bir StyleBoxFlat döndürür, çünkü çağıran kod onu alıp bg_color veya corner_radius değerini ayarlar. Özel bir biçimin hayatta kalması gerekiyorsa GoStyle.surface() kullanın.

Widget'lar

Parçalar, tek bir tabloda. Her biri ayrıntılı olarak → · Resimleriyle tüm widget'lar → · Açılır pencereler ve iletişim kutuları, tam rehber →

Sınıf	Temel	Ne yapar
`GoSurface`	Control	Yüzen kart kabuğu — ortada, altta veya bir denetime sabitlenmiş yerleşim, sabit başlık ve alt bilgi, kaydırılan gövde, sürükleyerek yeniden boyutlandırma
`GoSheet`	CanvasLayer	Alttan yükselen sayfalar; kendi katmanlarında olduklarından HUD'ın üstünde dururlar
`GoDialogs`	Node	`await` ettiğiniz onaylar ve uyarılar; geri alınamayan eylemler için `destructive`
`GoForm`	MarginContainer	Genişliği sınırlı formlar; sanal klavyeden ve `avoid_hud` ile HUD'dan kaçınır
`GoScroll`	ScrollContainer	Dokunmatik kaydırma; kaydırma çubuğu kartın iç boşluğuna gizlenir
`GoNotice`	PanelContainer	Ne girdi ne de odak alan bir snackbar
`GoPromptCard`	PanelContainer	Oyunu durdurmayan bir soru
`GoCoachMark`	Control	Gerçek denetimleri gösteren rehberli bir tur; hedefe basmak turu ilerletir
`GoHudAnchor`	Control	HUD parçalarını güvenli alandaki dokuz noktadan birine sabitler
`GoBar`	Control	Yumuşatılmış geçişlerle can, mana ve deneyim çubukları
`GoSlot`	Button	Bir hızlı slot — simge, adet, bekleme süresi ve kısayol tek bir yüzde
`GoJoystick`	Control	Sabit, takip veya göreli kipte sanal joystick
`GoIconButton`	Button	Küçük görünür, büyük basılır
`GoStyle`	static	Düğmeler, liste satırları, giriş alanları, chip'ler, tablolar, sekmeler ve dahası; hepsi tek ve tutarlı bir yoldan üretilir

Beklemek, bildirmek, saymak

Sınıf	Temel	Ne yapar
`GoSnackbar`	Node	kendi yerini bulan mesaj
`GoSpinner`	Control	sonu görünmeyen bir bekleyiş
`GoBadge`	PanelContainer	okunmamış noktası, YENİ etiketi, 99+

Formlar ve listeler

Sınıf	Temel	Ne yapar
`GoField`	VBoxContainer	hatalı olabilen satır
`GoInputGroup`	HBoxContainer	düğmesine kaynaklanmış bir girdi
`GoCombobox`	Button	arama yapan bir seçici
`GoCodeInput`	VBoxContainer	kupon ve hediye kodları
`GoTable`	VBoxContainer	sıralanabilir başlıklar, seçilebilir satırlar
`GoPagination`	HBoxContainer	sayfalar ya da bir Daha fazla satırı

Oyunların gerçekten kullandığı biçimler

Sınıf	Temel	Ne yapar
`GoRewardCalendar`	VBoxContainer	günlük katılım
`GoRadar` · `GoDonut`	Control	bir bakışta istatistikler
`GoCarousel`	VBoxContainer	afişler ve karakter seçimi
`GoKbd`	HBoxContainer	yalan söylemeyen tuş ipuçları

Ekranın üstünde

Sınıf	Temel	Ne yapar
`GoDrawer`	CanvasLayer	yan panel
`GoPopover`	RefCounted	sabitlenmiş kart
`GoContextMenu`	RefCounted	uzun basış ve sağ tık
`GoConsole`	CanvasLayer	geliştirici konsolu

Go HUD Skill

gohud bir yapay zekâ becerisiyle gelir: API'nin tamamı, çalışmaya hazır şablonlar ve önizleme başlatıcı. Tek bloğu ajanınıza yapıştırın; gohud'u kurar ve nasıl kullanacağını bilir.

Go HUD Skill

Okunaklılık göz kararı değil, ölçümle

"Güzel" zevk meselesidir; "okunaklı" ölçülebilir. Soluk gri bir yazı iyi bir monitörde hoş görünür ve gün ışığındaki bir telefonda kaybolur — göz kararı seçmek bunu er ya da geç garanti eder.

python3 addons/gohud/tools/check_contrast.py

Her renk çifti ve her düğme durumunun etiketi, üstünde durduğu panele karşı on dört temanın hepsinde WCAG'a göre ölçülür. Yarı saydam renkler önce gerçek arka planlarıyla birleştirilir — doğrudan ölçmek ekranda görünenden daha iyi bir oran bildirir.

Bu yüzden yazı renkleri seçilmez, türetilir: üretici, paletteki değeri bir başlangıç noktası alır ve inebileceği her yüzeyde eşiği geçene kadar açıklığını iter. Paleti değiştirin, kontrast onu izlesin. Kurallar ve arkalarındaki tuzaklar →

Denetimler, sürümler ve bu site

Tek bir giriş noktası bütün denetimleri çalıştırır; her parça diğerlerinin göremediği bir şeyi görür.

bash addons/gohud/tools/check_all.sh

Denetim	Neyi yakalar
Dört ekran boyutunda `run_tests.sh`	Widget davranışı ve yerleşimi, RTL konumları, klavye odağı, çalışma anındaki kaplama kontrastı, her ön ayar
`new_project_check.sh`	Barındıran projeye gizli bağımlılıklar; `--zip` ile yayımlandığı haliyle sürüm, `--export` ile bir Web derlemesi
`check_contrast.py`	Her tema dosyasının WCAG kontrastı; düğme durumları ve yarı saydam paneller dahil
`check_generated.py` · `check_scaffold.sh`	Üretilen temalar paletleriyle uyuşuyor mu; kullan-at bir tema derleniyor ve kontrastı geçiyor mu
`check_package.py`	package.json'dan alınan sürüm, değişiklik günlüğü taşımaları ve ZIP içeriği, geçici kopyalar üzerinde
`check_site.py`	Bu sitenin bağlantıları, çapaları, sayfa dili, sözlüğü ve ayar tabloları

Kaydedilen son çalıştırma — 2026-09-13, Godot 4.7.2, macOS, Compatibility oluşturucu. Boş bir projede 390×844, 844×390, 768×1024 ve 1280×800 boyutlarında 438 denetimin 438'i; GoRuntime autoload ile yine 438'in 438'i; bir Web dışa aktarımı; altı temada sıfır kontrast hatası. Fiziksel Android veya iOS cihazları bu çalıştırmaya dahil değildi.

Sürüm yayımlama

cat addons/gohud/package.json       # { "version": "1.1.0" }
bash addons/gohud/tools/release.sh  # tüm denetimler → ZIP → o ZIP boş bir projede
bash addons/gohud/tools/package.sh  # 1.1.0 → builds/1.1.0/gohud-1.1.0.zip

Sürüm, package.json içinde yazan sürümdür; paketleme onu asla artırmaz. Yeni bir sürüm yayımlamak için önce o numarayı değiştirin. Başarılı bir çalıştırma plugin.cfg ve GoUi.VERSION değerlerini ona eşitler ve o sürüm ilk kez paketlendiğinde CHANGELOG.md içindeki Unreleased notlarını tarihli bir girdiye taşır. Aynı sürümü yeniden paketlemek ZIP'ini baştan oluşturur ve eskisinin yerine koyar. Başarısız bir çalıştırma hiçbir şeyi değiştirmez. ZIP; bu web sitesini, testleri, araçları ve package.json dosyasını dışarıda bırakır.

Bu site

python3 addons/gohud/tools/make_site.py            # sözlük ve kaplama ayarı tabloları, kaynaktan üretilir
python3 addons/gohud/tools/check_site.py           # bağlantılar, çapalar, dil, sözlük, üretilen tablolar
bash addons/gohud/tools/site_shots.sh /tmp/shots   # her sayfanın masaüstü ve telefon ekran görüntüleri

Sayfalar www/ içinde düz HTML'dir — kökte İngilizce, ko/ içinde Korece. Bir GitHub Actions iş akışı bu klasörü sitenin kökü olarak yayımlar.

Tek bir kaynakla sürülen oyun arayüzü

Yeni: arcade, çizgi roman, Material 3 ve çocuklar için bir görünüm

Material 3 — uygulama ekranları için

Kids — oyuncak kutusu

Comic — kalın mürekkep

Arcade — boyalı tuşlar

Arcade: boyalı tuşlar ve kalın panolar

Her tuş boyalı

Gece: arcade_dark

Arcade görünümü nasıl çalışır

Yüz

Okunan etiketler

Pencereler

Çizgi roman: kalın mürekkep ve sert bir gölge

Her widget mürekkepli

Gece: comic_dark

Çizgi roman görünümü nasıl çalışır

Her yüz için tek bir StyleBox

Basılı demek düz demek

Gerisini kaplama mürekkepler

Pencereler bir başlık kutusu alır

Gece gündüz okunaklı

Yerleşim değişmez

Üç ayar ve tek bir çağrı

Bir oyunda nasıl görünüyor

Sizin elinizden aldıkları

Her ölçü bir token'dır

Görünen boyut ≠ basılabilir boyut

Çentikler ve klavyeler

Geri, tek bir şeyi kapatır

Bildirimler girdiyi çalmaz

Simgeler adıyla istenir

On dört görünüm, tek satır

Okunaklılık ölçülerek

gohud kurulumu

Hızlı başlangıç

Görünümü değiştirin — renkleri ve biçimi

Ortaçağ koleksiyonu

Aynı ekran telefonda ve masaüstünde

Aynı sayfa, başka bir görünüm

Kaplamalar — bir Theme'in erişemediği yer

Widget'lar

Beklemek, bildirmek, saymak

Formlar ve listeler

Oyunların gerçekten kullandığı biçimler

Ekranın üstünde

Go HUD Skill

Okunaklılık göz kararı değil, ölçümle

Denetimler, sürümler ve bu site

Sürüm yayımlama

Bu site

Gece: `arcade_dark`

Gece: `comic_dark`