Implementare le animazioni dei fogli sprite

Ambiente di verifica

Finestre

• finestre 11

Unity Editor

• 2020.3.25f1

Pacchetti del sistema di input

• 1.2.0

Prerequisiti per questo suggerimento

Le seguenti impostazioni sono preconfigurate come prerequisito per la spiegazione di questi suggerimenti.

• Presentazione del pacchetto del sistema di input
• Allineare la videocamera (2D) con l'area di lavoro

Che cos'è l'animazione del foglio sprite?

Nei giochi moderni, i personaggi e gli effetti vengono animati spostando modelli 3D, calcolando le esplosioni in tempo reale e visualizzando gli effetti. Ciò è diventato possibile perché la potenza di calcolo delle console di gioco è aumentata, ma poiché le vecchie console di gioco non avevano molta potenza, l'animazione del foglio sprite che cambiava continuamente le immagini per far sembrare che si stesse muovendo era il mainstream. Il principio è lo stesso degli anime trasmessi in TV. Le animazioni dei fogli sprite sono utilizzate da un numero inferiore di giochi rispetto al passato, ma sono ancora spesso utilizzate perché il carico richiesto per i calcoli è molto più basso.

L'animazione del foglio sprite cambia e visualizza più immagini in fila. È raro preparare tanti file immagine quanti ne sono e fondamentalmente tutti i modelli di visualizzazione sono inclusi in un'unica immagine. Ciò semplifica la gestione dei file immagine e riduce il carico sul caricamento dei file immagine. Il file di immagine che riassume questa animazione è chiamato "foglio sprite".

Creare un foglio sprite

Un foglio sprite è essenzialmente solo un file immagine. Poiché non ha nulla a che fare con Unity, crealo con uno strumento di modifica delle immagini. Il formato di file finale sarà un file PNG che Unity è in grado di gestire.

Inoltre, ci sono le seguenti regole per la creazione di fogli sprite.

• Unifica le dimensioni dell'immagine di tutti i fotogrammi. Ad esempio, se la prima immagine è di 32x32 pixel, la seconda e le successive saranno di 32x32 pixel. Ad esempio, se si prepara un foglio sprite in formato "3x2" con 6 fotogrammi, la dimensione del foglio sprite sarà di 96x64 pixel.
• È possibile allineare liberamente l'immagine, ad esempio "6x4" o "2x8", ma assicurarsi di crearla partendo dal presupposto che tutti i fotogrammi verranno riempiti. Se è "6x4", sono 24 fotogrammi e così via. Se si tratta di un'animazione a 13 fotogrammi, preparala con "1x13" o "13x1".
• Poiché si tratta di un'animazione, è allineata correttamente in modo che non vi siano disallineamenti nei fotogrammi prima e dopo.
• La direzione dell'animazione inizia dalla cella in alto a sinistra e va a destra, e quando si va all'estrema destra, inizia da sinistra un passo verso il basso e va di nuovo a destra.

In effetti, non è necessario eseguire le operazioni precedenti esclusivamente in Unity, ma è molto più facile decidere in anticipo le specifiche.

Questa volta, userò un foglio sprite per scambiare i seguenti numeri. Un quadrato è di 32x32 pixel. È composto da 24 fotogrammi "6x4", quindi la dimensione dell'immagine è di 192x128 pixel.

Configurazione del foglio sprite nell'editor di Unity

Una volta creato il progetto, aggiungi un file di foglio sprite al progetto. In questo caso, si presume che il nome del file sia NumberAnimation .

NumberAnimation Seleziona il file e compila l'inspector come segue:

Ci sono molte altre impostazioni che possono essere configurate, ma lasciamolo così com'è per ora. Una volta configurato, fai clic sul pulsante "Sprite Editor".

Se viene visualizzata la finestra di dialogo seguente, fare clic sul pulsante "Applica". In effetti, le impostazioni di questo ispettore devono essere salvate e, se scorri fino in fondo, c'è un pulsante "Applica", quindi devi salvare le impostazioni con questo pulsante. Verrà anche salvato da "Applica" nella finestra di dialogo, quindi non importa in che modo lo salvi.

Viene visualizzato l'editor Sprite. In questa sezione, lavoreremo sulla divisione dello sprite dal foglio sprite.

C'è un pulsante chiamato "Slice" nell'angolo in alto a sinistra, fai clic su di esso e cambia il tipo in "Griglia per dimensione cella". In questo foglio sprite, una dimensione dello sprite è "32x32" pixel, quindi inserisci 32 per ogni dimensione di pixel. Al termine, fai clic sul pulsante Slice.

Questa immagine è difficile da capire perché sembra essere chiaramente divisa fin dall'inizio, ma è divisa da 1 sprite 32px. Premere il tasto "Ctrl" e la linea di divisione apparirà in verde.

Dopo la divisione, salvalo con il pulsante "Applica".

Se si fa clic sul triangolo nel file immagine del progetto per espanderlo, è possibile vedere che lo sprite è stato diviso.

Posizionamento e animazione degli sprite

Trascinate lo sprite impostato nella vista e posizionatelo.

Quindi apparirà una finestra di dialogo, quindi salvala NumberAnimation come . Questo file contiene le impostazioni dell'animazione.

Il primo sprite viene inserito nella vista e nel progetto vengono creati un controller di animazione e una clip di animazione. Se l'immagine è piccola, impostare la scala per ingrandirla.

A questo punto, verranno applicate le impostazioni di animazione predefinite, quindi puoi semplicemente eseguire il gioco. Dovresti essere in grado di vedere che l'animazione dello sprite si muove non appena inizia il gioco.

Impedire il ciclo delle animazioni

Selezionare il file di clip di animazione (NumberAnimation.anim) dal progetto.

Nell'inspector, c'è una casella di controllo per "Tempo di loop", quindi deselezionala.

Se esegui il gioco, vedrai che l'animazione si ferma a 24. È efficace per gli effetti di esplosione una tantum.

Modificare la velocità dell'animazione

Selezionare lo sprite che si desidera animare dalla gerarchia.

Selezionare quindi la scheda Animazione. Se non disponi di una scheda Animazione, seleziona Finestra > Animazione > Animazione dal menu.

C'è un numero chiamato "campione", che è un numero di volte per cambiare le immagini in un secondo. In questo esempio, l'animazione è di 24 fotogrammi, quindi l'animazione viene ripetuta ogni 2 secondi.

Se diminuisci questo numero, la velocità dell'animazione sarà più lenta e se la aumenti, la velocità aumenterà.

Informazioni su altre impostazioni di animazione avanzate

Le varie impostazioni di animazione sono spiegate separatamente nei suggerimenti specifici per l'animazione. Queste impostazioni non sono esclusive delle animazioni sprite, ma non sono esclusive del È lo stesso che impostare altre animazioni di movimento e animazioni 3D.

In questo suggerimento, spiegheremo come passare da un foglio sprite a un'animazione.