UI di gioco, guidata da una sola risorsa

Come appare dentro un gioco

I preset medievale e sci-fi — schede personaggio, inventari e missioni; moduli, griglie e schede di richiesta; pannelli spigolosi e comandi touch. Cambiare preset è una riga di codice.

Tutti e sei i preset e come cambiarli →

Di che cosa ti solleva

Nella UI di gioco il tempo non se ne va nella forma di un pulsante: se ne va in tutto ciò che si disallinea da un dispositivo all'altro. gohud governa quel disallineamento in un unico punto.

Cambia l'aspetto — colori e forma

Un Theme può ridisegnare solo ciò che disegna il motore. Gli angoli arrotondati sono gli unici angoli che StyleBoxFlat conosce, e il joystick, gli slot rapidi e il coach mark sono disegnati dal codice — quindi un tema da solo non può mai cambiarne la forma. Per questo gohud include i preset: un tema, una skin e un set di icone scelti come un'unica unità.

GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)   # tema, skin e icone insieme

Quelle quattro sono la stessa schermata della galleria. Non cambia una riga di codice — solo il nome del preset. Angoli dei pulsanti, forma degli interruttori, righe delle liste e bordi dei campi si muovono tutti insieme.

Collezione medievale

medieval_dark accosta ferro e cuoio all'oro antico; medieval_light usa pergamena e inchiostro. Le cornici dei menu portano un rivetto e un piccolo ornamento angolare mentre l'HUD sempre visibile resta sobrio; 16 icone incise ridisegnano i nomi degli oggetti, e solo titoli e sottotitoli usano il font Cinzel incluso.

Entrambe le immagini sono examples/medieval/medieval.tscn, costruita con i widget standard. La guida medievale e come creare il tuo regno →

La stessa schermata su telefono e su desktop

Le immagini della galleria sono un telefono in verticale. Qui sotto c'è lo stesso codice a 1280×800 — il contenuto si ferma a una larghezza leggibile (480dp) e si centra, mentre l'HUD resta negli angoli. Il modulo gira attorno ai pezzi flottanti dell'HUD, ma non si sposta se ne è già libero: spingerlo comunque sbilancerebbe il contenuto fuori centro su uno schermo largo.

Lo stesso foglio, un aspetto diverso

Scegline uno da Project Settings → gohud → Theme → Preset, oppure imposta GoConfig.preset. Valorizzare esplicitamente theme, skin o icons ha la precedenza sul preset, così puoi partire da un preset e sovrascriverne uno solo.

Skin — dove un Theme non arriva

Una skin possiede il joystick, le facce degli slot rapidi, l'anello del coach mark, i chip, gli scheletri, gli avvisi, i divisori e le intestazioni di sezione. Estendila e sovrascrivi solo ciò che vuoi cambiare.

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

Tutte e tre si serializzano dentro una risorsa Theme — ed è proprio questo che permette a un tema di cambiare forma, non solo colore. GoSkinSciFi e GoSkinMedieval sono le sottoclassi incluse.

Widget

I pezzi, in una tabella sola. Ognuno nel dettaglio →

Aspettare, dire, contare

Moduli e liste

Forme che i giochi usano davvero

Sopra lo schermo

La leggibilità si misura, non si stima a occhio

"Bello" è gusto; "leggibile" si può misurare. Un testo grigio slavato sembra a posto su un buon monitor e sparisce su un telefono alla luce del sole — scegliere a occhio garantisce che prima o poi succeda.

python3 addons/gohud/tools/check_contrast.py

Ogni coppia di colori e l'etichetta di ogni stato di ogni pulsante sopra il pannello su cui si trova viene misurata rispetto alle WCAG, in tutti e sei i temi. I colori traslucidi vengono prima composti sopra il loro sfondo reale — misurarli direttamente riporterebbe un rapporto migliore di quello che si vede a schermo.

I colori del testo sono quindi derivati, non scelti: il generatore prende la voce della palette come punto di partenza e ne spinge la luminosità finché non supera la soglia su ogni superficie su cui può finire. Cambia la palette e il contrasto la segue. Le regole e le trappole dietro di esse →