In questa sezione imparerai a creare delle sovrapposizioni di UI completamente personalizzate per i tuoi giochi, seguendo i passaggi per ricreare l'UI del giocatore del modello Arcade TMNT.
La suddivisione di base dei passaggi è la seguente:
Aggiungi Visualizza associazioni a ciascun elemento del widget interattivo.
Crea una pila di informazioni sul giocatore per più giocatori simultanei.
Configura il dispositivo Controller interfaccia per visualizzare l'UI personalizzata.
Scarica gratuitamente il pacchetto di texture UI Material Lab e sperimenta le tue configurazioni UI!
Fai clic sull'immagine per ingrandirla.
Iniziamo!
Impostare i widget personalizzati
Nel tuo Esplora contenuti, vai a Tutto > [NOME del tuo progetto] > UI > Widget e apri il blueprint del widget UW_HUD_PlayerInfoBlock.
Sul lato sinistro, vedrai la scheda Gerarchia, che funziona come l'Outliner della finestra principale dell'editor e mostra i vari componenti del widget finito.
Dorso
La sezione superiore è composta da tre immagini di sfondo che definiscono l'aspetto a livelli dell'interfaccia utente. Questi includono:
Backplate1_Image - il layer di sfondo con tinta grigia
Backplate2_Image - il layer con contorno arancione
Backplate3_Image - il layer con contorno bianco
Insieme, queste immagini creano lo stile incorniciato del pannello delle informazioni del giocatore.
Quando importi le immagini da utilizzare per l'UI, assicurati di scegliere Gruppo texture per UI e Impostazioni di compressione per UserInterface2D(RGBA8).
Nome giocatore
Questo componente è costituito da due elementi, Nome del giocatore attivo e Nome del giocatore inattivo, che appariranno quando il giocatore è vivo, eliminato o disconnesso dal gioco.
Scegli due colori distinti che informino i giocatori sui membri del loro team che sono attualmente attivi e che sono stati eliminati.
Per il nome del giocatore Attivo, imposta la Visibilità su Visibile, mentre per quello Inattivo, impostala su Nascosto. Questi valori saranno mostrati solo in determinate condizioni.
Imposta Override larghezza su 220,0 , in modo che i nomi dei giocatori più lunghi non si sovrappongano all'icona dell'avatar del giocatore.
Icona Avatar giocatore
Questo componente mostra il ritratto del personaggio del giocatore in base alla skin scelta nel gioco.
Il componente è associato a un'istanza materiale denominata MI_UI_PlayerCard, che si trova nella cartella UI > Istanze materiali.
Puoi personalizzare questa istanza materiale a tuo piacimento, modificando le impostazioni nel pannello Dettagli. Prova a importare la tua immagine e ad aggiungere i colori del contorno.
In questo esempio, l'immagine scelta è un'immagine trasparente vuota che verrà collegata in seguito alla skin del personaggio.
Salute
Questo componente contiene le regioni che visualizzeranno i livelli di salute e scudo del giocatore.
Nel livello genitore, puoi vedere il riquadro delle dimensioni che determina la larghezza dell'intera regione.
Adesso passiamo all'immagine del dorso della salute, denominata MI_UI_Health_Backplate. Questo materiale UI è disponibile anche in Fortnite > UI > Materiali. È molto personalizzabile e può offrire numerose opzioni per mostrare la barra salute del giocatore fin dal primo utilizzo.
In cima al dorso è presente un riquadro di stack costituito da due componenti: una barra salute e un'ombra, denominate rispettivamente Health_Image e Health_Shadow.
Health_Image è un materiale dell'interfaccia utente di tipo barra di avanzamento personalizzabile. Se apri l'istanza materiale, puoi effettuare lo zoom modificando Dimensioni anteprima.
Prova a modificare alcune impostazioni nel pannello Dettagli per vedere come influiscono sul materiale esistente.
Poiché i valori dei parametri scalari (lo stato di riempimento della barra di avanzamento) vanno da 0 a 1 e i valori di salute e scudo di Fortnite sono tipicamente compresi tra 0 e 100, è importante impostare il Moltiplicatore su 0,01 in modo che i valori di salute e scudo vengano visualizzati correttamente dai giocatori.
La barra Health_Shadow è una semplice sovrapposizione ombreggiata aggiunta a scopo estetico.
Scudo
Il componente scudo è composto da uno sfondo Shields_Container che mostra l'area vuota dello scudo in grigio scuro e da una Shields_Image che contiene il materiale UI della barra di avanzamento.
La Shield_Image utilizza un'istanza materiale di base della barra di avanzamento, che costituisce una versione semplificata del materiale Health_Image.
Aggiungere Visualizza associazioni
Ora che hai costruito i componenti principali dell'UI del gioco, facciamo pratica con l'aggiunta di Visualizza associazioni, che permetteranno a ciascuno dei componenti di aggiornarsi in base ai dati ricevuti da una sessione live.
Nome 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 HUDPlayerInfoViewModel:
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 giocatore - HUD.
1. Fai clic su Dispositivo - Modello di visualizzazione Info giocatore Controller HUD e fai clic su Seleziona.
Seleziona NameActive_Text dall'elenco Gerarchia o facendo clic sull'area Nome giocatore della schermata Anteprima UI.
Fai clic su + Aggiungi Widget NameActive_Text e seleziona Testo dal menu a discesa.
Nel campo vuoto a destra, seleziona HUDPlayerInfoViewmodel e Nome giocatore dal menu a discesa che segue.
L'associazione finale deve essere simile alla seguente:
Ripeti i passaggi da 1 a 3 per l'elemento NameInactive_Text.
Per modificare le impostazioni di visibilità del nome inattivo, aggiungi un nuovo widget a NameInactive_Text e seleziona Visibilità dal menu a discesa.
Fai clic sul campo vuoto a destra e seleziona Funzioni di conversione > A visibilità (booleano).
Selezionando questa opzione vengono visualizzati tre nuovi campi. Fai clic sull'icona Link accanto a È visibile. Dal menu, seleziona HUDPlayerInfoViewModel e Is Eliminated.
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 NameActive_Text, ma quando il giocatore è vivo, rimane compresso.
L'associazione finale NameInactive_Text deve essere simile alla seguente:
Premi Compila per inviare le modifiche, completando così la sezione sui nomi dei giocatori.
Icona Avatar giocatore
Scegli Profile_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 Profile_Image > Pennello e premi Seleziona. Questa associazione analizza essenzialmente l'impostazione del Pennello selezionata dal pannello Dettagli di Profile_Image.
Fai clic all'interno del campo vuoto a destra e seleziona Funzioni di conversione > Imposta parametro texture > Seleziona.
Digita Texture nel campo Nome parametro. Per trovare il nome di questo campo, apri l'istanza materiale dell'avatar del giocatore.
Per le funzioni Imposta parametro Vettore/scalare/texture, assicurati che i nomi dei parametri dell'istanza materiale corrispondano esattamente al campo Nome parametro.
Fai clic sull'icona Collegamento accanto al campo Valore e seleziona HUDPlayerInfoViewModel > Icona avatar giocatore.
L'associazione finalizzata deve essere simile alla seguente:
Salute e scudo
Scegli Health_Image dalla Gerarchia oppure fai clic sull'area della barra salute nella schermata di anteprima dell'UI.
Fai clic su + Aggiungi widget Health_Image.
Vai su Profile_Image > Pennello e premi Seleziona.
Fai clic all'interno del campo vuoto a destra e seleziona Funzioni di conversione > Imposta parametro scalare.
Digita Avanzamento nel campo Nome parametro. Per trovare il nome di questo campo, apri l'istanza materiale dell'avatar del giocatore.
Fai clic sull'icona Collegamento accanto a Valore e seleziona HUDPlayerInfoViewModel > Salute.
L'avanzamento fornisce una percentuale della salute rimanente del giocatore e, poiché il Moltiplicatore è stato impostato su 0,1, ogni punto percentuale farà spostare la barra di avanzamento di un centesimo. Puoi verificarlo in autonomia, ti basta modificare arbitrariamente il valore percentuale nell'Istanza materiale per vedere la barra di avanzamento muoversi.
Percentuale di salute Fai clic sull'immagine per ingrandirla.
L'associazione finalizzata deve essere simile alla seguente:
Per la barra dello scudo, ripeti i passaggi da 1 a 6, ma scegli Scudo invece di Salute.
L'associazione finalizzata per Scudo deve essere simile alla seguente:
Premi Compila per inviare le modifiche.
Widget completo
Questa associazione assicura che l'intero widget venga visualizzato solo dopo che il giocatore si è connesso al gioco.
Scegli PlayerInfoBlock_Overlay dalla Gerarchia.
Seleziona + Aggiungi widget PlayerInfoBlock_Overlay, quindi scegli Visibilità dal menu a discesa.
Fai clic sul campo vuoto a destra e seleziona Funzioni di conversione > A visibilità (booleano). Selezionando questa opzione vengono visualizzati tre nuovi campi.
Fai clic sull'icona Link accanto a È visibile. Dal menu, seleziona HUDPlayerInfoViewModel e Is Disconnected.
Imposta Visibilità vera su Compresso e Visibilità falsa su Non hit-testable (Solo se stesso).
L'associazione finale deve essere simile alla seguente: Premi Compila per salvare le tue modifiche.
Ecco fatto, ora hai un widget UI completamente configurato che visualizzerà le informazioni in gioco.
Creare uno stack di giocatori
Questa sezione ti mostrerà come creare un widget utente che visualizzi altri giocatori della squadra insieme al giocatore di controllo.
Per iniziare, crea un nuovo Blueprint widget facendo clic con il tasto destro del mouse in Esplora contenuti e selezionando Interfaccia utente > Blueprint widget.
Seleziona Widget utente dalla finestra di dialogo e rinominalo in HUDInfoStack.
Fai doppio clic sul Widget utente per aprire una nuova finestra dell'Editor.
Per iniziare, dal pannello Tavolozza, trascina un elemento Sovrapposizione nel pannello Gerarchia.
Trascina un Riquadro stack nel livello sotto Sovrapposizione e rinominalo PlayerInfoStack.
Dal pannello Modelli di visualizzazione, premi +Modello di visualizzazione e seleziona un Dispositivo - Elenco informazioni giocatore/team del controller HUD.
Vai al pannello Dettagli e premi +Aggiungi l'estensione modello di visualizzazione. Ciò permette al PlayerInfoStack di accettare una Classe widget ingresso.
Se non vedi queste opzioni, prova a compilare il widget un'altra volta.
Per Classe widget ingresso, seleziona il PlayerInfoBlock creato in precedenza. Di seguito, seleziona HUDPlayerInfoViewmodel come Voce modello di visualizzazione.
Nella sezione Modello slot puoi regolare la spaziatura tra i widget e l'allineamento, nonché visualizzare l'anteprima di un certo numero di widget nel gioco.
Spaziatura tra i widgetFai clic su gif per ingrandirla.
Nel pannello Visualizza associazioni, fai clic su +Aggiungi widget, quindi scegli HUDInfoStack. Scegli PlayerInfoStack_Viewmodel_Extension ed espandila per vedere Oggetti set, quindi seleziona questa voce. Se PlayerInfoStack_Viewmodel_Extension non viene visualizzato nell'elenco, premi Compila e deve apparire.
Nel campo vuoto a destra, seleziona HUDPlayerInfoListViewModel > Array informazioni giocatori team/squadra. Questa operazione passa l'array di modelli di visualizzazione delle informazioni del giocatore nell'estensione appena impostata, grazie a una funzione denominata Imposta oggetti.
Premi Compila per salvare le tue modifiche. Ora puoi iniziare ad aggiungere questi elementi al gioco utilizzando il dispositivo Controller interfaccia.
Se vuoi creare un widget per il giocatore di controllo che sia separato dal resto della squadra:
Crea un nuovo widget per il tuo giocatore di controllo e imposta Visualizza associazioni come avevi fatto in precedenza, utilizzando Dispositivo - Modello di visualizzazione info giocatore controller HUD.
Trascina questo widget sotto il widget genitore che contiene Riquadro stack.
Crea un'associazione per quel widget. Nel campo a sinistra, seleziona Dispositivo - Modello di visualizzazione info giocatore controller HUD. Nel campo a destra, seleziona Dispositivo - Team controller HUD/Elenco info giocatore squadra > Info giocatore di controllo.
Configurazione del dispositivo Controller HUD
Cerca il Dispositivo Controller interfaccia in Esplora contenuti e trascinalo nella tua scena.
Nelle Opzioni utente, scegli cosa far vedere al giocatore e assicurati che Mostra HUD sia impostato su Sì e che Mostra info squadra sia impostato su No.
Scorri verso il basso fino a Override widget Info giocatore e trascina il widget HUDInfoStack nel campo vuoto. Assicurati che questo sia il widget dello stack appena generato e non il widget originale che avevi creato.
Fai clic su Salva.
Abbiamo finito! La tua nuova UI deve ora apparire durante il playtest del gioco!
Prossimo passo
Successivamente, imparerai a impostare i dispositivi telecamera e di controllo per il tuo gioco a scorrimento laterale!
