Le piastre posteriori mostrano varie informazioni, come ad esempio l'immagine dell'avatar di un giocatore, il tag giocatore, la salute, gli scudi e altro ancora sull'HUD.
Le piastre posteriori svolgono una serie di funzioni, dall'aiutare a identificare i compagni di squadra nelle partite cooperative multigiocatore all'identificare le statistiche di bassa salute e scudi.
In Unreal Editor per Fortnite (UEFN), le piastre posteriori sono realizzate utilizzando
Tuttavia, le texture possono richiedere molta memoria. Ciò può aumentare il consumo di memoria e ridurre le prestazioni della tua isola. Le texture e i nodi Campione texture del materiale occupano una grande quantità di memoria.
I materiali sono utilizzati al meglio per creare design piatti e possono aggiungere effetti animati alla piastra posteriore. I materiali richiedono meno memoria, poiché si affidano alla GPU per eseguire semplici calcoli algebrici. Ciò ti permette di eseguire varie operazioni, dalla creazione di forme semplici all'animazione di interazioni complesse in un materiale.
 |  |
Design UI piatto con materiali | Design UI con texture |
Quando scegli di utilizzare le texture, assicurati di utilizzarle con parsimonia: ti consigliamo di evitare valori superiori a 256 x 256 px per le texture della UI.
I materiali richiedono meno memoria perché utilizzano la GPU per il rendering.
Il metodo che utilizzi per le piastre posteriori del tuo avatar dipende da una serie di fattori:
Preferenza personale per il design della UI.
Stile e design della UI che completano il tipo di esperienza dell'isola che crei.
Quanta memoria vuoi risparmiare.
Il design della piastra posteriore dell'avatar in questo tutorial utilizza tre Istanze materiale per il design di base. I seguenti design della piastra posteriore sono stati creati utilizzando il materiale M_UI_Shape_Rectangle per includere:
Uno sfondo rosa traslucido.
Contenitore rosa che circonda il testo del nome e lo sfondo traslucido.
Un cerchio acquatico che conterrà l'avatar del giocatore.
Crea la tua UI con i materiali! Consulta Creazione di una UI personalizzata con le istanze materiale.
Impostazione di un widget personalizzato
Utilizza il flusso di lavoro Widget utente del documento UI Pop-Ups per:
Creare un widget utente.
Rinominane la miniatura in Player_Info.
Fai doppio clic sulla miniatura per aprire l'Editor widget UMG.
Nell'Editor widget puoi definire l'aspetto e la posizione sullo schermo del design della tua piastra posteriore. Successivamente, aggiungerai un Modello di visualizzazione per creare una funzionalità di associazione per acquisire informazioni sui giocatori esistenti e associarle al design della piastra posteriore.
Nel Grafico eventi:
Seleziona l'impostazione Riempi schermo nell'angolo in alto a destra e Imposta su Desiderato.
Attraverso questa impostazione, puoi modificare i tuoi widget in una dimensione specifica per far apparire la tua UI senza interruzioni durante il gameplay.
Per eseguire il layout della UI del tuo HUD personalizzato, inizia aggiungendo i pannelli al Grafico degli eventi.
Nel pannello Tavolozza, vai alla sezione Pannello e trascina un pannello Canvas nell'Evento o direttamente nel pannello Gerarchia. Quindi, rinomina il pannello HUD_Canvas.
Il Pannello Canvas offre un modo per ancorare diversi elementi della UI in posizioni specifiche sullo schermo. Assicurati di avere un piano di design della UI prima di aggiungere altri pannelli al canvas per assicurarti che il layout del tuo progetto sia rispecchiato nel Pannello canvas.
Utilizza il Pannello canvas solo quando devi utilizzare elementi UI specifici nell'ambito del tuo progetto. Ad esempio, utilizza questo pannello se stai compilando un HUD e devi disporre diversi widget figlio in punti specifici dello schermo.
Invece di modificare l'impostazione Riempi schermo in Desiderato, puoi ridimensionare il Pannello Canvas a 1920 X 1080 o 2560 X 1440, che sono le proporzioni dello schermo più comuni (16:9).
Dalla sezione Pannello del pannello Tavolozza, annida una Casella impilata sotto HUD_Canvas nel pannello Gerarchia e rinominalo Backplate_StackBox. Questo è il contenitore della UI della piastre posteriori che nidifica i widget che compongono le variabili UI.
Man mano che aggiungi variabili alla Casella impilata, queste vengono impilate automaticamente da sinistra a destra nel pannello.
Puoi anche utilizzare Casella impilata per impilare gli elementi della UI dall'alto verso il basso.
Dalla sezione Comune del pannello Tavolozza, annida un immagine in Backplate_StackBox e la Gerarchia. Quindi rinomina l'immagine in Avatar_Image, che conterrà il bordo dell'avatar.
Dalla sezione Pannello del pannello Tavolozza, annida un Overlay sotto Backplate_StackBox e rinominalo Nameplate_Overlay. Overlay fornisce un modo per disporre i widget uno sopra l'altro.
Dal pannello Tavolozza, trascina e annida due immagini in Nameplate_Overlay.
Rinomina le immagini in base ai materiali, Sfondo e Bordo.
Trascina e annida un pannello Riquadro dimensione in Nameplate_Overlay.
Utilizza il Riquadro dimensione per impostare le proprietà dei suoi figli annidati. Ciò impedisce a qualsiasi elemento all'interno del Riquadro dimensione di fuoriuscire e coprire eventualmente altri elementi della UI o del gameplay.
Trascina e annida un Overlay sotto il Riquadro dimensione e rinominalo Text_Overlay.
Senza un Overlay, puoi rendere figlio solo un widget sotto il Riquadro dimensione.
Dalla sezione Comune del pannello Tavolozza, trascina e annida due Blocchi di testo sotto Text_Overlay. Rinomina i Blocchi di testo in Attivi e Inattivi.
Il layout della UI è completo. Successivamente, imposterai le proprietà del widget in modo che le dimensioni degli elementi UI della piastra posteriore siano relative alle dimensioni dello schermo.
Imposta proprietà widget
Un pannello Contenitore regola automaticamente le sue dimensioni in base al widget più grande al suo interno. Il pannello genitore deve contenere tutti i suoi elementi figlio prima di iniziare a modificarne le proprietà. In caso contrario, le proporzioni dell'elemento genitore potrebbero cambiare quando gli elementi UI figlio vengono aggiunti nella scheda Gerarchia.
Inizia a impostare le proprietà del pannello Backplate_StackBox per decidere la posizione dello schermo e i limiti della piastra posteriore.
Le seguenti proprietà sono state modificate per il design di questa piastra posteriore:
Fai clic sull'immagine per ingrandirla.
| Impostazione | Valore |
|---|---|
Ancore | Angolo inferiore sinistro |
Allineamento | Deve essere impostato su una coppia di coordinate che forniscono spaziatura interna al widget dai bordi dello schermo. |
Adatta al contenuto | True |
Orientamento | Orizzontale (tutti i widget figlio vengono visualizzati da sinistra a destra.) |
Taglio X | -20.0 (Obliqua la Casella impilata in modo negativo a destra.) |
Tieni premuto Maiusc + Ctrl e fai clic sull'angolo in basso a sinistra per aggiornare automaticamente la posizione e l'allineamento del widget.
I pezzi di layout di base della piastra posteriore sono a posto. Ora puoi procedere ad aggiungere i materiali creati e modificare i Blocchi di testo della targhetta.
Aggiunta e modifica dei gli asset piastra posteriore
L'Editor widget include impostazioni dei widget selezionati per aggiungere materiali e testo e modificare le proprietà degli asset utilizzate nell'impostazione Pennello.
È importante notare l'ordine di disposizione del materiale nel pannello Gerarchia. Quando aggiungi gli asset, assicurati che vengano visualizzati correttamente. Gli asset in background devono essere posizionati nella parte inferiore con gli asset aggiuntivi posizionati in cima.
Modifica di istanze materiali
Seleziona i widget nel pannello Gerarchia per iniziare ad aggiungere materiali e testo.
Seleziona Immagine avatar sotto la Casella impilata per evidenziare il widget e aprirne le proprietà nel pannello Dettagli.
Nel pannello Dettagli, aggiungi il Materiale bordo dell'avatar all'impostazione Pennello. Regola le impostazioni Dimensione immagine per adattare il widget Immagine al materiale.
Fai clic sull'immagine per ingrandirla.
I materiali sono come la pittura. Quando viene aggiunto all'impostazione Pennello, il materiale riempie lo spazio del widget immagine.
Se hai avatar specifici per la tua esperienza, segui questi passaggi:
* Crea un overlay per sovrapporre un'immagine avatar sotto un materiale di bordo.
* Aggiungi le immagini di avatar importate a un livello di sfondo Immagine.
* Utilizza il materiale del bordo sul livello superiore.
Seleziona l'Immagine di sfondo nel pannello Gerarchia per aprire le opzioni Overlay nel pannello Dettagli.
Nel pannello Dettagli imposta le impostazioni Allineamento orizzontale e verticale su Allineamento centrale e aggiungi il Materiale di sfondo all'impostazione Pennello. Regola le impostazioni Dimensione immagine per adattare il widget Immagine al colore del materiale di sfondo.
Fai clic sull'immagine per ingrandirla.
Seleziona l'Immagine bordo in Nameplate_Overlay per evidenziare il widget e aprirne le proprietà nel pannello Dettagli.
Nel pannello Dettagli imposta Allineamento orizzontale e verticale su Allineamento centrale e aggiungi il Materiale bordo all'impostazione Pennello. Regola le impostazioni Dimensione immagine per adattare il bordo al colore di sfondo.
Fai clic sull'immagine per ingrandirla.
La piastra posteriore assume un aspetto di base e ora puoi procedere alla modifica dei Blocchi di testo.
Modifica la targhetta
La targa mostra i tag giocatore del giocatore. La piastra posteriore progettata sopra contiene sia Riquadro dimensione che Blocchi di testo.
Modificando le proprietà Riquadro dimensione, puoi evitare che il testo si estenda oltre i suoi limiti ad altri elementi della UI o ostruisca la visuale del giocatore.
Seleziona il Riquadro dimensione nella Gerarchia per aprirne le proprietà nel pannello Dettagli.
Nel pannello Dettagli imposta le impostazioni Allineamento orizzontale e verticale su Allineamento centrale. Questa operazione centra automaticamente i Blocchi di testo nelle immagini della Targhetta. Imposta le opzioni Larghezza e Override altezza del Riquadro dimensione su Vero e imposta le dimensioni desiderate per Nameplate_Overlay.
La casella verde mostra il bordo della Casella dimensione.
Fai clic sull'immagine per ingrandirla.
Nel pannello Gerarchia fai clic con il pulsante destro del mouse su Riquadro dimensione e seleziona Avvolgi con... > Riquadro dimensione per i Blocchi di testo per disporre il testo del giocatore in base alle proprietà delRiquadro dimensione.
La configurazione di base della UI della targa dati è completa. Tutti gli elementi figlio assumono le proprietà dei loro genitori, quindi la quantità di modifiche da apportare a questi widget è minima.
Dal pannello Dettagli, potrai modificare i Blocchi di testo attivi e inattivi impostando l'allineamento e le dimensioni del carattere, il colore, la pennellata e molto altro.
Assicurati che il testo attivo sia di un colore separato dal testo inattivo. In questo esempio, il font Blocco di testo attivo ha una dimensione di 145 in bianco con una pennellata di 6 e il font inattivo ha una dimensione di 145 in SlateGrey con una pennellata di 6.
Imposta l'impostazione Visibilità della casella di testo Inattivo su Nascosto. Ciò impedisce che il testo venga visualizzato fino a quando non viene attivata l'associazione al widget nel gioco.
In questo modo vengono riuniti tutti i pezzi, la targa del nome e la piastra posteriore dell'avatar.
Aggiungere Visualizza associazioni
Ora che il design della UI è stato creato, è il momento di aggiungere associazioni alle Caselle di testo e Avatar_Image in base ai dati che devono ricevere durante una sessione live.
Il Modello di visualizzazione Info giocatore Controller HUD ti permette di sostituire parti del tuo HUD con un widget personalizzato. Per sfruttare questa impostazione, devi creare un Modello di visualizzazione della tua piastra posteriore.
Testo del nome del giocatore
Per ottenere il nome di un giocatore nel campo corretto, segui questa procedura:
Apri la scheda Visualizza associazioni facendo clic su Finestra > Visualizza associazioni o selezionando Visualizza associazioni nella parte inferiore dello schermo e agganciandola.
Per vedere l'elenco di associazioni visualizzazione di HUDPlayerInfoViewModelBase:
1. Apri la finestra Modelli di visualizzazione selezionando Finestra > Modelli di visualizzazione.
1. Vai a +Modello di visualizzazione e seleziona Base modello di visualizzazione informazioni sul team/giocatore.
L'elenco Elenco informazioni team/giocatore squadra Controller HUDfornisce un modo per mostrare le informazioni del giocatore di controllo senza la sua squadra o team.
1. Fai clic su Seleziona.
Seleziona il Blocco di testo dall'elenco Gerarchia o facendo clic sull'area Nome giocatore della schermata Anteprima UI.
Dalla scheda Associazioni visualizzazione, fai clic su + Aggiungi widget Active_Name.
Seleziona il campo attivo "PlayerName" e seleziona Testo > Seleziona.
Nel campo vuoto a destra, seleziona HUDPlayerInfoViewModel > Controllo delle informazioni giocatore > Nome giocatore > Seleziona nel menu a discesa.
L'associazione finale deve essere simile alla seguente:
Ripeti i passaggi da 2 a 3 per l'elemento Inactive_Name.
Per modificare le impostazioni di visibilità del nome inattivo, aggiungi un nuovo widget a Inactive_Name. Seleziona nel primo campo e seleziona Visibilità > Seleziona nel menu a discesa.
Fai clic sul campo vuoto a destra e seleziona Funzioni di conversione > A visibilità (booleano) > Seleziona.
Selezionando questa opzione vengono visualizzati tre nuovi campi. Fai clic sull'icona Link accanto a È visibile. Dal menu, seleziona HUDPlayerInfoViewModel > Controllo delle informazioni giocatore > È eliminato > Seleziona.
Imposta Visibilità vera su Non hit-testable (Solo se stesso) in basso. Lascia Visibilità falsa su Compresso. Quando il giocatore viene eliminato o si disconnette, il nome sostituisce Active_Name, ma quando il giocatore è vivo, rimane compresso.
L'associazione finale Inactive_Name deve essere simile alla seguente:
Fai clic sull'immagine per ingrandirla.
Fai clic su Compila per inviare le modifiche, completando così la sezione sui nomi dei giocatori.
Icona Avatar giocatore
Scegli Avatar_Image dalla Gerarchia oppure fai clic sull'area dell'icona del giocatore nella schermata di anteprima della UI.
Fai clic su + Aggiungi widget Profile_Image.
Vai su Avatar_Image > Pennello e premi Seleziona. Questa associazione analizza essenzialmente l'impostazione del Pennello selezionata dal pannello Dettagli di Avatar_Image.
Fai clic sul campo vuoto a destra e seleziona Funzioni di conversione> Crea pennello immagine da materiale > Seleziona.
Imposta i campi vuoti Dimensioni immagine sulla dimensione del materiale del bordo dell'icona nel widget. In questo esempio, il materiale del bordo è X=50 e Y=45.
L'associazione finalizzata deve essere simile alla seguente:
Fai clic sull'immagine per ingrandirla.
Fai clic su Compila per salvare il tuo widget.
Successivamente, trascina un dispositivo Controller HUD nel tuo progetto e aggiungi il tuo widget UMG al dispositivo nel campo Override widget informazioni giocatore.
Esegui il playtest dell'aspetto della targa personalizzata dell'avatar. Deve essere simile all'immagine seguente.
Fai clic sull'immagine per ingrandirla.
