SVG in Unity: prepara grafica per UI Toolkit o sprite

L'importazione SVG in Unity parte da due decisioni: quale versione dell'editor usi e dove apparirà la grafica. Unity 6.3 include l'importazione SVG per UI Toolkit e Texture2D. Le importazioni dirette di SVG come risorse Sprite o uGUI usano il pacchetto Vector Graphics; gli editor precedenti usano la linea precedente del pacchetto. Unity documenta questa divisione nella guida alle versioni di Vector Graphics.

Se hai già un SVG modificabile, prepara quel file per l'importatore. Se l'unica sorgente è un PNG o JPG, ricalcalo soltanto quando servono forme vettoriali. Una texture o uno sprite pixel art può restare raster.

Verifica un'icona rappresentativa per distinguere problemi della grafica sorgente da problemi di importazione e visualizzazione Unity prima di elaborare un intero set.

Per geometria di scena in un motore diverso, usa i controlli di importazione SVG di Unreal Engine per esaminare forme sorgente di Motion Design, aperture e parti separate.

Scegli la modalità di importazione prima di modificare la grafica

Usa il componente di destinazione per scegliere la modalità. Una risorsa che funziona in un layout UI Toolkit non appartiene automaticamente a un campo Sprite Renderer.

La tabella segue i requisiti dei pacchetti Unity. Fissa le versioni di editor e pacchetto usate dal progetto. Istruzioni per Unity 2018 o per un importatore di anteprima 2.0 possono descrivere opzioni diverse da un progetto 6.3 attuale.

Scegli prima la destinazione

Mantieni un piccolo test di importazione accanto alla grafica

Scegli un'icona con una curva, un foro interno e gli eventuali effetti di colorazione necessari al set. Conserva l'SVG originale accanto a una versione semplice composta da forme piene. Se la versione semplice viene importata correttamente, indaga sulla grafica complessa prima di cambiare l'intero progetto.

Prepara un SVG che l'importatore possa riprodurre

Apri la sorgente in un editor vettoriale ed esamina gli oggetti effettivi. Conserva l'originale, poi crea un'esportazione separata da consegnare a Unity.

Conferma che la grafica contenga tracciati

Un SVG può contenere una bitmap tramite un elemento <image>; la sola estensione non dimostra che la grafica sia geometria vettoriale. La specifica W3C sui contenuti incorporati documenta questa distinzione. Seleziona una parte della grafica in un editor e controllane oggetti o markup. Usa la diagnosi del raster incorporato se è un unico rettangolo immagine.

Se esiste il file vettoriale originale, riesportalo. Ricalcare un PNG esportato da quell'originale aggiunge lavoro di ricostruzione e può cambiare la sagoma. Per una famiglia di icone, concorda prima tela, margini e peso visivo; la guida alla preparazione SVG per kit UI tratta queste decisioni per l'intero set.

Sostituisci deliberatamente le funzionalità non supportate

L'importatore nativo Unity supporta parte di SVG 1.1. Le esclusioni documentate includono testo modificabile, maschere basate sui pixel, filtri, interazione e animazione. Un'anteprima nel browser può quindi apparire corretta mentre il risultato Unity differisce. Vedi i limiti SVG di Unity.

Prepara la copia da consegnare secondo le esigenze della grafica:

• Converti le lettere decorative in contorni. Mantieni le etichette dell'interfaccia come testo nell'interfaccia quando richiedono modifica o localizzazione.
• Ricrea un'ombra o un bagliore necessari con un effetto supportato dalla destinazione oppure mantieni quella grafica raster.
• Controlla le maschere separatamente dai tracciati di ritaglio. Una maschera sfumata basata sui pixel e un ritaglio geometrico sono costruzioni diverse.
• Progetta l'animazione in Unity invece di affidarti a quella incorporata nell'SVG.

Non appiattire ogni gradiente soltanto perché un filtro non è supportato. Verifica l'effetto effettivamente usato dal progetto. Se un distintivo complesso fallisce, esporta una versione a riempimenti pieni e aggiungi di nuovo gli effetti uno alla volta. Così isoli la funzionalità che cambia l'aspetto.

Rimuovi la complessità accidentale

Elimina puntini isolati, duplicati nascosti e rettangoli di sfondo che non appartengono all'icona. Semplifica una curva evidentemente irregolare soltanto mentre la confronti con la sorgente. Un piccolo foro che si chiude durante la pulizia è una modifica fallita, anche se il file diventa più corto.

Non esiste un numero universale di nodi utile per tutta la grafica dei giochi. Una freccia geometrica e un personaggio disegnato a mano richiedono quantità diverse di dettagli. La guida alla pulizia dei nodi SVG aiuta a decidere quali punti trasportino informazioni sulla forma.

Importa in UI Toolkit con Unity 6.3 o successivo

Parti da un SVG da consegnare di cui hai già verificato sagoma ed effetti.

1. Aggiungi l'SVG alla cartella Assets del progetto e selezionalo.
2. Imposta Generated Asset Type su UI Toolkit Vector Image nell'Inspector.
3. Applica le impostazioni di importazione e usa l'immagine vettoriale risultante nell'elemento UI Toolkit previsto.
4. Visualizza l'anteprima del layout effettivo alle dimensioni minima e massima previste.

Unity documenta la scelta della risorsa nativa in Lavorare con grafica vettoriale. Se il componente richiede Texture2D, seleziona invece quell'output e verifica la texture risultante alla dimensione prevista.

Per UI Toolkit, parti dalle impostazioni di tessellazione di base consigliate. Target Resolution e Zoom Factor permettono all'importatore di configurare la suddivisione delle curve per le condizioni di visualizzazione previste. Unity consiglia di usare la risoluzione di destinazione più bassa che dia risultati soddisfacenti. Le sue impostazioni di importazione immagini spiegano i controlli.

Mantieni separate due verifiche: se l'SVG descrive la forma corretta e se la risorsa importata visualizza bene quella forma. Aumentare la tessellazione non può ripristinare un foro scomparso nell'esportazione sorgente.

Importa per Sprite Renderer o uGUI

Installa il pacchetto com.unity.vectorgraphics compatibile tramite Package Manager quando la destinazione richiede il suo supporto Sprite o uGUI. Scegli la risorsa generata corrispondente al componente e conferma che il componente la accetti. La documentazione attuale del pacchetto distingue questi tipi di importazione dalla modalità UI Toolkit integrata.

Per uno Sprite Renderer, verifica dimensioni dell'oggetto nella scena e punto di rotazione prima di copiarlo nei prefab. Per uGUI, verifica il flusso SVGImage usato dal progetto. Un normale flusso con sprite raster resta un'alternativa quando la grafica appare già corretta alle dimensioni richieste.

Il precedente pacchetto 2.0 documenta unità SVG per unità di scena, punti di rotazione degli sprite e controlli di tessellazione. Identifica inoltre quel pacchetto come sperimentale e sconsiglia l'uso in produzione. I team che mantengono quella modalità dovrebbero verificare il manuale del pacchetto 2.0 insieme ai vincoli del progetto prima di aggiungerlo.

Se aggiorni un progetto esistente, esegui il test di importazione in una copia o in un branch sotto controllo di versione. Confronta tipi di risorse generate e riferimenti nei prefab e nelle scene effettivi. Non usare un'anteprima in miniatura riuscita come unico test di migrazione e non applicare modifiche massive ai .meta da un vecchio post di forum senza riprodurne il problema specifico.

Diagnostica la prima differenza visibile

Usa una breve scheda di test per ogni risorsa rappresentativa: file sorgente, versioni di editor e pacchetto, componente di destinazione, dimensione di visualizzazione prevista e prima discrepanza visibile.

Per esempio, supponiamo che un distintivo a stella venga importato ma perda il foro centrale. Apri prima l'SVG da consegnare e conferma che il foro esista lì. Se esiste, confronta un'esportazione semplificata del distintivo in Unity. Se il foro sopravvive in quella versione, controlla forme sovrapposte, costruzione del riempimento o maschera del distintivo originale. Ricalcare di nuovo la sorgente è utile soltanto se è sbagliata la geometria dei tracciati stessa.

Verifica la risorsa approvata in una build di destinazione oltre che nell'editor. Registra se resta leggibile alla dimensione minima, se colori e trasparenza corrispondono e se i riferimenti a scene o prefab sopravvivono a una nuova importazione. Le decisioni sulle prestazioni richiedono la profilazione della tua scena; un'estensione SVG non è una misura di prestazioni.

Come funziona con PerfectVector

PerfectVector interviene prima dell'importazione Unity quando l'unica sorgente adatta è grafica raster e servono forme modificabili. Carica un PNG o JPG a colori piatti nel convertitore da immagine a vettore di PerfectVector, confronta sagoma e fori ricalcati con l'originale, poi controlla l'SVG scaricato in un editor vettoriale prima di importarlo in Unity.

Usa la stessa icona rappresentativa per l'intera consegna. Accetta il ricalco soltanto quando puoi modificare le regioni previste, gli spazi negativi restano aperti e la pulizia non ha deformato la forma. Poi applica il test della destinazione Unity descritto sopra.

Mantieni raster una foto, una texture, un bagliore morbido o uno sprite pixel art intenzionale quando ciò conserva l'aspetto previsto. Per un simbolo geometrico semplice, il disegno manuale può essere più facile da controllare del ricalco. PerfectVector prepara geometria sorgente SVG; non cambia le funzionalità supportate da Unity né valida il rendering in esecuzione. Se la distinzione di formato è poco familiare, parti da cosa contiene un file SVG.

FAQ

Unity 6 richiede il pacchetto Vector Graphics? La risposta dipende dalla versione secondaria e dalla destinazione. Unity 6.3 ha importazioni SVG integrate per UI Toolkit e Texture2D. Le importazioni Sprite e uGUI usano il pacchetto di anteprima 3.0. Le versioni Unity precedenti usano la modalità con pacchetto di anteprima 2.0 compatibile.

Cambiare l'estensione di un PNG in SVG crea uno sprite vettoriale? No. Rinominare un file non ricalca i pixel. Usa la sorgente vettoriale originale, disegna le forme oppure ricalca grafica raster adatta e controlla i tracciati risultanti prima dell'importazione Unity.

Il ricalco può correggere un SVG importato male da Unity? Soltanto quando la geometria sorgente richiede ricostruzione. Se l'SVG contiene tracciati corretti ma il problema è causato dal tipo sbagliato di risorsa generata o da un effetto non supportato, correggi prima quella scelta di importazione o esportazione.

Fonti

1. Unity — Guida al pacchetto Vector Graphics 3.0 — Definisce la divisione per versione dell'editor e le modalità integrate rispetto a quelle Sprite/uGUI basate su pacchetto.
2. Unity — Lavorare con grafica vettoriale — Documenta scelte di risorse native e funzionalità SVG non supportate.
3. Unity — Impostazioni di importazione immagini — Spiega impostazioni delle immagini vettoriali UI Toolkit e controlli di tessellazione.
4. Unity — Manuale del pacchetto Vector Graphics 2.0 — Tratta il vecchio importatore, controlli di unità di scena e punto di rotazione e stato sperimentale.
5. W3C — Contenuti incorporati SVG — Stabilisce che un SVG può includere contenuto immagine raster.

---

Se la risorsa Unity parte da un PNG o JPG piatto e richiede tracciati modificabili, converti l'immagine con PerfectVector. Controlla sagoma, fori e forme di sfondo indesiderate, poi verifica l'SVG nel componente Unity e alle dimensioni di visualizzazione previste per la pubblicazione.