Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Utilizzare l'editor di temi

Questo articolo spiega come creare e gestire temi per l'interfaccia utente utilizzando l'editor Godot e il suo editor di temi. Prima di cominciare, consigliamo di prendere familiarità con le basi sulla tematizzazione, leggendo la documentazione Introduzione al GUI skinning.

L'editor di temi è un pannello inferiore che si attiva automaticamente quando si seleziona una risorsa Theme per la modifica. Contiene l'interfaccia utente necessaria per aggiungere, rimuovere e regolare i tipi e gli elementi del tema. Include una sezione di anteprima per testare le modifiche in tempo reale, nonché una finestra di dialogo per eseguire operazioni di massa sugli elementi del tema.

Creare un tema

Come qualsiasi altra risorsa, i temi si possono creare direttamente nel pannello Filesystem facendo clic destro e selezionando Nuova risorsa..., poi selezionando Tema e cliccando su Crea. È particolarmente utile per creare temi per l'intero progetto.

È anche possibile creare i temi da qualsiasi nodo controllo. Seleziona un nodo controllo nella gerarchia della scena, poi nell'ispettore vai alla proprietà theme. Da lì puoi selezionare Nuovo Theme.

../../_images/new_theme.webp

Questo creerà un tema vuoto e aprirà l'editor di temi. Tieni presente che, per impostazione predefinita, le risorse create in questo modo sono incorporate nella scena. Accedi al menu contestuale per salvare il nuovo tema in un file.

Sebbene l'editor di temi fornisca gli strumenti per gestire i tipi e gli elementi del tema, i temi includono anche il font predefinito di riserva che è possibile modificare solo tramite il pannello Ispettore. Lo stesso vale per il contenuto di tipi di risorse complessi, come StyleBox e icone: questi si aprono per la modifica nell'Ispettore.

../../_images/default_font.webp

Panoramica dell'editor di temi

../../_images/theme_editor.webp

L'editor di temi è diviso in due parti principali. L'editor di temi principale, situato in fondo all'editor Godot, serve per creare, modificare ed eliminare rapidamente elementi e tipi del tema. Offre strumenti visivi per selezionare e modificare i controlli, astraendo i concetti sottostanti dei temi. La finestra Gestisci elementi del tema, invece, è pensata per chi desidera modificare i temi manualmente. È utile anche per creare un nuovo tema per l'editor.

Anteprime del tema

Sul lato sinistro dell'editor principale c'è una serie di schede di anteprima. La scheda Anteprima predefinita è visibile fin da subito e contiene gran parte dei controlli utilizzati più frequentemente in vari stati. Le anteprime sono interattive, quindi è possibile visualizzare in anteprima anche gli stati intermedi (ad esempio, al passaggio del mouse).

../../_images/default_preview.webp

È possibile creare schede aggiuntive a partire da qualsiasi scena del progetto. La scena deve avere un nodo controllo come radice per funzionare come anteprima. Per aggiungere una nuova scheda, clicca sul pulsante Aggiungi anteprima e seleziona la scena salvata dal tuo file system.

../../_images/scene_preview.webp

Se apporti modifiche alla scena, queste non saranno automaticamente applicate all'anteprima. Per aggiornare l'anteprima, clicca sul pulsante di ricarica sulla barra degli strumenti.

Le anteprime possono servire anche per selezionare rapidamente il tipo di tema da modificare. Seleziona il selettore dalla barra degli strumenti e passa il mouse sull'area di anteprima per evidenziare i nodi di controllo. I nodi di controllo evidenziati mostrano il nome della classe o la variante di tipo, se disponibile. Cliccando sul controllo evidenziato, questo si apre per la modifica sul lato destro.

../../_images/theme_preview_picker.webp

Tipi e elementi del tema

Sul lato destro dell'editor di temi c'è un elenco dei tipi del tema disponibili nella risorsa tema modificato e il contenuto del tipo selezionato. L'elenco degli elementi nel tipo è suddiviso in diverse schede, corrispondenti a ciascun tipo di dati disponibile nel tema (colori, costanti, stili, ecc.). Se l'opzione Mostra predefiniti è abilitata, per ogni tipo predefinito sono visualizzati, in grigio, i relativi valori predefiniti del tema. Se l'opzione è disabilitata, sono visualizzati solo gli elementi disponibili nel tema modificato stesso.

../../_images/theme_type_editor.webp

È possibile aggiungere singoli elementi del tema predefinito al tema attuale cliccando sul pulsante Sovrascrivi accanto all'elemento. È anche possibile sovrascrivere tutti gli elementi predefiniti del tipo del tema selezionato cliccando sul pulsante Sovrascrivi tutto. Le proprietà sovrascritte si possono rimuovere premendo il pulsante Rimuovi elemento. Le proprietà si possono anche rinominare premendo il pulsante Rinomina elemento e le proprietà completamente personalizzate si possono aggiungere all'elenco tramite il campo di testo sottostante.

Gli elementi del tema sovrascritti si possono modificare direttamente nel pannello di destra, a meno che non siano risorse. Le risorse dispongono di controlli rudimentali, ma si devono modificare nel pannello Ispettore.

../../_images/theme_item_inspector.webp

Gli stylebox offrono una funzionalità esclusiva che permette di fissarne uno dalla lista. Lo stylebox fissato funge da principale e tutti gli stylebox dello stesso tipo vengono aggiornati automaticamente quando se ne modificano le proprietà. Ciò consente di modificare le proprietà di più stylebox allo stesso tempo.

../../_images/theme_pin_the_stylebox.webp

Sebbene i tipi del tema si possano selezionare da un'anteprima, è anche possibile aggiungerli manualmente. Cliccando sul pulsante "più" (+) accanto all'elenco dei tipi si apre il menu Aggiungi tipo di elemento. In questo menu è possibile selezionare un tipo dall'elenco oppure inserire un nome a piacere per creare un tipo personalizzato. Il campo di testo serve anche a filtrare l'elenco dei nodi controllo.

../../_images/add_item_type.webp

Gestire e importare elementi

Cliccando sul pulsante Gestisci elementi si apre la finestra di dialogo Gestisci elementi del tema.

../../_images/manage_items_button.webp

Nella scheda Modifica elementi è possibile visualizzare e aggiungere tipi del tema, nonché visualizzare e modificare gli elementi del tema del tipo selezionato.

../../_images/manage_items.webp

È possibile creare, rinominare e rimuovere i singoli elementi del tema cliccando sul pulsante Aggiungi elemento X corrispondente e specificandone il nome. È anche possibile eliminare in massa gli elementi del tema, in base al tipo di dati (attraverso l'icona del pennello nell'elenco) o alla qualità. Rimuovi elementi di classe rimuoverà tutti gli elementi personalizzati del tema predefinito per un tipo di nodo controllo. Rimuovi elementi personalizzati rimuoverà tutti gli elementi personalizzati del tema per il tipo selezionato. Infine, Rimuovi tutti gli elementi rimuoverà tutto dal tipo.

Dalla scheda Importa elementi è possibile importare elementi di tema da altri temi. Si possono importare dal tema predefinito di Godot, dal tema dell'editor di Godot o da un altro tema personalizzato. Si possono importare elementi singoli o multipli e decidere se copiare o omettere i loro dati. Esistono diversi modi per selezionare e deselezionare gli elementi, tra cui manualmente, per gerarchia, per tipo di dati e tutti gli elementi. Scegliendo di includere i dati, tutti gli elementi del tema verranno copiati così come sono nel tuo tema. Omettendo i dati, verranno creati gli elementi del tipo di dati e del nome corrispondenti, ma rimarranno vuoti, creando una sorta di schema per un tema.

../../_images/import_items.webp