Crea barre Salute e Scudo personalizzate in Unreal Motion Graphics (UMG) utilizzando i materiali UI, le texture UI e vari widget nella tavolozza per sostituire l'UI predefinita di Fortnite. Le barre Salute e Scudo si possono aggiungere a una targa o posizionare separatamente nell'HUD.
Il design e il posizionamento delle barre Salute e Scudo sono unici per ogni gioco e tengono conto del tipo di gioco (combattimento, multigiocatore cooperativo, gioco di ruolo e altro).
Imposta le istanze di materiale senza modificare i materiali
In questo esempio, utilizzerai una vasta gamma di materiali creati in UEFN. Includono una barra di avanzamento a forma di rettangolo (casella) e cerchio. La barra di avanzamento rettangolare ha anche un'opzione per trasformare la barra di avanzamento in sezioni.
I materiali sono stati impostati utilizzando una combinazione di Funzioni materiali dell'UI Material Lab, parametri esposti all'Istanza materiale e alcuni parametri matematici per far funzionare tutto.
È buona norma utilizzare i materiali per i widget. I materiali si aggiornano dinamicamente in base ai dati di gameplay, ciò aiuta a ottimizzare la UI e fornisce un modo per aggiungere effetti speciali. Le texture vengono utilizzate solo per un design più complicato che non si può ottenere facilmente con le funzioni matematiche.
Per maggiori informazioni sull'utilizzo dei materiali nell'ambito della progettazione e implementazione della UI, consulta Materiali utili UI. Il tutorial contiene maggiori informazioni sull'utilizzo dei Campi distanza con segno (SDF) per la creazione di materiali con barra di avanzamento dinamica in UEFN e UE.
Un'istanza materiale crea istanze di un materiale con parametri che possono facilmente modificare l'aspetto di quel materiale senza ricompilarlo. Per creare un'istanza di un materiale, fai clic con il pulsante destro del mouse su Materiale e seleziona Crea istanza materiale.
Per maggiori informazioni sulle istanze di materiale, consulta la sezione Creazione e utilizzo di istanze di materiale nella documentazione di Unreal Engine.
Ci sono alcuni parametri esposti in UEFN. Nel materiale di esempio, il parametro Avanzamento modifica la quantità di riempimento della barra. L'intervallo è normalizzato a 0-100 utilizzando il nodo ConstantBiasScale della M_CircleProgressBar per adattarsi all'intervallo Fortnite HP.
Puoi modificare il Colore di sfondo (BGColor) e il Colore del liquido che sono gradienti. Successivamente, visualizza in anteprima le modifiche nella viewport di anteprima a sinistra.
Puoi creare tutte le istanze materiale necessarie per vari scopi. In questo esempio, vengono utilizzati due materiali, uno per HP e un altro per lo scudo.
Buone prassi per il layout del widget
In UMG, utilizza il pannello Canvas solo se hai bisogno di una posizione assoluta sullo schermo o se devi manipolare con precisione la posizione dei vari widget.
Per widget più piccoli, utilizza:
Sovrapposizione
Caselle impilate
Riquadri dimensione (se è necessario vincolare il widget a una dimensione specifica)
Pannello griglia (se vuoi mantenere il dimensionamento del contenitore ma vuoi manipolare la posizione dei widget figlio)
Una volta che i materiali sono pronti, crea un Blueprint widget in Esplora contenuti, quindi fai due volte clic sulla miniatura del widget per aprire l'Editor UMG.
Utilizzo di un pannello canvas
In questo esempio, il pannello Canvas viene utilizzato per posizionare le barre Salute e Scudo in una posizione assoluta sull'HUD, ancorando i widget ad alcune parti dello schermo.
Per i singoli elementi HUD, è consigliabile utilizzare una combinazione dei seguenti widget:
Overlay - Se devi sovrapporre un widget uno sopra l'altro
Caselle impilate - Se devi disporre i widget in orizzontale o in verticale
Riquadri dimensione - Se devi vincolare il tuo widget a una dimensione specifica
Pannello griglia - se vuoi mantenere il dimensionamento del contenitore ma vuoi manipolare la posizione dei widget figlio al sun interno
Con questo in mente, inizia a strutturare i widget Salute e Scudo.
Crea un contenitore in cui vivere l'intera UI HUD, per utilizzare un Pannello canvas come contenitore per ospitare tutti i singoli elementi HUD.
In questo esempio, Salute e Scudi saranno ancorati nella parte inferiore centrale dello schermo.
Nidifica una Casella impilata sotto la Canvas per creare il contenitore per Salute e Scudi. Per questo progetto, questi elementi saranno impilati da sinistra a destra.
Se desideri disporre i widget in una Casella impilata in verticale, modifica l'impostazione Orientamento nel pannello Dettagli in Comportamento > Orientamento.
Rinomina i tuoi widget selezionandoli e premendo F2 mentre li aggiungi alla tua Gerarchia per una migliore organizzazione.
Seleziona la Casella impilata nella Gerarchia e nel pannello Dettagli devi visualizzare l'opzione Ancoraggi. Apri l'opzione premendo Maiusc + Control. Ancora la Casella impilata al centro inferiore dell'HUD selezionando l'opzione in Riga 3, Colonna 2.
La Casella impilata deve ora essere ancorata in basso. L'icona del fiore mostra dove è ancorato il widget nel pannello Canvas.
Sposta la Casella impilata verso l'alto, in modo che non resti attaccata al bordo inferiore dello schermo. A tale scopo, modifica l'opzione Posizione Y.
I valori positivi spostano il widget verso il basso, mentre i valori negativi lo spostano verso l'alto.
Seleziona la casella Ridimensiona al contenuto per assicurarti che il contenitore si ridimensioni sempre in base al contenuto al suo interno.
Configurazione della barra HP e del testo
Ora che il contenitore Salute e Scudi è pronto, imposta il widget Salute e Scudi.
Annida una Sovrapposizione sotto la Casella impilata e rinominalo HPOverlay. In questo modo il testo HP si sovrappone alla barra rotonda HP.
Annida un'Immagine in HPOverlay e rinominala HPBar. In questo modo è possibile aggiungere al widget l'istanza materiale creata in precedenza.
Seleziona HPBar nella Gerarchia, in Dettagli sotto Pennello> Immagine seleziona la tua istanza materiale personalizzata della barra Salute.
Per modificare le dimensioni dell'istanza materiale, puoi personalizzare la proprietà Dimensioni dell'immagine sottostante.
Crea un Blocco di testo sotto HPOverlay e rinominalo HPText. In questo modo è possibile aggiungere del testo sopra la barra Salute del cerchio.
Seleziona il Blocco di testo e in Dettagli, imposta l'allineamento Orizzontale e Verticale su Centro. In questo modo il testo è sempre allineato al centro rispetto a HPBar.
Fai clic per ingrandire l'immagine.
Modifica la dimensione del carattere in Aspetto > Carattere > Dimensioni in modo che si adatti alla barra HP.
Fai clic per ingrandire l'immagine.
Fai clic su Compila. Ora hai una barra HP e un testo HP pronti all'uso.
Impostazione della barra Scudo e Testo
Per impostare la barra Scudo e Testo, ripeti gli stessi step precedenti. Questa volta aggiungi uno spazio tra la barra HP e la barra Scudo. Poiché HPShieldsContainer è una Casella impilata, dispone automaticamente i widget figlio orizzontalmente.
Utilizza un widget Immagine all'interno della Casella impilata per aggiungere uno spazio tra le barre Salute e Scudo. Imposta il widget Immagine vuoto eseguendo le operazioni seguenti:
Annida un'immagine sotto la Casella impilata.
Imposta le proprietà del pennello dell'Immagine su Disegna come su nessuno.
Ciò significa che nel widget non verrà visualizzato nulla, ma il widget Immagine occupa comunque spazio nel layout! Ciò ti permette di gestire facilmente la spaziatura tra gli elementi in una Casella impilata senza dover fare affidamento sulla spaziatura interna.
Imposta il Widget Scudo utilizzando la stessa procedura della barra Salute.
Per creare la barra Scudo più rapidamente, duplica HPOverlay facendo clic con il pulsante destro del mouse su HPOverlay nella Gerarchia e selezionando Duplica.
Annida ShieldOverlay sotto l'Immagine dello spaziatore in modo che appaia alla fine della Casella impilata.
I due tipi di barre vengono visualizzati fianco a fianco nel widget!
Rinomina le variabili in ShieldOverlay, ShieldBar e ShieldText, come mostrato nell'immagine della gerarchia widget di seguito.
Ora puoi procedere a creare le associazioni che aggiungono funzionalità alle barre di avanzamento Salute e Scudo.
Associazioni visualizzazione
Aggiunta di un modello di visualizzazione
Un modello di visualizzazione ti consente di aggiungere funzionalità del dispositivo a un Blueprint widget. Il modello di visualizzazione utilizza Associazioni visualizzazione per identificare i widget nella funzionalità del dispositivo blueprint e grafico di quel widget.
Il Modello di visualizzazione Info giocatore controller HUD ti permette di sostituire parti del tuo HUD con un widget personalizzato.
Seleziona Finestra > Modelli di visualizzazione per aprire e aggiungere un Modello di visualizzazione al tuo widget.
Nella finestra Modello di visualizzazione, seleziona +Modello di visualizzazione. Si apre un popup che mostra tutti i modelli visualizzazione attualmente disponibili per l'utilizzo.
Sono disponibili due tipi di modelli di visualizzazione del controller HUD:
Seleziona Dispositivo - Modello di visualizzazione Elenco informazioni giocatore team/squadra Controller HUD dalle opzioni di HUDPlayerInfoListViewModel. In base alle informazioni di cui sopra, visualizzi soltanto le informazioni del giocatore di controllo e non il suo team/squadra.
Seleziona Dispositivo - Modello di visualizzazione informazioni giocatore Controller HUD se vuoi creare widget separati per il giocatore di controllo e la sua squadra/team. Utilizza le proprietà nel modello di visualizzazione Informazioni giocatore Dispositivo - Controller HUD per ciascuno di questi widget. Dovrai quindi creare un widget Pila squadra che associ i modelli di visualizzazione Elenco informazioni giocatore team/squadra ai relativi modelli di visualizzazione.
Il modello di visualizzazione Elenco informazioni giocatore team/squadra ha le stesse informazioni del modello di visualizzazione Informazioni giocatore Controller HUD, ma viene utilizzato in modo diverso in base allo scenario.
Seleziona il modello di visualizzazione elenco informazioni giocatore team/squadra dalle opzioni di HUDPlayerInfoListViewModel. In base alle informazioni di cui sopra, visualizzi soltanto le informazioni del giocatore di controllo e non il suo team/squadra.
Ora è il momento di impostare le associazioni che associano i dati dal modello di visualizzazione al tuo widget!
Impostazione di Associazioni visualizzazione ToText
Seleziona Finestra > Associazioni visualizzazione per aprire la finestra Associazioni visualizzazione.
Seleziona HPText nella tua Gerarchia e scegli Aggiungi widget in Associazioni visualizzazione per associare HPText e mostrare il tuo Numero di salute attuale. Viene visualizzata un'associazione vuota.
La casella a sinistra è la Proprietà widget e la casella a destra sono i dati che vuoi associare alla proprietà widget. Fai clic sulla casella a sinistra per visualizzare un elenco di proprietà del Blocco di testo HPText. Seleziona la proprietà Testo per passare i numeri HP in questa proprietà.
La casella a destra rappresenta i dati che vuoi passare alla proprietà del widget selezionata. Tuttavia, la proprietà Testo accetta solo dati di tipo Testo. Poiché il numero Fortnite HP è espresso in float (es. Double), è necessario convertirlo nel tipo Testo appropriato. Fai clic sulla casella a destra e seleziona Funzioni di conversione > In testo (Double).
Viene visualizzato un ampio elenco di opzioni. Le impostazioni più importanti si trovano in genere nella parte superiore, mentre le altre impostazioni consentono di formattare il valore finale che viene passato nella proprietà Testo.
Fai clic sull'immagine per ingrandirla.
Seleziona l'icona Link accanto a Valore, quindi seleziona il tuo Valore salute dal Modello di visualizzazione del controller HUD.
Fai clic sul campo vuoto e seleziona HUDPlayerInfoListViewmodel nella colonna a sinistra, espandi Info giocatore di controllo a destra e seleziona Salute.
In questo modo viene passata la proprietà Salute, un tipo Float (ad es. Double), tramite la funzione di conversione In testo (Double). In testo (Double) converte la Salute in un tipo Testo in modo che venga visualizzato nel widget. La Salute convertita viene quindi passata alla proprietà Testo del widget HPText.
Ripeti i passaggi precedenti per configurare il widget ShieldText. Le stesse associazioni mostreranno anche i numeri di Scudo.
Impostazione del parametro materiale
Per maggiori dettagli su come funziona Imposta parametro materiale, consulta la pagina Imposta parametro materiale nella documentazione di Unreal Engine.
Ora è il momento di impostare la barra di avanzamento Cerchio. Gli avanzamenti cambiano in base ai livelli di Salute e Scudo del giocatore.
Imposta un'associazione vuota al tuo cerchio HPBar.
Nella casella a sinistra, seleziona HPBar > Pennello. Il pennello contiene l'istanza materiale della barra HP del cerchio.
Nella casella a destra, seleziona Funzioni di conversione > Imposta parametro scalare.
In Nome parametro, inserisci il nome del parametro che modifica l'avanzamento della barra di avanzamento.
Per cercare il nome di questo parametro, apri l'istanza materiale della barra degli HP e guarda i valori dei parametri sulla destra.
Il parametro che controlla la barra di avanzamento è chiamato Avanzamento. Inserisci il nome nel campo Nome parametro.
È importante che il nome del parametro sia lo stesso del parametro dell'istanza materiale, in caso contrario il materiale non funzionerà nel gioco.
Seleziona l'icona Link accanto a Valore. Come in ToText, associa la Salute del giocatore a un Valore.
Questo è il risultato finale dell'associazione delle statistiche di Salute e Scudo nel modello di visualizzazione. Ora, ogni volta che la salute del giocatore cambia, passa la proprietà Salute all'istanza materiale della barra HP e aggiorna il parametro scalare Avanzamento.
Ripeti lo stesso procedimento per la tua ShieldBar. Invece di associarlo alla proprietà Salute, deve essere associato alla proprietà Scudo.
Ora le tue associazioni HP e Scudi sono impostate! È ora di visualizzare il widget sul tuo HUD.
Configurazione del dispositivo Controller HUD
Posiziona un dispositivo Controller HUD nel tuo livello.
Nel pannello Dettagli del dispositivo, assicurati che:
Mostra HUD = Sì
Nel campo Override widget Info giocatore, utilizza il widget che contiene Salute e Scudi personalizzati.
Fai clic sull'immagine per ingrandirla.
Seleziona Avvia sessione, per visualizzare il widget Salute e Scudi sul tuo HUD! Metti alla prova la tua UI subendo danni e vedendola aggiornare le tue statistiche nell'HUD.
Altri esempi di barre di avanzamento
Il Materiale rettangolo si trova in Fortnite > UI > Materiale, puoi personalizzare la casella di base da utilizzare come sfondo in molte forme, per qualsiasi widget!
Crea un'istanza materiale da questa e inizia a utilizzarla con UMG!
Utilizzando le informazioni qui e i materiali che ti forniamo, prova a creare queste barre di avanzamento:
Utilizzo di una texture come sfondo per inquadrare l'avatar giocatore, il nome visualizzato e la barra HP.
Utilizzo di una combinazione di texture, icone, materiali della barra di avanzamento e materiale Rettangolo in Fortnite > UI > Materiale per stilizzare le barre di avanzamento di base.
Barra HP e Scudi sezionata insieme all'avatar giocatore e al nome visualizzato.
