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.

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 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:

  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 informato vettorialeo 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 chel’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’intervallodi risoluzione può essere modificato da 0,3 a 3x.

Opzione Esporta documento come texture abilitata
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
Modificare la selezione parziale del simbolo

Selezionate i simboli scelti nell'elenco. 

Selezione parziale del simbolo
Selezione parziale del simbolo

Potete scegliere di esportare tutte le immagini importate (incluse quelle compresse) dal documento Canvas mantenendone le dimensioni. Deselezionate le opzioni Esporta documento come texture e Combina le immagini infoglio sprite nella scheda Base e selezionate Esporta risorse immagine. Le immagini vengono esportate senza alcuna modifica delle dimensioni.

Opzione Esporta documento come texture disabilitata
Opzione Esporta documento come texture disabilitata

Nota:

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

Video che spiega come pubblicare le texture

Video che spiega come pubblicare le texture
Scopri come creare risorse vettoriali, per una maggiore flessibilità e fedeltà, e quindi pubblicarle come texture 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