Crea UI dinamiche con materiali mutevoli che si aggiornano in base a eventi e dati di gameplay. Per rendere dinamica la tua UI, devi utilizzare una combinazione di materiali UI, Associazioni visualizzazione e tre delle funzioni di conversione Imposta parametro materiale (Imposta texture, Scalare e Parametro vettoriale).
In Unreal Editor per Fortnite (UEFN) ti viene fornito un materiale di base con una serie di parametri. Utilizza il dispositivo Tracciatore tenere traccia delle eliminazioni in un widget tipo barra di avanzamento, come esempio di un materiale che si aggiorna dinamicamente in base ai tuoi progressi nell'eliminazione dei nemici.
Creazione di un'istanza materiale
Per ulteriori informazioni sulle istanze di materiale, consulta la sezione Creazione e utilizzo di istanze di materiale nella documentazione di Unreal Engine.
Tutti gli asset utilizzati per creare queste istanze materiale si trovano in UEFN in modo nativo. Per informazioni su come creare il materiale in questo esempio, consulta la pagina Materiale indicatore nella sezione tutorial Materiale.
Crea un'istanza materiale di M_Tracker, denomina l'istanza materiale MI_TrackerExample.
Nella nuova Istanza materiale, modifica IconScaleX e IconScaleY in base alle tue preferenze. I materiali in questo esempio sono stati impostati su 0,7 ciascuno.
Puoi personalizzare il ProgressColor di eliminazione che riempie il widget in base ai tuoi avanzamenti. Lascia deselezionati TrackerProgress, Icon e IconColor. Questi verranno utilizzati in seguito con il dispositivo Tracciatore.
Le icone si trovano nella cartella Fortnite in Texture > Icone.
Impostazione del widget Tracciatore
Crea un widget Tracciatore personalizzato in UMG a cui è possibile fare riferimento nel dispositivo Tracciatore e tenere traccia delle eliminazioni dei giocatori nella UI di eliminazione personalizzata.
Fai clic con il pulsante destro del mouse in Esplora contenuti e seleziona Interfaccia utente > Blueprint widget > Widget utente.
Crea un semplice widget Tracciatore che mostri il materiale del tracciatore e un titolo del Tracciatore come nell'esempio seguente.
Trascina un Overlay nel widgetgraph. In questo modo vengono sovrapposti tutti i pezzi che compongono il widget. Fornisce anche un modo per determinare dove sullo schermo appare questo widget.
Nidifica una Casella impilata all'interno dell'Overlay in modo da disporre il Materiale Tracciatore e il titolo da sinistra a destra.
Nidifica un Overlay all'interno della Casella impilata in modo da poter creare un Materiale Tracciatore per sovrapporre la Casella impilata con un semplice sfondo scuro.
All'interno dell'Overlay, nidifica due widget Immagine. Premi F2 per rinominarli TrackerBackground e TrackerMaterial.
Seleziona TrackMaterial per aprire le relative opzioni nel pannello Dettagli. Dal pannello Dettagli, seleziona Pennello > Immagine e cerca il materiale MI_TrackerExample che hai creato.
Imposta le Dimensioni immagine seguente su X=96,0, Y=96,0. Deve essere abbastanza grande da essere visibile nel gioco.
Ora che il materiale Tracciatore è impostato, devi creare lo sfondo del materiale in modo che sia più leggibile.
Seleziona TrackerBacking e, nella Gerarchia, poi dal pannello Dettagli, seleziona Pennello > Disegna come > Riquadro con bordi arrotondati.
Imposta l'opzione Tinta qui sopra su un colore neutro per una migliore leggibilità. In questo esempio, la tinta è stata impostata su 3A3A3AFF nel campo Hex sRGB.
Imposta le opzioni Allineamento orizzontale e Allineamento verticale su Riempi. In questo modo TrackerBacking riempie il contenitore che contiene TrackerMaterial.
Ora hai a disposizione uno sfondo per il tuo TrackerMaterial facilmente leggibile in qualsiasi scena di gioco!
Impostazione del testo del Tracciatore
Dopo aver fatto riferimento al materiale del Tracciatore nel widget Tracciatore, imposta il testo che informa il giocatore su ciò che viene tracciato nella UI.
Nidifica un Blocco di testo nella Casella impilata che contiene l'Overlay. Rinomina il blocco di testo in TrackerTitle.
Seleziona TrackerTitle nella Gerarchia, dal pannello Dettagli imposta Allineamento verticale su Allinea verticalmente al centro. In questo modo il testo è sempre allineato al centro rispetto a TrackerMaterial.
Apporta alcune modifiche stilistiche al carattere riducendo le dimensioni, aggiungendo un contorno o modificando il carattere tipografico per adattarlo al tuo tema.
In questo esempio, sono state apportate le modifiche seguenti: Dimensione carattere = 24 Carattere tipografico = Grassetto Contorno = Rosso scuro
Puoi personalizzare tutte le impostazioni relative al carattere nella categoria Aspetto.
Una volta completati tutti gli ultimi ritocchi di progettazione, devi aver configurato il TrackerMaterial e il TrackerTitle.
Per aggiungere un po' di spazio tra i due oggetti, aggiungi una spaziatura interna a destra dell'Overlay contenente il TrackerMaterial:
Seleziona Overlay.
Dal pannello Dettagli, espandi Spaziatura interna.
Modifica la Spaziatura interna destra in 16px.
Lo spazio viene aggiunto tra l'immagine e il testo.
Se vuoi modificare facilmente la spaziatura tra più oggetti, puoi inserire un widget Immagine nella Casella impilata che contiene questi oggetti, impostare la Dimensione dell'immagine X allo spazio desiderato e impostarla su Disegna come nessuno. Quello che succede è che l'immagine non viene visualizzata ma occupa comunque spazio nella tua Casella impilata!
Semplifica la gestione della spaziatura tra gli oggetti e non la ricerca di spaziature interne in ogni widget.
Impostazione dei parametri del materiale
Successivamente, associa i valori del dispositivo Tracciatore ai parametri del materiale nel widget Tracciatore.
Aggiunta di un modello di visualizzazione
Aggiungi il modello di visualizzazione Tracciatore al widget selezionando Finestra > Modello di visualizzazione nel menu principale.
Nella finestra Modello di visualizzazione, seleziona +Modello di visualizzazione.
Nella finestra popup, seleziona Dispositivo - Modello visualizzazione Tracciatore.
Dalla barra del menu, seleziona Finestra > Associazioni visualizzazione per aprire il pannello Associazioni visualizzazione.
Ora puoi iniziare ad associare i dati del Tracciatore per manipolare il tuo widget.
Impostazione di parametro scalare
Un Parametro scalare accetta un valore Int o Float. Ad esempio, la barra di avanzamento si riempie con il TrackerMaterial in base al numero di eliminazioni presenti nel Tracciatore.
Il materiale è impostato per convertire il numero di eliminazioni dal dispositivo Tracciatore per riempire il TrackerMaterial. Tutto quello che devi fare è associare i dati al parametro del materiale Avanzamento in MI_TrackerExample.
Avanzamento di 3.0 vs 8.0 in MI_TrackerExample. Questo è molto utile!
Seleziona il widget TrackerMaterial, quindi fai clic su +Aggiungi widget nella finestra Associazioni visualizzazione.
Nel campo a sinistra, seleziona TrackerMaterial > Pennello.
Nel campo a destra (contenente i dati che si desidera associare al pennello di TrackerMaterial), seleziona Funzioni di conversione > Imposta parametro scalare.
In questo modo viene eseguita la funzione Imposta parametro scalare sull'impostazione Pennello. Poiché il tuo pennello ha attualmente MI_TrackerExample, cercherà un parametro scalare che hai specificato e gli passerà un valore.
Digita TrackerProgress nel campo Nome parametro, per far sì che il materiale si riempia in base all'avanzamento del Tracciatore.
È importante non commettere errori nel parametro perché non sarà in grado di trovare il parametro giusto sul materiale. Se hai dimenticato come viene chiamato il parametro, apri l'istanza materiale e cerca i parametri sulla destra.
Seleziona l'icona Collegamento accanto a Valore, seleziona MVVM_UEFN_Tracker > Valore dal menu a discesa. In questo modo vien associato l'avanzamento corrente del Tracciatore.
Ora hai l'avanzamento corrente del Tracciatore che alimenta direttamente il tuo materiale! Il materiale del Tracciatore si riempie lentamente quando il giocatore assegnato al Tracciatore ottiene un'eliminazione!
Imposta parametro Vettore
Un parametro Vettore accetta un valore Vector4. I vettori sono in genere utilizzati per i colori: RGBA (i quattro vettori), utilizzerai un Vector4 per cambiare il colore dell'icona in base a ciò che è impostato nel dispositivo.
Per ulteriori informazioni sui vettori, consulta la sezione Espressioni materiali vettore nella documentazione di Unreal Engine.
Seleziona TrackerMaterial nella Gerarchia, quindi apri la finestra Associazioni visualizzazione e seleziona +Aggiungi widget.
Seleziona le proprietà TrackerMaterial > Pennello nel campo vuoto a sinistra.
Seleziona Funzioni di conversione > Imposta parametro vettore nel campo vuoto a destra.
Come spiegato in precedenza, questa associazione ottiene il Pennello da TrackerMaterial (in questo caso, è MI_TrackerExample), e imposta un Parametro vettore specificato per l'istanza materiale. Puoi impostare il colore dell'icona in modo che segua le opzioni impostate dal dispositivo Tracciatore.
Digita IconColor nel campo Nome parametro.
Seleziona l'icona Collegamento accanto a Valore, quindi seleziona MVVM_UEFN_Tracker > Colore. In questo modo il valore viene impostato sulla proprietà Colore icona del modello di visualizzazione Tracciatore.
Qualunque sia il colore icona impostato sul dispositivo Tracciatore, viene passato al materiale. Se vuoi un'icona arancione, impostala sul dispositivo e la colorerà per te! Il materiale utilizzato in questo esempio è già impostato per questo.
Imposta parametro texture
Un parametro Texture accetta un valore Texture2D. Le texture sono in genere utilizzate per le immagini o le icone, quindi la utilizzeremo per cambiare la nostra icona in base a ciò che è impostato nel dispositivo!
Per maggiori informazioni sulle texture, consulta la sezione Texture nella documentazione di Unreal Engine.
Seleziona TrackerMaterial nella Gerarchia, quindi nella finestra Associazioni visualizzazione seleziona +Aggiungi widget.
Nel campo vuoto a sinistra, seleziona MVVM_UEFN_Tracker > Pennello.
Nel campo vuoto sulla destra, seleziona Funzioni di conversione > Imposta parametro texture.
Digita Icona nel campo Nome parametro.
Evita errori durante la digitazione del nome del parametro! Se dimentichi il nome del parametro, puoi consultare MI_TrackerExample per l'elenco dei parametri disponibili da impostare.
Seleziona l'icona Collegamento accanto al campo Valore e seleziona MVVM_UEFN_Tracker > Icona dal menu a discesa. In questo modo il valore viene associato alla proprietà Icona del modello di visualizzazione Tracciatore.
Il parametro Texture è impostato. Ora, qualsiasi icona sia impostata nel tuo dispositivo Tracciatore, la passerà al widget!
Associa il testo del Tracciatore al nome del Tracciatore
Successivamente, associa il titolo del Tracciatore creato alla stessa impostazione nel dispositivo Tracciatore.
Seleziona TrackerTitle nella Gerarchia, quindi apri la finestra Associazioni visualizzazione e seleziona +Aggiungi widget.
Nel campo vuoto a sinistra, seleziona TrackerTitle > Testo dal menu a discesa.
Nel campo vuoto a destra, selezionaMVVM_UEFN_Tracker > Nome dal menu a discesa.
Questa associazione trasmette il titolo del tuo Tracciatore al Blocco di testo.
Impostazione del dispositivo Tracciatore
Successivamente, farai riferimento al widget che hai creato in UMG nel dispositivo Tracciatore. In questo modo l'UI di eliminazione viene visualizzata nell'HUD.
Aggiungi un dispositivo Tracciatore al tuo progetto.
Assegna un nome al Titolo Tracciatore. Questo nome viene visualizzato nel testo TrackerTitle del widget.
Aggiungi il tuo widget al campo Widget HUD.
Modifica i campi Icona incarico in qualsiasi icona che desideri visualizzare sul tuo Tracciatore. In questo modo si esegue l'override dell'icona predefinita Alien in MI_TrackerExample.
Seleziona un colore in Colore icona. L'icona impostata sopra assume il colore selezionato.
Continua a configurare le altre impostazioni per aggiungere il Tracciatore al tuo giocatore.
Risultato finale
Voilà! Il widget Tracciatore personalizzato viene visualizzato in alto a sinistra. Indipendentemente dal fatto che elimini zombie o altri giocatori, il widget si riempie lentamente! È così che colleghi i dati di gameplay ai tuoi widget personalizzati utilizzando Imposta parametri materiale.
