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 CC consente di creare animazioni con un foglio sprite o un atlas delle texture e di esportarle per app per dispositivi mobili e motori grafici. 

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.

Foglio sprite
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 come singola immagine di grandi dimensioni. È 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 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.

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 Tre file: un file bitmap e due file json
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:

  1. Selezionate uno o più simboli nella Libreria oppure una o più istanze di simboli sullo stage. La selezione può anche includere delle immagini bitmap.

  2. Fate clic sulla selezione con il pulsante destro del mouse e scegliete Genera foglio Sprite.

    generate-spritesheet
  3. 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.

Esportazione dell’animazione del foglio sprite per le app per dispositivi mobili

Esportazione dell’animazione del foglio sprite per le app per dispositivi mobili
Train Simple - Matthew Pizzi

Creazione di un atlas della 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 della texture in Animate e di importazione nell'Unità è 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:

  1. In Animate, potete generare un atlas delle texture per un simbolo selezionato nella Libreria o l’istanza del simbolo sullo stage. 

  2. 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.

    generate-texture-atlas (2)
    Genera atlas delle texture
  3. 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.
    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.
    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:

    • Basic (predefinito)
    • MaxRects
    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. 
  4. Per visualizzare in anteprima l’output dell’atlas delle texture, fate clic sulla scheda Anteprima.

    texture-atlas-preview
    Anteprima dell'atlas delle texture in seguito alla creazione
  5. 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. 

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: 

  1. In Unity, create un progetto in un percorso specifico. In questa posizione, viene creata una cartella contenente la sottocartella Assets.

  2. Create due cartelle secondarie in Assets, denominate Resources ed Editor

  3. 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.

  4. 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.

  5. Spostate i file AnimateEditor.cs e WrapperPlugin.cs nella cartella Assets

  6. In Unity, fate clic sul file AnimateEditor.cs e trascinatelo in Main Camera.

  7. Avviate la riproduzione. Durante la riproduzione del progetto, la mappa sprite viene suddivisa in più sprite.

  8. Spostate AnimateEditor.cs in Editor.

  9. In Unity, fate clic sul file WrapperPlugin.cs e trascinatelo in Main Camera. Inoltre, deselezionate o rimuovete AnimateEditor.cs in Main Camera.

  10. 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 rasterizzato 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.

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 di texture. Per scegliere specifici simboli per le texture, fate clic sull’icona delle impostazioni accanto a questa opzione.

L’attivazione di questa opzione può comportare un aumento delle dimensioni delle risorse, ma migliora le prestazioni. Inoltre, potete 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.

Nota:

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

Esporta documento come texture
Esporta documento come texture

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
Modificare la selezione parziale del simbolo

Selezionate i simboli scelti nell'elenco. 

Selezione parziale del simbolo
Selezione parziale del simbolo

Esercitazione sulla pubblicazione delle texture

Esercitazione sulla pubblicazione delle texture
Scoprite come creare le vostre risorse utilizzando i vettori, per una maggiore flessibilità e fedeltà, e quindi pubblicatele in texture di bitmap.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online