Animazione della UI

Utilizza il Sequencer in UMG per animare i widget. I widget si animano in base ai valori inseriti in un parametro materiale.

Configurazione del widget

Il widget utilizza il Widget di tracciamento dell'esempio in Impostazione dei parametri del materiale in UMG.

Crea un Widget di tracciamento se non ne hai uno pronto per l'uso. Quindi, esegui le operazioni seguenti:

1. Aggiungi un Blocco di testo che mostri +1 sopra il Widget di tracciamento esistente. Ciò indica che il tracciatore di eliminazione viene incrementato in base al numero di zombie eliminati.

   

2. In Rendering > Opacità rendering, imposta Opacità rendering su 0.0 per questo blocco di testo.

   

3. Il widget è pronto per essere animato.

Impostazione dell'animazione

Per aggiungere un'animazione alla tua UI, apri il Sequencer sotto il Grafico eventi per animare l'icona e premi "+1". Poi imposta l'animazione nel Sequencer.

In questo esempio, l'icona si apre e il testo "+1" appare quando il Tracciatore del giocatore avanza come nella gif seguente.

1. Apri la finestra Animazione in Finestra > Animazioni.

   

2. Fai clic su +Animazione e denomina l'animazione OnIncrement.

   

Animazione della visibilità di un widget

Per animare la UI, devi identificare il widget da animare, quindi puoi animare il materiale o la texture associata a quel widget nel Sequencer, all'interno della finestra di animazione. Avvia l'animazione selezionando IncrementText (+1).

1. Seleziona OnIncrement, quindi +1 testo, poi +Aggiungi > Incrementa testo.

   

2. Seleziona l'icona +più nella traccia IncrementText e poi Opacità rendering. Ciò ti permette di tenere traccia dell'opacità sulla timeline dell'animazione.

   

3. Imposta un keyframe per l'inizio dell'animazione. Determina il punto in cui il testo inizia a comparire e scomparire.

   

4. Imposta l'Opacità rendering su:

   1. 1.0 a 0.25 secondi

   2. 0.0 a 0.50 secondi

   

5. In questo modo, avrai un'animazione che fa comparire e scomparire il testo ogni volta che il giocatore subisce un'eliminazione.

   

Animazione della posizione di un widget

Aggiungi un'animazione alla posizione del widget di testo in modo che il testo si muova verso l'alto quando è visibile prima di svanire.

1. Fai clic sull'icona +più su IncrementText e seleziona Trasformazione.

   

2. Espandi Trasformazione > Traslazione e imposta il valore Y in base a quanto vuoi che il testo +1 si sposti verso l'alto mentre è visibile. In questo esempio, i keyframe di Traslazione Y sul testo sono impostati su:

   1. 0.0 a 0.0s

   2. -20.0 a 0.25s

   3. -20.0 a 0.50s

   

   Ricordati di impostare i keyframe per ogni movimento del testo.

Il testo si sposta verso l'alto quando appare.

Animazione della scala di un widget

Aumenta le dimensioni del testo +1 animato mentre si sposta per attirare l'attenzione sulle eliminazioni animando le impostazioni di scala del widget. Questa animazione dà l'illusione del testo che "spunta" sullo schermo.

1. Espandi IncrementText > Trasformazione > Scala. I valori X e Y vengono visualizzati in Scala.

   

2. Imposta Scala X e Y come keyframe sulla tua timeline OnIncrement. In questo esempio, i keyframe Scala sono stati impostati su:

   1. 0.0 a 0.0s

   2. 2.0 a 0.10s

   3. 0.0 a 0.50s

Il testo +1 compare con un effetto d'impatto ogni volta che parte l'animazione.

Animazione di un Parametro materiale di un pennello Immagine

Per far sì che l'icona nel materiale si espanda con l'avanzamento del Tracciatore, accedi al materiale tramite il Sequencer.

1. Seleziona l'immagine TrackerMaterial, quindi fai clic su +Aggiungi > TrackerMaterial nell'animazione OnIncrement.

   

2. Fai clic sull'icona +più nella traccia TrackerMaterial e seleziona Materiale Brush.Brush. In questo modo viene aggiunta una traccia materiale alla proprietà Materiale Brush.Brush.

   

3. Fai clic sull'icona +più nella nuova Traccia Brush.Brush.Material e seleziona IconScaleX e IconScaleY.

   

   Espandi IconScaleX e IconScaleY. Puoi manipolare facilmente questi parametri in Sequencer quando viene riprodotta l'animazione OnIncrement. Utilizzando queste impostazioni puoi animare l'icona in scala verticale verso l'alto e verso il basso.

4. Imposta sia IconScaleX che IconScaleY su:

   1. 0.7 a 0.00

   2. 1.0 a 0.25

   3. 0.7 a 0.00

   

In questo modo, l'animazione utilizza i parametri di TrackerMaterial per animare l'icona come nella gif seguente.

Aggiunta di una condizione di animazione

Ora che l'animazione è pronta collegala a un valore di gameplay, in modo che riproduca un'animazione quando cambia un valore di gameplay.

1. Apri la finestra Visualizza associazioni selezionando Finestra > Visualizza associazioni.

   

2. Nella finestra Visualizza associazioni, seleziona +Aggiungi condizione.

   

   La casella a sinistra rappresenta il valore di gameplay di cui vuoi tenere traccia per le modifiche in modo che riproduca l'animazione sulla destra. Al momento, +Aggiungi condizione accetta solo valori Float o Int.

   

3. Seleziona la casella a sinistra, quindi MVVM_UEFN_Tracker > Valore. Tiene traccia dell'Avanzamento del tracciatore riproducendo un'animazione ogni volta che il valore del Tracciatore aumenta.

   

4. Fai clic sul menu a discesa centrale e seleziona Più di (>).

   Le 2 caselle centrali indicano le condizioni che vuoi soddisfare per riprodurre l'animazione. Ogni volta che il valore cambia, controlla se si trova all'interno di questa condizione e, in caso affermativo, riprodurrà l'animazione.

   Impostandolo su Più di (>) 0.0, la UI riprodurrà l'animazione ogni volta che questo valore cambia.

   

5. Seleziona la casella a destra, quindi seleziona WBP_{YourWidgetName} > Animazione di riproduzione coda. La casella a destra rappresenta l'azione da intraprendere quando questo valore soddisfa la condizione. In questo caso, per riprodurre l'animazione OnIncrement creata in precedenza.

   

   In Associazioni visualizzazione viene visualizzato un elenco di opzioni relative all'animazione da riprodurre.

   • Animazione in entrata = Riproduzione

   • Avvia a tempo = Seleziona un orario

   • Num loop da riprodurre = Numero di volte in cui l'animazione viene ripetuta

   • Modalità riproduzione = Avanti, Inverso o Ping Pong

   • Velocità di riproduzione = Accelera o rallenta l'animazione

   • Ripristina stato = Ripristina l'animazione al suo stato predefinito

   

6. Fai clic sull'icona del link accanto a InAnimation, quindi seleziona WBP_{YourWidgetName} > OnIncrement > Seleziona.

   

Ora la tua animazione è configurata per essere riprodotta ogni volta che il Tracciatore avanza.

Risultato finale

Man mano che i giocatori eliminano nemici o PNG, la UI mostra l'avanzamento dell'eliminazione con l'icona che appare e il +1 che appare, spunta e scompare.