Guida utente Annulla

Esportare animazioni per dispositivi mobili e motori grafici

Cerca

Ultimo aggiornamento il 19 gen 2022

Crea un foglio sprite o atlas delle texture ed esporta le animazioni per app per dispositivi mobili e motori grafici. Importa un atlas delle texture in Unity o in qualsiasi altro motore grafico utilizzando il plug-in.

Panoramica

Animate consente di creare animazioni con un foglio sprite o un atlas delle texture e di esportarle per app per dispositivi mobili e motori per giochi.

Foglio sprite

Un foglio sprite è un file di immagine bitmap che contiene diversi elementi grafici più piccoli disposti a griglia. Grazie al fatto che più elementi grafici sono compilati in un unico file, Animate e altre applicazioni possono utilizzare le immagini caricando soltanto un file singolo. Questa efficienza di caricamento può risultare utile in quelle situazioni (ad esempio lo sviluppo di videogiochi) nelle quali le prestazioni rivestono un'importanza fondamentale.

Un foglio sprite contenente gli sprite di un'animazione fotogramma per fotogramma.

Potete creare un foglio sprite da una selezione di più clip di filmati, simboli di pulsanti, simboli grafici o immagini bitmap. Gli elementi possono essere selezionati nel pannello Libreria oppure sullo stage, ma non in entrambe le aree. Ogni immagine bitmap e ogni fotogramma dei simboli selezionati apparirà come un elemento grafico separato nel foglio sprite. Se eseguite l'esportazione dallo stage, eventuali trasformazioni (ad esempio, modifica in scala o inclinazione) applicate all’istanza del simbolo vengono mantenute anche nell’immagine di output.

Atlas delle texture

L’atlas delle texture è una raccolta di texture rappresentata come un’unica grande immagine o più immagini delle dimensioni desiderate. È possibile ottimizzare il gioco creando un atlas delle texture da utilizzare nell’app del gioco.

In Animate, potete creare un atlas delle texture da simboli quali clip di filmato, elementi grafici o pulsanti. Gli elementi possono essere selezionati nel pannello Libreria oppure sullo stage, ma non in entrambe le aree. Ogni vettore e ogni fotogramma chiave dei simboli selezionati vengono visualizzati sotto forma di immagine bitmap separata nell’atlas delle texture. Se esportate dallo stage, le trasformazioni (ridimensionamento, inclinazione ecc.) applicate all’istanza del simbolo vengono salvate nell’immagine di output.

Differenza tra un foglio sprite e un atlas delle texture

Potete utilizzare sia il foglio sprite sia l’atlas delle texture nelle app per dispositivi mobili, in base alle vostre esigenze. La tabella seguente riassume alcune differenze fondamentali tra il foglio sprite e l'atlas delle texture.

Funzionalità	Foglio sprite	Atlas delle texture
Prestazioni nelle app per dispositivi mobili	Basse	Alte
Efficienza nel caricamento dell’app	Alta, grazie all’assenza di calcoli	Bassa, a causa dei calcoli necessari per il file JSON
Dimensione	Occupa più spazio	Occupa meno spazio
Qualità dell’animazione	Media	Alta
Numero di file generati	Due file: un file bitmap e un file json	Variabile: in base alle dimensioni dell’immagine.
Numero di bitmap generate	Sulla base del numero di fotogrammi utilizzato nel foglio sprite, il numero dei file bitmap può anche aumentare incrementando la dimensione del foglio sprite.	Solo le bitmap univoche vengono generate nello Sprite, riducendo le dimensioni totali del file.

Creare un foglio sprite

Per creare un foglio sprite, procedete nel modo seguente:

Selezionate uno o più simboli nella Libreria oppure una o più istanze di simboli sullo stage. La selezione può anche includere delle immagini bitmap.
Fate clic sulla selezione con il pulsante destro del mouse e scegliete Genera foglio Sprite.

Nella finestra di dialogo Genera foglio Sprite, selezionate le opzioni desiderate, quindi fate clic su Esporta.

Opzione di esportazione	Descrizione
Dimensione immagine	Le dimensioni totali in pixel del foglio sprite. L’impostazione predefinita è Dimensione automatica, in base alla quale il foglio viene dimensionato in modo da includere tutti gli sprite che aggiungete.
Formato immagine	Il formato di file del foglio sprite esportato. I formati PNG 8 bit e PNG 32 bit supportano entrambi l’uso di uno sfondo trasparente (canale alfa). I formati PNG 24 bit e JPG invece non supportano gli sfondi trasparenti. In generale, la differenza visiva tra PNG 8 bit e PNG 32 bit è lieve. I file PNG a 32 bit risultano quattro volte più grandi dei file PNG a 8 bit.
Distanza bordo	Spazio intorno ai margini del foglio sprite, in pixel.
Distanza forma	Spazio tra le immagini nel foglio sprite, in pixel
Algoritmo	La tecnica utilizzata per comprimere le immagini nel foglio sprite. Sono disponibili due opzioni: Basic (predefinito) MaxRects
Formato dati	Il formato interno utilizzato per i dati di immagine. Scegliete il formato più adatto al flusso di lavoro che prevedete di adottare per il foglio sprite dopo l’esportazione.
Ruota	Ruota gli sprite di 90 gradi°. Questa opzione è disponibile solo per alcuni formati di dati.
Taglia	Questa opzione permette di risparmiare spazio sul foglio sprite ritagliando i pixel inutilizzati da ciascun fotogramma di simbolo aggiunto al foglio.
Impila fotogrammi	Selezionate questa opzione se volete evitare che i fotogrammi duplicati presenti tra i simboli selezionati vengano duplicati anche nel foglio sprite risultante.

Esportare le animazioni per dispositivi mobili e motori di gioco

Animate consente di esportare le animazioni per piattaforme di gioco e applicazioni per dispositivi mobili. Per poter visualizzare le animazioni su smartphone e motori di gioco, seguite l’esercitazione riportata alla fine di questo esempio ed effettuate le seguenti operazioni.

Nella Libreria, fate clic con il pulsante destro del mouse sul clip filmato.
Selezionate Genera foglio sprite.
Nella finestra di dialogo Foglio sprite, selezionate le opzioni necessarie.
Fate clic su Esporta.

Come esportare le animazioni per app per dispositivi mobili o motori di gioco

Guardate questo video per vedere le opzioni disponibili per l’esportazione di animazioni.

Creazione di un atlas delle texture

Gli sviluppatori di giochi possono utilizzare Animate per orchestrare le animazioni ed esportarle come atlas delle texture per il motore grafico Unity o qualsiasi altra piattaforma di gioco.

Il processo di generazione di atlas delle texture in Animate e di importazione in Unity è descritto nello schema seguente:

flow-diagram-Texture-Atlas — Illustrazione del flusso di lavoro per generare un atlas delle texture e importarlo in Unity.

Per generare l'atlas delle texture della propria animazione, effettuate le seguenti operazioni:

In Animate, potete generare un atlas delle texture per un simbolo selezionato nella Libreria o l’istanza del simbolo sullo stage.
Fate clic con il pulsante destro del mouse sul simbolo, quindi selezionate Genera atlas delle texture dal menu. La finestra Genera atlas delle texture compare.

Genera atlas delle texture

Scegliete le opzioni di esportazione appropriate per l’atlas delle texture.

Opzione di esportazione	Descrizione
Dimensione immagine	Le dimensioni totali in pixel dell’atlas delle texture. L’impostazione predefinita è Dimensione automatica, in base alla quale il foglio viene dimensionato in modo da includere tutte le immagini che aggiungete.
Ottimizza le dimensioni	Se l’opzione Ottimizza le dimensioni è selezionata, i pixel vuoti vengono rimossi dalle bitmap e le dimensioni non sono espresse in potenza di due (impostazione predefinita). Questo è applicabile per tutte le bitmap generate. Se l’opzione Ottimizza le dimensioni è deselezionata, le bitmap vengono generate in base alle dimensioni selezionate.
Formato immagine	Il formato di file del foglio sprite esportato. I formati PNG 8 bit e PNG 32 bit supportano entrambi l’uso di uno sfondo trasparente (canale alfa). In generale, la differenza visiva tra PNG 8 bit e PNG 32 bit è lieve. I file PNG a 32 bit risultano quattro volte più grandi dei file PNG a 8 bit.
Risoluzione	Scegliete un valore compreso tra 0,3 e 3,0
Distanza bordo	Spazio intorno ai margini dell’atlas delle texture, in pixel.
Distanza forma	Spazio tra le immagini nell’atlas delle texture, in pixel.
Algoritmo	Tecnica utilizzata per comprimere le immagini nell’atlas delle texture. Sono disponibili due opzioni: Standard MaxRects (impostazione predefinita)
Formato dati	Il formato interno utilizzato per i dati di immagine. Il formato predefinito è JSON.
Ruota	Ruota le immagini di 90 gradi. Questa opzione è disponibile solo per alcuni formati di dati.
Appiattisci e converti in bitmap gli oggetti inclinati	Selezionate questa opzione se avete applicato gli oggetti trasformazioni di tipo inclinazione. Animate converte questi oggetti in immagini bitmap poiché alcuni dei motori grafici non sono in grado di interpretare correttamente le inclinazioni.
Ottimizza file Animation.json	Quando l’opzione Ottimizza file Animation.json è selezionata, vengono rimossi i rientri e le matrici decomposte e i nomi utilizzati vengono abbreviati (opzione predefinita). Quando l’opzione Ottimizza file Animation.json è deselezionata, l’esportazione avviene mantenendo i rientri e i nomi significativi.

È possibile esportare il simbolo in più bitmap, in base alle sue dimensioni.

Generare l’atlas delle texture per più bitmap

Per le risorse che superano le dimensioni immagine selezionate, viene visualizzata un’avvertenza.
Per visualizzare in anteprima l’output dell’atlas delle texture, fate clic sulla scheda Anteprima.

Anteprima dell'atlas delle texture in seguito alla creazione
Fate clic su Sfoglia e scegliete il percorso nel computer in uso per il file di output oppure immettete il percorso nell’area di testo e fate clic su Esporta.

La cartella di output generata per l'atlas delle texture contiene i seguenti file:

Animation.json

Questo file contiene informazioni sull’animazione. Per impostazione predefinita, i fotogrammi identici vengono ottimizzati e consolidati nel file Animation.json.

spritemap.json

Questo file contiene informazioni sul file spritesheet.png.

spritemap.png

Per il simbolo esportato, questo file contiene la rappresentazione bitmap di tutte le texture univoche minime richieste per ricostruire l'animazione.

È possibile utilizzare l'atlas della texture generato in qualsiasi motore grafico come Unity con il plug-in di importazione adatto.

Importazione dell’atlas delle texture in Unity

Potete importare nei vostri motori di gioco preferiti i file dell'atlas delle texture generate da Animate. Per esportare i file dell'atlas delle texture, potete creare plug-in specifici delle vostre piattaforme di gioco. È disponibile un plug-in di importazione di esempio per lo strumento Unity.

Per importare l’atlas delle texture nella piattaforma Unity eseguite le operazioni indicate di seguito:

In Unity, create un progetto in un percorso specifico. In questa posizione, viene creata una cartella contenente la sottocartella Assets.
Create due cartelle secondarie in Assets, denominate Resources ed Editor.
Fate clic qui per scaricare il plug-in di importazione di esempio per Unity. Selezionate Unity Plugin nella scheda Downloads e selezionate la versione corrispondente da scaricare.

Il file unity-plugin.zip include i file Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs e Effect.shader.

Il download dell'esempio implica l'accettazione dei Termini di utilizzo e dell'Informativa sulla privacy online.
Spostate i file dell'atlas delle texture, come Animation.json, spritemap.json, spritemap.png, e i file del plug-in Unity, come Plugin.cs ed Effect.shader, in Assets > Resources.
Spostate i file AnimateEditor.cs e WrapperPlugin.cs nella cartella Assets.
In Unity, fate clic sul file AnimateEditor.cs e trascinatelo in Main Camera.
Avviate la riproduzione. Durante la riproduzione del progetto, la mappa sprite viene suddivisa in più sprite.
Spostate AnimateEditor.cs in Editor.
In Unity, fate clic sul file WrapperPlugin.cs e trascinatelo in Main Camera. Inoltre, deselezionate o rimuovete AnimateEditor.cs in Main Camera.
Riproducete o pubblicate l'output in base alle vostre esigenze.

Potete anche personalizzare il plug-in modificando il file WrapperPlugin.cs in base alle vostre esigenze.

Il plug-in di Unity supporta gli effetti colore dei file atlas delle texture generati in Animate. Inoltre, il plug-in supporta le maschere su più livelli. La funzione delle maschere è applicabile solo alla versione Unity 2017 e a quelle successive.

Pubblicazione delle texture

Gli animatori possono continuare a creare contenuti in formato vettoriale e ad esportarli in formato vettoriale o raster per le piattaforme HTML 5. Alle impostazioni di pubblicazione è stata aggiunta un’opzione per esportare le animazioni come atlas di texture, per migliorare le prestazioni delle animazioni.

1. Create un documento Canvas. Selezionate File > Nuovo per visualizzare la finestra Nuovo documento.

2. Selezionate la scheda Avanzate e fate clic su HTML5 Canvas. Viene aperto un nuovo documento FLA.

3. Fate clic su File > Impostazioni di pubblicazione. Se Esporta documento come texture è attivata nella scheda Base, la scheda Impostazioni immagine mostra le opzioni di Pubblicazione texture. Per impostazione predefinita, tutti i simboli sono inclusi nella pubblicazione delle texture. Per scegliere specifici simboli per le texture, fate clic sull’icona delle impostazioni accanto a questa opzione.

Tenete presente che l’attivazione di questa opzione può comportare un aumento delle dimensioni delle risorse, ma migliora le prestazioni. Potete inoltre aumentare la risoluzione delle immagini in termini di 2x e 3x rispetto alla risoluzione originale, utile per i display HiDPI. Per cambiare le impostazioni di risoluzione, fate clic sull’icona della chiave inglese accanto all’opzione Esporta documento come texture, come illustrato nella schermata di seguito. Trascinate i numeri accanto a Risoluzione per ottenere multipli 2x o 3x.

Per impostazione predefinita, la pubblicazione delle texture è impostata su una risoluzione 2x. Inoltre, l’intervallo di risoluzione può essere modificato da 0,3 a 3x.

La pubblicazione delle texture è applicabile solo per il tipo di documento HTML5 Canvas.

Opzione Esporta documento come texture abilitata

Scegliere un file vettoriale o raster è come scegliere tra le dimensioni e le prestazioni del file. Le piattaforme HTML5 sono ottimizzate per il contenuto raster. Di conseguenza, per alcune forme complesse, è meglio convertire prima le immagini vettoriali in raster. Per parte del contenuto di base, potete comunque utilizzare il contenuto vettoriale. Animate fornisce questa opzione mediante una finestra di selezione del simbolo parziale. La selezione del simbolo parziale consente di scegliere i simboli che devono essere convertiti in raster mantenendo tutti gli altri come vettori.

Per aprire la selezione parziale del simbolo, fate clic su Modifica nella finestra di dialogo Impostazioni pubblicazione e selezionate un simbolo dall'elenco. Per impostazione predefinita, tutti i simboli sono selezionati.

Modificare la selezione parziale del simbolo

Selezionate i simboli scelti nell'elenco.

Migliorare le prestazioni grafiche con le texture bitmap

In Animate, le texture bitmap consentono di migliorare le prestazioni delle animazioni su piattaforme diverse. Per ridurre la complessità della grafica vettoriale mediante l’uso di texture bitmap, seguite l’esercitazione riportata alla fine di questo esempio ed effettuate le seguenti operazioni.

Nella finestra di ispezione Proprietà, fate clic su Impostazioni pubblicazione.
Nella scheda Base, selezionate l’icona della chiave inglese accanto a Esporta documento come texture.
Nella scheda Impostazioni immagini, fate clic su Cambia e selezionate i simboli desiderati.
Fate clic su OK.

Come pubblicare le risorse come texture bitmap per migliorarne le prestazioni

Guardate questo video per saperne di più sulle prestazioni delle animazioni con texture bitmap.

Ottieni supporto in modo più facile e veloce

Nuovo utente?