gohud — un kit HUD e UI per Godot 4

Novità: arcade, fumetto, Material 3 e un aspetto per i bambini

Quattro nuove famiglie si aggiungono a default, sci-fi e medievale — ora sono quattordici aspetti inclusi, ognuno scuro e chiaro. Ogni widget, popup e pezzo dell'HUD li adotta senza cambiare il tuo codice: cambia il preset e tutta la schermata lo segue.

La galleria gohud in material_light — pulsanti a pillola, schede piene e colori Material 3 — `material_light`

La galleria gohud in material_dark — le stesse forme Material 3 sulla base scura — `material_dark`

La galleria gohud in kids_light — grossi pulsanti di gelatina color pastello su una pagina solare — `kids_light`

La galleria gohud in kids_dark — la stessa scatola dei giocattoli su una pagina blu notte — `kids_dark`

La galleria gohud in comic_light — contorni d'inchiostro spessi e ombre nette su una pagina color crema carta — `comic_light`

La galleria gohud in comic_dark — contorni crema e un primario giallo su una pagina notturna — `comic_dark`

La galleria gohud in arcade_light — tasti dipinti con una sfumatura e un riflesso lucido, una spessa plancia HUD con cornice blu su una pagina azzurro cielo — `arcade_light`

La galleria gohud in arcade_dark — gli stessi tasti vivaci su una pagina notturna — `arcade_dark`

Material 3 — per le schermate delle app

Material 3 Expressive, misurato sui token M3 ufficiali: pulsanti a pillola con una piastra da 40dp dentro l'area di tocco da 48dp, finestre di dialogo e fogli da 28dp, schede piene, campi con contorno e lo slider Expressive. I componenti per app — barra di navigazione, barra superiore, FAB, barra di ricerca, chip, avanzamento e selettore di data — seguono i token dei componenti M3, e i titoli usano il Roboto incluso. Per negozi, impostazioni, caselle di posta e ogni schermata che deve sembrare un'app.

Bambini — la scatola dei giocattoli

Pensato per i bambini: ogni tasto, riga e pannello è una caramella di gelatina con un contorno spesso e un bordo pieno che affonda quando lo premi, ogni tipo di controllo nel suo colore pastello. Gli slot rapidi sono blocchetti di caramella, i badge sono adesivi, il joystick è un arcobaleno, le finestre hanno un nastro del titolo color sole e un pulsante di chiusura tondo a caramella, e ogni pressione schiaccia la gelatina. Le dimensioni e il font del tuo progetto restano esattamente come erano.

Fumetto — inchiostro deciso

Ogni superficie è una vignetta a fumetti: il suo colore dentro un contorno d'inchiostro spesso, con un'ombra netta dietro che sparisce quando la premi. Un'impostazione accende o spegne tutte le ombre, altre due fissano lo spessore del contorno e la dimensione dell'ombra, e una sola chiamata fa lo stesso per un singolo widget. Le finestre hanno una didascalia del titolo gialla.

Arcade — tasti dipinti

Ogni tasto è dipinto — una sfumatura, un riflesso bianco e un bordo che affonda quando lo premi, dentro un contorno d'inchiostro blu notte — ed etichettato in bianco con un contorno d'inchiostro: verde per giocare, blu per tutto il resto, rosso per eliminare. Le plance sono spesse, una cornice colorata attorno a un fondo chiaro, e le finestre hanno una fascia del titolo dorata e un tasto di chiusura tondo e rosso.

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

Material 3 nel dettaglio → · Bambini nel dettaglio → · L'arcade, widget per widget ↓ · Il fumetto, widget per widget ↓ · Lo stesso popup in tutti e quattordici gli aspetti →

Arcade: tasti dipinti e plance spesse

L'aspetto più recente veste ogni schermata come un cabinato da sala giochi. Ogni tasto è dipinto — una sfumatura da una cima chiara a un fondo più profondo, una pennellata di riflesso bianca e un bordo che affonda quando lo premi, il tutto dentro un contorno d'inchiostro blu notte — e la sua etichetta è bianca con un contorno d'inchiostro. Ogni plancia è spessa: una cornice colorata, con il suo riflesso, attorno a un fondo chiaro. arcade_light mette plance bianche su una pagina azzurro cielo; arcade_dark mette plance blu notte su una pagina notturna. Ogni immagine qui sotto è una vera schermata gohud — lo stesso codice, una riga di preset.

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

La galleria gohud in arcade_light — tasti dipinti verdi, blu, rossi e lavanda e una plancia HUD con cornice blu su una pagina azzurro cielo — `arcade_light` · la galleria

Un foglio inferiore in arcade_light — una spessa plancia incorniciata che sale dal bordo inferiore, con righe a forma di copritasto — `GoSheet`

Un coach mark in arcade_light — un fumetto incorniciato che indica un tasto — `GoCoachMark`

Un cassetto laterale in arcade_dark — una plancia blu notte di righe di navigazione sopra lo schermo oscurato — `GoDrawer`

Un popover in arcade_dark — una nuvoletta incorniciata ancorata al tasto che l'ha aperta — `GoPopover`

Un avviso in arcade_dark — una fascia dorata Level up!, un tasto di chiusura rosso e un tasto verde Great su una plancia blu notte con cornice blu — `GoDialogs.alert()`

Uno snackbar in arcade_light — una plancia bianca con cornice marrone lungo il bordo inferiore, con un'azione Undo — `GoSnackbar`

Ogni tasto dipinto

Pulsanti in arcade_light — Gioca verde, Dettagli blu, un tasto bianco con contorno, Elimina corallo, Elimina per sempre rosso, un tasto compatto lavanda e un tasto disattivato grigio, ognuno dipinto con una sfumatura, un riflesso e un bordo in un contorno blu notte — `GoStyle.button()`

Tab in arcade_light — la tab scelta è un tasto dipinto blu, le altre sono tasti lavanda — `GoStyle.tabs()`

Un controllo segmentato in arcade_light — tasti dipinti separati, quello scelto blu e premuto — Tasti segmentati

Interruttori e caselle di spunta in arcade_light — una guida verde lucida quando è attivo, lavanda quando è spento, una casella verde con la spunta — Interruttori e caselle di spunta

Schede in arcade_light — fondi chiari dentro spesse cornici blu con un riflesso e un bordo — `GoStyle.card()`

Un modulo in arcade_light — un campo bianco incassato, un interruttore e un tasto verde Salva — `GoForm`

Una griglia di scelte in arcade_light — copritasti, quello scelto bordato d'oro su una tinta verde — `GoStyle.choice_grid()`

Una griglia di slot in arcade_light — un inventario di copritasti lucidi con il numero di pezzi — `GoSlotGrid`

Righe di elenco in arcade_light — ogni riga è un copritasto chiaro con un'icona — Righe di elenco

Un selettore di data in arcade_light — giorni a forma di copritasto, il giorno scelto è un tasto dipinto — `GoDatePicker`

Uno slider in arcade_light — un tubo blu lucido in una scanalatura d'inchiostro e una manopola tonda a forma di copritasto — `GoStyle.slider()`

Un gruppo di pulsanti di opzione in arcade_light — copritasti tondi, quello scelto con un punto blu — `GoStyle.radio_group()`

Chip filtro in arcade_light — chip a forma di copritasto, quello scelto tinto di blu con una spunta, e chip rimovibili con una croce — `GoStyle.filter_chip()`

Una barra di ricerca in arcade_light — un campo bianco incassato in un contorno d'inchiostro, con un'icona di ricerca e una di filtro — `GoSearchBar`

Uno stepper in arcade_light — ogni passaggio è un copritasto chiaro, il passaggio aperto mostra il suo tasto verde Next — `GoStepper`

Una classifica in arcade_light — una riga sì e una no è un copritasto in rilievo — `GoTable`

Una barra di navigazione inferiore in arcade_light — l'icona della tab scelta su una pillola blu a forma di copritasto, un badge rosso con il conteggio — `GoNavBar`

Un selettore di ora in arcade_light — l'ora e i minuti su grandi copritasti, tasti AM e PM sopra il quadrante di un orologio — `GoTimePicker`

Un campo codice in arcade_light — otto celle a forma di copritasto, quella in cui si sta scrivendo bordata d'oro — `GoCodeInput`

Un selettore a rullo in arcade_light — la quantità scelta su una fascia a forma di copritasto, le altre che sfumano sopra e sotto — `GoWheelPicker`

Di notte: `arcade_dark`

Su una pagina scura l'inchiostro diventa la pagina stessa, molto più profondo, e le vernici restano altrettanto vivaci.

Pulsanti in arcade_dark — le stesse vernici vivaci su una pagina notturna — `GoStyle.button()` di notte

Barre HUD in arcade_dark — tubi rosso per HP, blu per MP e verde per XP in scanalature incassate — `GoBar`

Schede HUD in arcade_dark — un fondo blu notte in una spessa cornice blu sopra il gioco — `GoStyle.hud_panel()`

Slot rapidi in arcade_dark — copritasti con il numero di pezzi, uno slot in ricarica bordato d'oro — `GoSlot`

Un joystick virtuale in arcade_dark — un pad lucido in un anello d'inchiostro con quattro frecce e una manopola a forma di copritasto — `GoJoystick`

Avvisi in arcade_dark — piccole plance incorniciate di giallo, verde, rosso e blu — Avvisi

Pulsanti di azione flottanti in arcade_dark — tasti dipinti d'oro con un riflesso — `GoFab`

Un calendario delle ricompense in arcade_dark — giorni a forma di copritasto, oggi bordato d'oro — `GoRewardCalendar`

Un controllo segmentato in arcade_dark — il tasto Day scelto dipinto di blu, Week e Month lavanda, tutte le etichette bianche — Tasti segmentati

Una vista a tab in arcade_dark — tasti di tab dipinti sopra righe di elementi che sono copritasti blu notte — `GoTabView`

Un elenco scorrevole in arcade_dark — righe di elementi su copritasti blu notte e una fila di chip filtro, quello scelto blu — `GoScroll`

Interruttori e caselle di spunta in arcade_dark — una guida verde lucida quando è attivo, lavanda quando è spento — Interruttori e caselle di spunta

Chip di rarità in arcade_dark — piccole targhette dipinte da Common a Cursed — `GoStyle.chip()`

Una griglia di slot in arcade_dark — un inventario di copritasti blu notte con icone bianche e il numero di pezzi — `GoSlotGrid`

Uno slider di intervallo in arcade_dark — un tratto blu tra due manopole lucide in una scanalatura scura — `GoRangeSlider`

Paginazione in arcade_dark — la pagina corrente è un tasto dipinto di verde — `GoPagination`

GoBadge

Come funziona l'aspetto arcade

La superficie

Ogni tasto e ogni plancia è un GoStyleBoxArcade: un contorno d'inchiostro, un corpo sfumato, un bordo e un riflesso, disegnati dentro il rettangolo del controllo stesso — un tasto mantiene la sua dimensione da uno stato all'altro, e la pressione lo fa solo affondare.

Etichette che si leggono

Un'etichetta bianca con un contorno d'inchiostro si legge su qualsiasi vernice da cui il contorno la stacca — le WCAG contano il contorno come parte della lettera. Ogni vernice viene spostata finché la sua etichetta non supera 4,6:1 a ogni altezza della sfumatura.

Finestre

Il titolo di una finestra sta su una fascia dorata, in lettere bianche con il contorno d'inchiostro, accanto a un tasto di chiusura tondo e rosso. Finestre di dialogo, fogli, cassetti e popover sono plance spesse e incorniciate.

Un singolo tasto può avere il suo colore — un tasto arancione del negozio in un menu di pausa:

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

Arcade nel dettaglio → · Lo stesso popup in tutti e quattordici gli aspetti →

Fumetto: inchiostro deciso e un'ombra netta

L'aspetto fumetto disegna ogni superficie come una vignetta a fumetti — il suo colore dentro un contorno d'inchiostro spesso, con un'ombra netta e piena proiettata in basso a destra. comic_light inchiostra in nero su una pagina color crema carta con un primario cobalto; comic_dark inchiostra in crema su una pagina notturna con un primario giallo. Ogni immagine qui sotto è una vera schermata gohud — lo stesso codice, una riga di preset.

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

La galleria gohud in comic_light — tasti, righe e barre inchiostrati con ombre nette su una pagina color crema carta — `comic_light` · la galleria

La galleria gohud in comic_dark — inchiostro crema e un primario giallo su una pagina notturna — `comic_dark` · la galleria

Un foglio inferiore in comic_light — un pannello inchiostrato che sale dal bordo inferiore, con righe inchiostrate — `GoSheet`

Un coach mark in comic_light — una nuvoletta inchiostrata che indica un pulsante — `GoCoachMark`

Un cassetto laterale in comic_dark — un pannello inchiostrato di righe di navigazione sopra lo schermo oscurato — `GoDrawer`

Un popover in comic_dark — una nuvoletta inchiostrata ancorata al pulsante che l'ha aperta — `GoPopover`

Pulsanti, interruttori, tab, slider, schede, moduli, tabelle, selettori e chip indossano tutti l'inchiostro — non devi stilizzarli uno per uno. Premi un tasto e la sua ombra sparisce: la superficie affonda al suo posto, come un timbro. Le superfici disattivate perdono l'ombra e sbiadiscono, così ciò che si può premere si distingue da ciò che non si può.

Pulsanti in comic_light — tasti primario, secondario, con contorno, di pericolo, compatto, spoglio e disattivato, ognuno in un contorno nero spesso con un'ombra netta — `GoStyle.button()` — ogni tipo

Interruttori e caselle di controllo in comic_light — una guida e una manopola inchiostrate, caselle inchiostrate con un segno di spunta — Interruttori e caselle di controllo

Pulsanti di opzione in comic_light — anelli inchiostrati, quello scelto con un punto pieno — Pulsanti di opzione

Tab in comic_light — la tab scelta è un pannello inchiostrato, le altre poggiano su una sottolineatura d'inchiostro — `GoStyle.tabs()`

Un controllo segmentato in comic_light — celle inchiostrate, quella scelta piena — Pillole segmentate

Uno slider in comic_light — una scanalatura inchiostrata, un sottile riempimento d'accento e una maniglia inchiostrata — `GoStyle.slider()`

Menu a tendina in comic_light — tasti inchiostrati con una freccetta — Menu a tendina

Una scheda in comic_light — un pannello bianco in un contorno spesso con un'ombra netta — `GoStyle.card()`

Un modulo in comic_light — un campo inchiostrato con un suggerimento, un interruttore e un tasto Salva inchiostrato — `GoForm`

Righe di elenco in comic_light — ogni riga è una striscia inchiostrata con un'icona, un sottotitolo o un'etichetta di pericolo — Righe di elenco

Una tabella in comic_light — un'intestazione sopra un filetto d'inchiostro, e ogni riga di punteggio è una striscia inchiostrata — `GoTable`

Un selettore di data in comic_light — celle dei giorni inchiostrate, il giorno scelto pieno — `GoDatePicker`

Un selettore d'ora in comic_light — caselle di ore e minuti inchiostrate, tasti AM e PM e il quadrante di un orologio — `GoTimePicker`

Uno stepper in comic_light — righe dei passaggi inchiostrate, il passaggio completato spuntato e quello successivo sbiadito — `GoStepper`

Chip di filtro e di input in comic_light — pillole inchiostrate, il filtro scelto colorato e con una spunta — Chip di filtro

Una barra di navigazione in comic_light — un filetto d'inchiostro in alto, la tab corrente in una pillola inchiostrata e un badge su Avvisi — `GoNavBar`

Un gruppo di input in comic_light — un campo e il suo tasto Invia saldati in un'unica forma inchiostrata — `GoInputGroup`

Un pulsante diviso in comic_light — un'azione e una freccia di menu come due metà inchiostrate — `GoSplitButton`

La paginazione in comic_light — la pagina corrente è un tasto inchiostrato con un'ombra netta — `GoPagination`

Di notte: `comic_dark`

Su una pagina scura un contorno nero sparirebbe, così comic_dark lo disegna in crema e proietta un'ombra tenue tinta dello stesso inchiostro. I pezzi dell'HUD — slot rapidi, barre, il joystick e il calendario delle ricompense — seguono le stesse regole.

Pulsanti in comic_dark — contorni crema, un primario giallo e tenui ombre nette su una pagina notturna — `GoStyle.button()` di notte

Slot rapidi in comic_dark — blocchi inchiostrati con un contatore di pila e una ricarica, gli slot accesi bordati di giallo — `GoSlot`

Barre dell'HUD in comic_dark — HP, MP e XP in scanalature inchiostrate di crema — `GoBar`

Un joystick virtuale in comic_dark — un anello crema e una manopola che proietta un'ombra — `GoJoystick`

Avvisi in comic_dark — pannelli di informazione, successo, attenzione e pericolo in inchiostro crema — Avvisi

Una griglia di slot in comic_dark — un inventario di blocchi inchiostrati — `GoSlotGrid`

Un calendario delle ricompense in comic_dark — celle dei giorni inchiostrate, i giorni riscossi spuntati e oggi bordato di giallo — `GoRewardCalendar`

Chip di rarità in comic_dark — pillole inchiostrate, ognuna tinta del proprio colore — Chip

Uno slider di intervallo in comic_dark — due maniglie inchiostrate su una scanalatura inchiostrata — `GoRangeSlider`

Una barra di ricerca in comic_dark — una barra inchiostrata con le icone di ricerca e di filtro — `GoSearchBar`

Pulsanti d'azione flottanti in comic_dark — tasti gialli in inchiostro crema con ombre nette — `GoFab`

Come funziona l'aspetto fumetto

Uno StyleBox per ogni superficie

Ogni superficie è un GoStyleBoxComic: un riempimento, un contorno e un'ombra, disegnati dentro il rettangolo del controllo stesso. Legge le dimensioni del contorno e dell'ombra da GoConfig ogni volta che disegna, così una sola impostazione cambia tutta la schermata in un colpo.

Premuto vuol dire piatto

Un tasto premuto perde l'ombra e scende al suo posto. L'hover mantiene l'ombra; il focus aggiunge un anello d'inchiostro interno che non copre mai il contorno; le superfici disattivate perdono l'ombra e sbiadiscono.

La skin inchiostra il resto

GoSkinComic inchiostra ciò che disegna il codice: slot rapidi, chip, badge, avatar, notifiche, la barra di navigazione, il FAB, le celle delle date e il joystick, la cui manopola proietta un'ombra.

Le finestre hanno una didascalia

Il titolo di una finestra sta su una didascalia gialla, come il riquadro del narratore in un fumetto, accanto a un pulsante di chiusura tondo e inchiostrato. Dialoghi, fogli, cassetti e popover sono pannelli inchiostrati opachi.

Leggibile di giorno e di notte

Entrambe le palette superano gli stessi controlli di contrasto WCAG di ogni altro preset, compresi i tasti premuti e disattivati. Quando il colore di una didascalia sarebbe troppo vicino a quello della pagina, il suo contorno ripiega sul colore della pagina.

Nessun cambio di layout

Il contorno e l'ombra stanno dentro ogni controllo e il padding resta quello dato dal tema, così una schermata impaginata con un altro aspetto conserva il suo layout — e il font del tuo progetto.

Tre impostazioni e una chiamata

Tre impostazioni di GoConfig cambiano tutte le superfici a fumetto insieme. Non si ricostruisce nulla — la schermata si ridisegna appena le imposti.

GoUi.config.comic_border_width = 2.0   # il contorno (dp) — 3 di default
GoUi.config.comic_shadow_size = 6.0    # l'ombra (dp) — 4 di default
GoUi.config.comic_shadow = false       # nessuna ombra da nessuna parte

Un singolo widget può fare di testa sua, qualunque cosa dicano le impostazioni. Passa true come ultimo argomento per includere tutto ciò che contiene.

GoStyle.comic_shadow(skip_button, false)     # questo pulsante resta piatto
GoStyle.comic_shadow(card, true, true)       # questa scheda e tutto ciò che contiene mantengono l'ombra
GoStyle.comic_border(title, 5.0)             # un contorno più spesso su questo

Crea un fumetto tutto tuo. tools/new_theme.py inked --from comic_light copia la palette; cambia i colori della carta, dell'inchiostro e del primario ed esegui tools/make_theme.py inked. L'inchiostro, l'ombra e la skin arrivano da sé.

Fumetto nel dettaglio → · Lo stesso popup in tutti e quattordici gli aspetti →

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.

tema medievale di gohud — una scheda personaggio con barre di salute, mana e vigore, una bisaccia di slot rapidi e un diario delle missioni in cornici d'oro forgiato — **Medievale** — personaggio, inventario e missioni

tema medievale di gohud — un pannello di inserimento con campo nome, interruttore, caselle di spunta e cursore del volume, una griglia di riquadri e una scheda di richiesta per l'invito al gruppo con Accetta e Rifiuta — **Medievale** — moduli, griglie e schede di richiesta

tema sci-fi di gohud — un pannello di comandi touch con angoli smussati, joystick esagonale, selettore Fisso / Segui / Relativo e pulsanti d'azione rotondi — **Sci-fi** — pannelli spigolosi e comandi touch

Tutti e quattordici 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.

Ogni misura è un token

Spaziature, angoli e dimensioni del testo si chiamano per nome, non si scrivono come numeri. Cambia il tema e l'intera schermata si muove con lui.

Dimensione visibile ≠ dimensione premibile

Un pulsante di chiusura sembra 36dp ma la sua area di tocco è 48dp. Dove slot affollati si sovrappongono, la pressione va a quello con il centro più vicino.

Notch e tastiere

I pezzi dell'HUD stanno dentro l'area sicura, e un campo di inserimento si solleva sopra la tastiera virtuale quando compare.

Indietro chiude una cosa sola

Esc e il tasto Indietro di Android chiudono solo la superficie più in alto. Le finestre impilate non spariscono tutte insieme.

Le notifiche non rubano l'input

Premi attraverso una snackbar e il pulsante sottostante la riceve. Nemmeno il focus viene sottratto.

Le icone si chiedono per nome

I widget conoscono solo GoIconSet.CLOSE. Cambia il set e ogni disegno cambia senza toccare una riga di codice. Icone →

Quattordici aspetti, una riga

GoUi.use_preset() cambia insieme tema, skin e icone — cornici arrotondate, smussate in stile sci-fi, forgiate in stile medievale, i componenti per app di Material 3, le caramelle di gelatina dei bambini, l'inchiostro del fumetto o la vernice dell'arcade.

Leggibile per misura

Ogni tema è verificato rispetto alle WCAG, inclusi gli stati dei pulsanti e i pannelli HUD traslucidi sopra bianco puro e nero puro.

Tutto funziona senza abilitare il plugin. Abilitarlo aggiunge un autoload GoRuntime che tiene traccia della dimensione della finestra, della scala dp e dell'altezza della tastiera, più le impostazioni di progetto per la risorsa di configurazione e per il preset — comodità, non requisiti.

Installare gohud

Due strade. Falla fare al tuo agente IA, oppure metti la cartella nel progetto — non c'è altro da configurare.

Installazione

Avvio rapido

Cinque righe mettono a schermo una schermata con il tema. Il percorso completo è nella pagina di installazione.

Avvio rapido

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

Preset	Aspetto
`default_dark`	Il gohud originale — angoli arrotondati, accento blu tenue
`default_light`	Le stesse forme su una palette chiara
`scifi_dark`	Angoli smussati, bordi al neon ciano con bagliore, joystick esagonale, staffe di mira
`scifi_light`	Le stesse forme spigolose in una palette luminosa da progetto tecnico
`medieval_dark`	Ferro e cuoio scuri, cornici in oro antico, rivetti, icone incise, titoli in Cinzel
`medieval_light`	Pergamena, inchiostro e bronzo con le stesse cornici forgiate
`material_light` Nuovo	Material 3 per le schermate delle app — pulsanti a pillola, finestre di dialogo da 28dp, schede piene, la barra di navigazione, il FAB e la barra di ricerca di un'app, Roboto
`material_dark` Nuovo	Le stesse forme Material 3 sulla base scura
`kids_light` Nuovo	La scatola dei giocattoli per bambini — tasti di caramella gommosa con un contorno spesso e un bordo che affonda quando lo premi, colori pastello, una pagina solare
`kids_dark` Nuovo	La stessa scatola dei giocattoli su una pagina blu notte
`comic_light` Nuovo	Vignette a fumetti — un contorno d'inchiostro spesso e un'ombra netta su ogni superficie, pannelli bianchi su una pagina color crema carta; l'ombra, la sua dimensione e lo spessore del contorno sono impostazioni
`comic_dark` Nuovo	Lo stesso inchiostro su una pagina notturna — contorni crema e un primario giallo
`arcade_light` Nuovo	Un cabinato da sala giochi — ogni tasto dipinto con una sfumatura, un riflesso e un bordo, etichettato in bianco con un contorno d'inchiostro; spesse plance incorniciate su una pagina azzurro cielo, una fascia del titolo dorata sulle finestre
`arcade_dark` Nuovo	Gli stessi tasti vivaci su plance blu notte e una pagina notturna

La galleria di gohud con il preset default_dark — angoli arrotondati, accento blu — `default_dark` — angoli arrotondati, accento blu tenue

preset default_light — le stesse forme su una palette chiara — `default_light` — stesse forme, palette chiara

preset scifi_dark — angoli smussati e neon ciano — `scifi_dark` — angoli smussati, neon ciano

preset scifi_light — le stesse forme spigolose in una palette da progetto tecnico — `scifi_light` — stesse forme spigolose, palette da progetto tecnico

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.

medieval_dark — scheda personaggio, bisaccia di slot rapidi e diario delle missioni — `medieval_dark` — ferro e cuoio

medieval_light — le stesse schermate di personaggio, bisaccia e missioni su pergamena — `medieval_light` — pergamena e inchiostro

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.

default_dark a 1280x800 — contenuto centrato, HUD negli angoli — `default_dark` · 1280×800

scifi_dark a 1280x800 — stesso impianto con pannelli smussati e neon — `scifi_dark` · 1280×800

Lo stesso foglio, un aspetto diverso

Un foglio inferiore in default_dark — Default — scheda arrotondata, riga di ricerca e piè di pagina fissi

Un foglio inferiore in scifi_dark — bordo d'accento al neon lungo il lato superiore — Sci-fi — bordo d'accento in alto, angoli tagliati, bagliore

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.

Un tema nuovo è un solo file JSON. new_theme.py kingdom --from medieval_dark scrive una palette che esplicita ogni valore ereditato; make_theme.py kingdom costruisce il tema, la grafica dei controlli e le manopole della sua skin, e il preset compare nel selettore. Ogni impostazione e ogni manopola →

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

Classe	Forme che sa creare
`GoStyleBoxCut`	Angoli tagliati in diagonale (smusso), un bordo d'accento ispessito, un bagliore esterno
`GoStyleBoxBracket`	Solo segni agli angoli, senza racchiudere il contenuto
`GoStyleBoxMedieval`	Una cornice forgiata con rivetti, incisione agli angoli, una luce di bisello e la grana del materiale
`GoStyleBoxJelly`	Una caramella di gelatina — un contorno spesso, un bordo pieno che affonda quando lo premi, un corpo più chiaro in alto e un riflesso bianco
`GoStyleBoxComic`	Una vignetta a fumetti — un contorno d'inchiostro spesso e un'ombra proiettata netta, entrambi dimensionati da `GoConfig` mentre il gioco gira
`GoStyleBoxArcade`	Un tasto o una plancia da sala giochi — un corpo sfumato, un riflesso bianco, un bordo che affonda quando lo premi e un contorno d'inchiostro; una plancia aggiunge una spessa cornice colorata attorno a un fondo chiaro

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

Slot rapidi, un joystick e un chip disegnati da ogni skin inclusa — default, bambini, Material, medievale e sci-fi — Che cosa disegna una skin — default, bambini, Material, medievale, sci-fi

Slot rapidi, un joystick e un chip disegnati dalla skin fumetto — contorni inchiostrati e ombre nette — …e la skin fumetto

Slot rapidi, un joystick e un chip disegnati dalla skin arcade — copritasti lucidi e un pad con quattro frecce — …e la skin arcade

GoStyle.box() restituisce sempre uno StyleBoxFlat, perché il codice chiamante lo riceve e ne regola bg_color o corner_radius. Usa GoStyle.surface() quando una forma personalizzata deve sopravvivere.

Widget

I pezzi, in una tabella sola. Ognuno nel dettaglio → · Ogni widget con un'immagine → · Popup e finestre di dialogo, la guida completa →

Classe	Base	Cosa fa
`GoSurface`	Control	Guscio della scheda flottante — collocazione al centro, in basso o ancorata, intestazione e piè di pagina fissi, corpo scorrevole, ridimensionamento con il trascinamento
`GoSheet`	CanvasLayer	Pagine che salgono dal basso, su un layer proprio così da stare sopra l'HUD
`GoDialogs`	Node	Conferme e avvisi da mettere in `await`; `destructive` per le azioni irreversibili
`GoForm`	MarginContainer	Moduli con larghezza limitata che evitano la tastiera virtuale e, con `avoid_hud`, l'HUD
`GoScroll`	ScrollContainer	Scorrimento touch; la barra di scorrimento si infila nel margine interno della scheda
`GoNotice`	PanelContainer	Una snackbar che non prende né input né focus
`GoPromptCard`	PanelContainer	Una domanda che non blocca il gioco
`GoCoachMark`	Control	Un tour guidato che indica i controlli veri; premere il bersaglio fa avanzare
`GoHudAnchor`	Control	Fissa i pezzi dell'HUD in uno dei nove punti dell'area sicura
`GoBar`	Control	Barre di salute, mana ed esperienza con variazioni smorzate
`GoSlot`	Button	Uno slot rapido — icona, quantità, ricarica e scorciatoia su una sola faccia
`GoJoystick`	Control	Stick virtuale in modalità fissa, segui o relativa
`GoIconButton`	Button	Sembra piccolo, si preme grande
`GoStyle`	statico	Pulsanti, righe di lista, campi, chip, tabelle, schede e altro, fatti tutti nello stesso modo

Aspettare, dire, contare

Classe	Base	Cosa fa
`GoSnackbar`	Node	il messaggio che si colloca da sé
`GoSpinner`	Control	un'attesa di cui non si vede la fine
`GoBadge`	PanelContainer	il puntino dei non letti, l'etichetta NUOVO, il 99+

Moduli e liste

Classe	Base	Cosa fa
`GoField`	VBoxContainer	la riga che può essere sbagliata
`GoInputGroup`	HBoxContainer	un campo saldato al suo pulsante
`GoCombobox`	Button	un selettore che cerca
`GoCodeInput`	VBoxContainer	codici coupon e codici regalo
`GoTable`	VBoxContainer	intestazioni ordinabili, righe selezionabili
`GoPagination`	HBoxContainer	pagine, oppure una riga Altro

Forme che i giochi usano davvero

Classe	Base	Cosa fa
`GoRewardCalendar`	VBoxContainer	presenze giornaliere
`GoRadar` · `GoDonut`	Control	le statistiche a colpo d'occhio
`GoCarousel`	VBoxContainer	banner e selezione del personaggio
`GoKbd`	HBoxContainer	suggerimenti dei tasti che non mentono

Sopra lo schermo

Classe	Base	Cosa fa
`GoDrawer`	CanvasLayer	il pannello laterale
`GoPopover`	RefCounted	la scheda ancorata
`GoContextMenu`	RefCounted	pressione prolungata e clic destro
`GoConsole`	CanvasLayer	la console per lo sviluppo

Go HUD Skill

gohud include una skill IA: tutta l'API, modelli pronti all'uso e un avviatore di anteprima. Incolla un blocco nel tuo agente: installa gohud e sa come usarlo.

Go HUD Skill

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 quattordici 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 →

Verifiche, release e questo sito

Un unico punto d'ingresso esegue tutte le verifiche; ogni parte vede qualcosa che le altre non vedono.

bash addons/gohud/tools/check_all.sh

Verifica	Che cosa intercetta
`run_tests.sh` a quattro dimensioni di schermo	Comportamento e disposizione dei widget, posizioni RTL, focus da tastiera, contrasto della skin a runtime, ogni preset
`new_project_check.sh`	Dipendenze nascoste da un progetto ospite; con `--zip` la release così com'è distribuita, con `--export` una build Web
`check_contrast.py`	Contrasto WCAG di ogni file di tema, stati dei pulsanti e pannelli traslucidi inclusi
`check_generated.py` · `check_scaffold.sh`	I temi generati corrispondono alle loro palette; un tema usa e getta si genera e supera il contrasto
`check_package.py`	La versione presa da package.json, spostamenti nel changelog e contenuto dello ZIP, in copie temporanee
`check_site.py`	Link, ancore, lingua della pagina, glossario e tabelle delle manopole di questo sito

Ultima esecuzione registrata — 2026-09-13, Godot 4.7.2, macOS, renderer Compatibility. 438 verifiche su 438 a 390×844, 844×390, 768×1024 e 1280×800 in un progetto vuoto; di nuovo 438 su 438 con l'autoload GoRuntime; un export Web; zero fallimenti di contrasto sui sei temi. I dispositivi fisici Android o iOS non facevano parte di questa esecuzione.

Versioni di release

cat addons/gohud/package.json       # { "version": "1.1.0" }
bash addons/gohud/tools/release.sh  # tutti i controlli → ZIP → quello ZIP in un progetto vuoto
bash addons/gohud/tools/package.sh  # 1.1.0 → builds/1.1.0/gohud-1.1.0.zip

La versione è quella scritta in package.json: il packaging non la incrementa mai. Per pubblicare una nuova versione, cambia prima quel numero. Un'esecuzione riuscita allinea plugin.cfg e GoUi.VERSION a quel valore e, la prima volta che quella versione viene impacchettata, sposta le note Unreleased di CHANGELOG.md in una voce datata. Impacchettare di nuovo la stessa versione ricostruisce il suo ZIP e sostituisce quello precedente. Un'esecuzione fallita non cambia nulla. Lo ZIP lascia fuori questo sito, i test, gli strumenti e package.json.

Questo sito

python3 addons/gohud/tools/make_site.py            # glossario e tabelle delle manopole delle skin, generati dai sorgenti
python3 addons/gohud/tools/check_site.py           # link, ancore, lingua, glossario, tabelle generate
bash addons/gohud/tools/site_shots.sh /tmp/shots   # screenshot desktop e telefono di ogni pagina

Le pagine sono semplice HTML dentro www/ — l'inglese nella radice, il coreano in ko/. Un workflow di GitHub Actions pubblica quella cartella come radice del sito.

UI di gioco, guidata da una sola risorsa

Novità: arcade, fumetto, Material 3 e un aspetto per i bambini

Material 3 — per le schermate delle app

Bambini — la scatola dei giocattoli

Fumetto — inchiostro deciso

Arcade — tasti dipinti

Arcade: tasti dipinti e plance spesse

Ogni tasto dipinto

Di notte: arcade_dark

Come funziona l'aspetto arcade

La superficie

Etichette che si leggono

Finestre

Fumetto: inchiostro deciso e un'ombra netta

Ogni widget, inchiostrato

Di notte: comic_dark

Come funziona l'aspetto fumetto

Uno StyleBox per ogni superficie

Premuto vuol dire piatto

La skin inchiostra il resto

Le finestre hanno una didascalia

Leggibile di giorno e di notte

Nessun cambio di layout

Tre impostazioni e una chiamata

Come appare dentro un gioco

Di che cosa ti solleva

Ogni misura è un token

Dimensione visibile ≠ dimensione premibile

Notch e tastiere

Indietro chiude una cosa sola

Le notifiche non rubano l'input

Le icone si chiedono per nome

Quattordici aspetti, una riga

Leggibile per misura

Installare gohud

Avvio rapido

Cambia l'aspetto — colori e forma

Collezione medievale

La stessa schermata su telefono e su desktop

Lo stesso foglio, un aspetto diverso

Skin — dove un Theme non arriva

Widget

Aspettare, dire, contare

Moduli e liste

Forme che i giochi usano davvero

Sopra lo schermo

Go HUD Skill

La leggibilità si misura, non si stima a occhio

Verifiche, release e questo sito

Versioni di release

Questo sito

Di notte: `arcade_dark`

Di notte: `comic_dark`