Importare SVG in Godot: texture e icone nitide

L'importazione SVG di Godot normalmente trasforma l'SVG in pixel quando la risorsa viene importata. Ingrandire quella texture può quindi produrre un risultato sfocato anche quando la sorgente contiene tracciati vettoriali puliti. Per le icone SVG che devono adattarsi al ridimensionamento del viewport, l'importatore attuale offre anche DPITexture, che può rasterizzare nuovamente la sorgente con un fattore di sovracampionamento diverso. Godot documenta entrambi i percorsi nella guida all'importazione delle immagini.

Inizia controllando la risorsa importata e il modo in cui il progetto la ridimensiona. Ricalcare di nuovo un SVG già valido non corregge una texture a bassa risoluzione estesa su uno schermo più grande.

Scegli il tipo di importazione SVG in base alla visualizzazione

Le due scelte seguenti descrivono i tipi di risorsa del pannello Import. DPITexture eredita a sua volta da Texture2D, quindi non sono famiglie di classi indipendenti. Il riferimento di DPITexture indica inoltre che la classe è sperimentale; consulta la documentazione corrispondente alla versione di Godot del progetto prima di adottarla.

L'importazione come texture fornisce una risorsa texture. Considera modifica dei tracciati, forme di collisione e prestazioni come requisiti separati; un nome di file SVG non dimostra che vengano gestiti. Per una scena nel browser, confronta i percorsi di geometria e texture di PixiJS per vedere come lo stesso SVG può arrivare al renderer in modo diverso.

La sorgente SVG e i suoi pixel renderizzati

Controlla prima un'importazione Texture2D predefinita

Usa una risorsa rappresentativa prima di cambiare un'intera cartella di icone. Scegli una forma con un bordo curvo, uno spazio stretto e gli eventuali piccoli dettagli importanti per l'interfaccia.

1. Inserisci l'SVG nel progetto e selezionalo nel pannello FileSystem.
2. Apri il pannello Import e verifica che il tipo di importazione sia Texture2D.
3. Controlla SVG > Scale e Process > Size Limit, poi reimporta dopo aver modificato un'opzione.
4. Inserisci la texture nello sprite o componente dell'interfaccia previsto e controllane la dimensione visualizzata.

SVG > Scale cambia la dimensione di rasterizzazione; un valore maggiore crea un'immagine più grande. Influisce anche sulle dimensioni della texture in 2D, quindi ricontrolla le dimensioni del nodo o del layout dopo averlo modificato. Process > Size Limit può limitare le dimensioni importate. Entrambi i controlli sono descritti nel riferimento dell'importatore di texture.

Come semplice esempio dimensionale, un raster largo 32 pixel visualizzato su 128 pixel dello schermo viene ingrandito. Le curve vettoriali della sorgente non aggiungono pixel a quel raster già importato. Genera una texture adatta a quell'utilizzo oppure prova DPITexture quando il sovracampionamento è adatto all'interfaccia.

Evita di aumentare la scala di ogni SVG con un moltiplicatore arbitrariamente grande. Stabilisci prima l'utilizzo massimo effettivo, poi controlla anche quello minimo. Una risorsa che appare bene in una grande anteprima dell'inventario può perdere uno spazio stretto quando viene mostrata su un pulsante minuscolo.

Usa DPITexture con le impostazioni di sovracampionamento giuste

Per provare il percorso adattivo, seleziona l'SVG nel pannello FileSystem, cambia il tipo di importazione in DPITexture e reimporta. Riutilizza la stessa posizione nell'interfaccia, così il confronto risponde a una domanda: cambiare il percorso di rasterizzazione risolve la discrepanza alle scale previste?

DPITexture conserva i dati sorgente SVG e può produrre un raster adeguato al sovracampionamento. Il suo base_scale controlla la scala della texture sorgente; non trasforma la risorsa in tracciati modificabili nella scena. Consulta la documentazione della classe DPITexture.

Ci sono due casi di ridimensionamento da controllare:

• Ridimensionamento del viewport: il sovracampionamento delle immagini di Godot può renderizzare nuovamente la sorgente vettoriale quando cambia il fattore di scala del viewport. Abilitalo per un SVG importando l'immagine come DPITexture.
• Ridimensionamento del nodo: il sovracampionamento basato su Scale di un Node2D o Control è disattivato per impostazione predefinita. Abilita Oversampling with Scale sul nodo pertinente quando ti serve quel comportamento.

La guida al sovracampionamento di Godot spiega questa distinzione. Segnala anche che frequenti cambiamenti di scala possono richiedere lavoro alla CPU perché la texture viene renderizzata di nuovo. Prova il ridimensionamento animato nella scena che distribuirai prima di applicare ampiamente l'opzione.

L'editor 2D può ricampionare automaticamente mentre cambi lo zoom, offrendo un'anteprima utile. Esegui anche il progetto e prova il comportamento effettivo del viewport. Con la modalità di adattamento Viewport, la scena viene prima disegnata alla dimensione di base del viewport e poi ridimensionata alla finestra; quel ridimensionamento finale può ancora determinare l'aspetto dell'interfaccia. La documentazione delle modalità di adattamento descrive la differenza rispetto alla modalità Canvas Items.

Prepara grafica che Godot può riprodurre

Cambiare l'importatore risolve un problema di dimensione del rendering. Oggetti mancanti o una sagoma cambiata richiedono un controllo della grafica sorgente.

Cerca tracciati veri

Apri l'SVG in un editor vettoriale e seleziona la grafica visibile. Se l'intera icona è un'unica bitmap inserita, indaga prima di regolare Godot. L'elemento SVG <image> può contenere contenuti raster, come spiega il riferimento dell'elemento su MDN. Rasterizzare di nuovo quel contenitore non può ricostruire le curve pulite che un piccolo PNG incorporato non ha mai contenuto.

Usa la lista di controllo dei raster incorporati per distinguere i pixel inseriti dalle forme modificabili. Se esiste un originale vettoriale, esporta da quello. Se prepari un insieme, mantieni tela e margini coerenti usando la guida SVG per i kit di interfaccia.

Converti il testo decorativo in tracciati

L'importatore SVG di Godot non renderizza il testo SVG modificabile. Converti le scritte decorative in tracciati nella copia da consegnare, conservando un originale con testo modificabile. In Inkscape il comando pertinente è Path > Object to Path. Godot include la procedura in Importare immagini SVG con testo.

Per l'etichetta di un pulsante che richiede localizzazione o modifiche frequenti, mantienila come testo dell'interfaccia e importa l'icona separatamente. Convertire un'intera interfaccia in contorni renderebbe più difficili quei cambiamenti successivi.

Prova separatamente gli effetti complessi

Godot usa ThorVG per il rendering SVG. L'interprete SVG di ThorVG ha limiti di supporto definiti; la sua panoramica SVG elenca animazione, interattività e multimedia tra le funzionalità non supportate. Le capacità generali del motore ThorVG non garantiscono che una particolare funzionalità SVG operi tramite l'importatore di Godot.

Se un distintivo perde un dettaglio, confronta l'SVG esportato con una copia composta da semplici forme riempite. Aggiungi di nuovo gli effetti necessari uno alla volta. Conserva un'esportazione raster quando mantiene la grafica complessa in modo più affidabile e il progetto non necessita di forme sorgente scalabili.

Non eliminare un'apertura stretta solo per ridurre la complessità del file. Il criterio di accettazione è la sagoma prevista, compresi gli spazi negativi.

Diagnostica la prima discrepanza visibile

Annota file sorgente, tipo di importazione, scala SVG, scala del nodo, impostazioni del viewport e dimensione di visualizzazione prevista. Poi cambia l'impostazione collegata al sintomo.

In Godot 4, il filtraggio delle texture 2D si configura tramite le proprietà CanvasItem, con un valore predefinito del progetto. Un tutorial più vecchio potrebbe indicare un'impostazione di importazione che non si trova più lì. Il manuale di importazione delle immagini documenta il cambiamento. Il filtraggio può cambiare l'aspetto dei pixel esistenti; non ripara dettagli mancanti nella sorgente.

Per una sfocatura presente anche fuori da Godot, segui la più generale diagnosi degli SVG pixelati. Aiuta a capire se il bordo difettoso esiste già prima che il motore riceva il file.

Valuta l'icona nella sua interfaccia effettiva

Prova le posizioni più piccole e più grandi previste per l'icona su sfondi sia chiari sia scuri. Controlla la curva, lo spazio più stretto e la trasparenza intorno al bordo. Ridimensiona la finestra in esecuzione, prova gli eventuali controlli di scala dell'interfaccia disponibili all'utente e verifica l'animazione della scala dei nodi se l'interfaccia la usa.

Ripeti il controllo in una build di destinazione. Conserva le impostazioni di importazione scelte insieme alla risorsa sorgente, così un altro collaboratore può riprodurre il risultato. Per un insieme di icone, prova più della sagoma più semplice: includi l'icona più densa e quella con il dettaglio importante più sottile.

Un piccolo file sorgente SVG non dimostra un consumo inferiore di memoria GPU. Entrambi i percorsi discussi producono texture raster per la visualizzazione. Misura le risorse importate e la scena effettiva quando memoria o tempo per fotogramma guidano la scelta.

Come funziona con PerfectVector

PerfectVector è utile prima dell'importazione in Godot quando l'unica sorgente è un PNG o JPG piatto e ti servono forme SVG modificabili. Carica un'icona rappresentativa nel convertitore da immagine a vettore di PerfectVector, confronta il contorno ricalcato e gli spazi interni con l'originale, poi controlla l'SVG scaricato prima di scegliere il tipo di importazione in Godot.

Accetta il ricalco solo quando la forma è corretta. Rimuovi eventuali forme di sfondo indesiderate, controlla che le regioni previste rimangano modificabili e verifica che le piccole aperture sopravvivano alla pulizia. Poi esegui gli stessi controlli di dimensione e sovracampionamento in Godot usati per un SVG esistente.

Mantieni raster fotografie, effetti dipinti morbidi e pixel art intenzionale quando quello è il risultato desiderato. Un'icona geometrica semplice potrebbe essere più facile da disegnare direttamente. Il ricalco è utile per ricostruire forme sorgente; non configura l'importatore di Godot e non convalida il gioco finale.

Domande frequenti

Godot può importare file SVG? Sì. L'importazione Texture2D predefinita rasterizza un SVG al momento dell'importazione. L'importatore attuale offre anche DPITexture per immagini SVG che richiedono una nuova rasterizzazione con sovracampionamento. Controlla la documentazione della versione del progetto; DPITexture è indicata come sperimentale.

Perché il mio SVG è sfocato in Godot? Controlla se un raster importato fisso viene visualizzato a dimensioni superiori alle sue dimensioni in pixel. Esamina anche adattamento del viewport, filtraggio, sovracampionamento della scala del nodo e contenuti raster incorporati. Correggi la causa prima di ricalcare o sostituire la sorgente.

DPITexture conserva tracciati SVG modificabili nella scena? Conserva la sorgente SVG per rasterizzarla di nuovo, ma è una risorsa texture. Importarla non fornisce un flusso di modifica dei tracciati nella scena e non crea automaticamente la geometria di collisione necessaria al gioco.

Fonti

1. Godot — Importazione delle immagini — Definisce i tipi di importazione SVG, la preparazione del testo, i limiti del renderer e le impostazioni di filtraggio delle texture.
2. Godot — DPITexture — Documenta ereditarietà, sorgente SVG conservata, ridimensionamento e stato sperimentale.
3. Godot — Risoluzioni multiple — Spiega l'adattamento del viewport, il sovracampionamento delle immagini, le impostazioni della scala del nodo e i costi delle rasterizzazioni ripetute.
4. Godot — ResourceImporterTexture — Descrive i controlli della scala raster e del limite dimensionale dell'importatore di texture predefinito.
5. ThorVG — Informazioni su ThorVG — Definisce i limiti di supporto dell'interprete SVG.
6. MDN — Elemento image di SVG — Spiega come un SVG può contenere grafica raster.

---

Se l'icona per Godot parte da un PNG o JPG piatto e richiede forme modificabili, converti l'immagine con PerfectVector. Controlla sagoma, piccoli spazi vuoti e tracciati di sfondo indesiderati, poi prova l'SVG alle dimensioni di visualizzazione e con le impostazioni di ridimensionamento usate dal progetto.