Crea un timer animato personalizzato per i giochi sensibili al tempo. Con le animazioni UI, puoi far lampeggiare e scomparire il timer o anche aggiungere un materiale personalizzato per il conto alla rovescia che circonda l'orologio.
Questo tutorial mostra come:
Imposta un Materiale.
Anima un quadrante.
Cambia il colore dell'orologio.
Crea un widget utente in Esplora contenuti seguendo le istruzioni nel tutorial UI pop-up.
Passaggio 1: imposta i widget
Una volta creato il widget utente, fai due volte clic sulla miniatura del widget utente per aprire l'Editor widget.
Trascina un widget Overlay nel grafico del widget e ridimensionalo a 1920 x 1080 trascinando l'angolo in basso a destra. Questo widget funge da schermata in cui verrà visualizzata la UI.
Fai clic con il tasto destro del mouse sul widget Overlay nel pannello Gerarchia per rinominare il widget in Root. Questo nome ti ricorda anche che è il widget che funge da modello dello schermo.
Trascina un secondo widget Overlay nel widget Radice. Questo widget conterrà tutti i widget che compongono il design e il funzionamento del timer animato.
Rinomina il secondo widget Overlay in ParentContainer nel pannello Gerarchia.
Nel pannello Dettagli, imposta le seguenti proprietà:
Padding = 25.0
Allineamento orizzontale = Allineamento al centro orizzontalmente
Trascina un widget Riquadro dimensione nel widget ParentContainer. Questo determinerà e applicherà la dimensione dei suoi widget figli. I Widget figli del Riquadro dimensione diventeranno la Faccia dell'orologio.
Rinomina il widget Riquadro dimensione in BGSizeBox nel pannello Gerarchia.
Nel pannello Dettagli, imposta Allineamento orizzontale e Allineamento verticale su Allineamento centrale.
Seleziona la larghezza minima desiderata e l'altezza massima desiderata per attivare questa opzione, quindi imposta le proprietà su 130.0 .
Il contenitore deve trovarsi nel widget radice come mostrato di seguito
Trascina un widget Immagine nel widget BGSizeBox.
Rinomina il timer del widget Immagine nel pannello Gerarchia.
Nel pannello Dettagli, imposta Allineamento orizzontale e Allineamento verticale su Allineamento centrale.
Aggiungi un'istanza materiale alla proprietà Pennello > Immagine. Questo potrebbe essere un materiale che esegue il conto alla rovescia del tempo.
Il materiale riempie lo spazio all'interno del widget Contenitore genitore.
Trascina un widget Casella di testo nel widget Contenitore genitore.
Rinomina il widget Casella di testo in TimerText nel pannello Gerarchia.
Nel pannello Dettagli, imposta la proprietà Testo su 00:00.
Il widget Testo timer si trova direttamente al centro del widget utente.
Successivamente, animerai il widget Testo del timer per rendere il tempo più dinamico durante lo stato di urgenza.
Passaggio 2: anima il testo del timer
Per creare una sensazione di pericolo imminente nello stato di urgenza durante gli ultimi secondi del timer, anima l'ora dell'orologio.
Nell'animazione creata di seguito, il testo del timer si ingrandisce, diventa rosso e scompare. Questa animazione si ripeterà per la durata della Modalità Urgenza impostata nel dispositivo Timer.
Fai clic su Animazioni in fondo alla schermata dell'Editor widget. Si apre un pannello Sequencer in cui puoi creare animazioni e aggiungere widget alla sequenza di animazione.
Fai clic su +Animazione per creare un file di animazione nel tuo widget utente.
Assegna un nome all'animazione Urgenza. Questa animazione verrà Imposta in seguito quando aggiungerai le associazioni al Widget Utente.
Un quadrato blu SELECTED circonda il grafico widget.
Fai clic su +Aggiungi per aprire l'elenco degli oggetti che possono essere aggiunti all'animazione nel widget utente.
Nel pannello Hierarchy, seleziona il widget TimerText.
Seleziona TimerText dall'elenco per aggiungere TimerText al pannello Sequencer.
Accanto a TimerText, seleziona l'icona + per aprire l'elenco delle proprietà che possono essere animate.
Seleziona **Trasforma** dall'elenco. Questo aggiunge tutti i modi in cui puoi trasformare il testo: traslazione, rotazione, scala e taglio.
Apri le opzioni Scala e seleziona l'icona + Keyframe per aggiungere keyframe alla timeline. Le opzioni dell'asse X e dell'asse Y aumentano e diminuiscono le dimensioni del testo quando si inseriscono nuovi valori.
Sposta la Testina di riproduzione nella timeline a 0,25 secondi, modifica i valori dell'Asse X e dell'Asse Y a 1,5, quindi premi l'icona +keyframe accanto alle opzioni dell'Asse X e dell'Asse Y. I keyframe vengono visualizzati nella timeline mostrando una progressione sul TimerText.
Sposta la Testina di riproduzione nella timeline a 0.5 secondi, modifica i valori dell'Asse X e dell'Asse Y a 2.0, quindi premi l'icona +keyframe accanto alle opzioni dell'Asse X e dell'Asse Y. Nella timeline vengono visualizzati keyframe aggiuntivi che mostrano una progressione del testo.
Seleziona l'icona + accanto a TimerText e seleziona Colore e opacità dall'elenco. In questo modo vengono aggiunte le Proprietà Rosso, Verde, Blu e Alpha al Sequencer.
Reimposta la Testina di riproduzione nella timeline e seleziona l'icona + keyframe accanto a Colore e opacità. In questo modo viene impostato il primo keyframe per ciascuna delle Proprietà Colore e opacità nella timeline.
Espandi Colore e opacità, modifica il valore del rosso in 1.0, il valore del verde in 0.0 e i valori del blu in 0.0. Questo crea un colore rosso.
Sposta la Testina di riproduzione a 0.25 secondi, quindi seleziona l'icona + keyframe accanto a ciascuna delle Proprietà in Colore e opacità. In questo modo vengono aggiunti keyframe alla timeline.
Sposta la Testina di riproduzione a 0.5 secondi, modifica il valore Alpha a 0.0 e seleziona l'icona + keyframe. Quando l'animazione raggiunge gli ultimi keyframe nella timeline, il testo scompare.
Se sposti la Testina di riproduzione avanti e indietro lungo la timeline, vedrai l’animazione creata riprodotta nel Grafico Widget.
Successivamente, aggiungerai un modello di visualizzazione e le associazioni di visualizzazione per sostituire il dispositivo Timer con il widget utente.
Passaggio 3: Aggiungere le associazioni di visualizzazione
Per sostituire l'interfaccia utente predefinita del dispositivo Timer, associa il widget Casella di testo (TimerText) alle impostazioni del dispositivo Timer.
Dal menu Windows, seleziona Viewmodel. Si apre la finestra Viewmodel.
Fai clic su +Visualizza modello, quindi seleziona Dispositivo - Modello di visualizzazione Timer > Seleziona. Tutti i modelli di visualizzazione del dispositivo Timer sono ora disponibili per essere associati al tuo Widget Utente.
Nel pannello Hierarchy, seleziona il widget TimerText.
Fai clic su Visualizza associazioni nella barra degli strumenti inferiore per aprire il pannello Visualizza associazioni.
Fai clic su +Widget TimerText per aggiungere il widget TimerText al pannello Visualizza associazioni.
Seleziona il campo TimerText per aprire il menu a discesa delle proprietà del widget menu.d
Nel menu a discesa, seleziona TimerText > Testo > Seleziona. Questo identifica il testo del Widget TimerText come Proprietà associata.
Seleziona il campo vuoto a destra per aprire il menu a discesa delle associazioni.
Dal menu a discesa delle associazioni, seleziona TimerText ViewModel > Current Time > Select. Questa operazione associa il widget TimerText all'ora corrente del dispositivo Timer e visualizza l'ora corrente sullo schermo.
Successivamente, aggiungerai l'animazione al viewmodel in modo che venga riprodotta sullo schermo durante la modalità Urgenza.
Step 4: Aggiungi l'animazione
Aggiungerai l'animazione in modo simile a come hai aggiunto le associazioni di TimerText nel pannello Visualizza associazioni.
Seleziona +Aggiungi condizione nella parte superiore del pannello Associazioni visualizzazione. In questo modo, viene aggiunta una riga condizionale al pannello Associazioni visualizzazione.
Apri il menu a discesa del viewmodel e seleziona il widget utente > Seleziona. In questo modo viene aggiunto il widget utente alla condizione.
Seleziona il campo a sinistra per aprire il menu a discesa dell'associazione viewmodel.
Seleziona il ViewModel Timer modalità creativa > Is Urgency > Select. Questo utilizza IsUrgency come Proprietà di confronto per vedere se è uguale a un valore specifico, quindi, in base al valore restituito (true/false), attiva l'animazione.
Modifica il campo del tempo in 1.0. Ciò significa che se Is Urgency è uguale a 1.0, il valore è vero e l'animazione viene riprodotta.
Seleziona il campo a destra per aprire il menu a discesa della coda e seleziona Widget utente > Animazione coda di riproduzione > Seleziona. Ora l'animazione creata sarà in coda per la riproduzione quando la modalità Is Urgency è uguale a 1.0.
Accanto a In animazione, seleziona l'icona di associazione in modo che si trasformi in un'icona di collegamento blu.
Seleziona il campo Nell'animazione, quindi seleziona Widget utente > Nome animazione > Seleziona. L'animazione selezionata viene riprodotta quando è in coda.
Personalizza il valore Inizia alle ore su 10.0. Questo valore è il secondo/frame in cui deve iniziare la riproduzione dell'animazione. Se impostato su 0.0, significa che riprodurrà l'animazione a partire dal frame 0.0 secondi/frame.
Imposta la velocità di riproduzione su 0,5. In questo modo l'animazione viene riprodotta a velocità dimezzata rispetto a quella Imposta nel Sequencer.
Fai clic su Compila per salvare il tuo widget utente.
Passaggio 5: aggiungi il dispositivo Timer
L'ultimo passaggio consiste nell'aggiungere un dispositivo Timer alla viewport e personalizzarne le impostazioni.
In Esplora contenuti, seleziona la cartella Fortnite > Dispositivi per aprire tutte le cartelle dei dispositivi.
Digita Timer nella barra di ricerca della Visualizzazione asset per visualizzare il dispositivo Timer.
Trascina il dispositivo Timer nella viewport.
Nel pannello Dettagli, imposta la durata su 30.0 secondi.
Espandi l'opzione Avanzate per visualizzare la classe widget personalizzato.
Seleziona il tuo widget utente t dal menu a discesa Classe widget personalizzata.
Nel secondo Imposta di opzioni Avanzate, utilizza le impostazioni seguenti:
Può interagire = No
Comportamento di completamento = Ripristina
Visibile durante il gioco = Nascosto
Abilita modalità urgenza = Verifica
Tempo modalità urgenza = 10.0 secondi
Ora i giocatori non possono interagire con il dispositivo, e quando il timer esaurisce il tempo di durata impostato, viene reimpostato. Con la Modalità Urgenza abilitata, la tua animazione personalizzata sarà ora in coda e riprodotta per il tempo impostato in Modalità Urgenza.
Salva le modifiche, quindi esegui il playtest del progetto per vedere il widget utente al lavoro nell'HUD.
Il tuo Playtest deve far sì che il tempo personalizzato sostituisca il dispositivo Timer predefinito e riproduca l'animazione durante il tempo specificato.
In autonomia
Esistono diversi modi per rendere il timer univoco per il tuo progetto.
Aggiungi un materiale intorno a TimerText che scompare lentamente man mano che il timer si esaurisce.
Aggiungi una texture per circondare il TimerText che assomigli a un orologio.
Sposta il timer in un angolo anziché al centro dello schermo.