Creazione di una vista personalizzata della squadra

La creazione di una visualizzazione squadra personalizzata si basa sul design del widget targa giocatore singolo per creare una visualizzazione squadra. Il widget Casella impilata trasforma la visualizzazione giocatore da giocatore singolo a squadra riproducendo il widget informazioni per giocatore singolo utilizzando il Modello di visualizzazione.

Casella impilata è un contenitore che dispone le copie dei widget per giocatore singolo in modo lineare, da sinistra a destra o dall'alto verso il basso. Ciò crea un aspetto coerente per la squadra.

In questo esempio, la visualizzazione della squadra è impilata verso l'alto e verso il basso.

Widget informazioni giocatore

Per utilizzare le informazioni sul giocatore fornite dai membri del team durante una partita, il widget Player_Info deve essere impostato utilizzando il Dispositivo - Modello di visualizzazione informazioni giocatore Controller HUD. Questa impostazione crea widget separati per il giocatore di controllo e la sua squadra/team, utilizzando le proprietà in Dispositivo - Modello di visualizzazione informazioni giocatore Controller HUD per ogni widget.

Puoi continuare a utilizzare le impostazioni per configurare le associazioni dei tutorial Piastra posteriore e Salute e scudo per associare le informazioni necessarie sul giocatore.

Senza l'impostazione corretta del widget Player_Info, riceverai messaggi di errore nel compilatore.

Di seguito sono riportati gli step per creare un widget Pila Squadra che associa i modelli di visualizzazione Elenco informazioni giocatore team/squadra all'icona giocatore, al nome giocatore, alla salute e agli scudi.

Creazione di un widget utente

1. Segui i passaggi in Pop-up UI per creare un Widget utente.

2. Assegna al widget utente il nome Squad_View.

   

3. Fai due volte clic sulla Miniatura widget utente per aprire l'Editor eventi in Unreal Motion Graphics (UMG).

L'Editor widget ti consente di pianificare e impostare il design della tua UI per la visualizzazione della squadra. Una volta deciso il layout, puoi aggiungere materiali per dare alla tua UI un aspetto personalizzato.

Ora devi avere due widget utente in Esplora contenuti: uno chiamato Player_Info e l'altro Squad_View.

Creazione del layout della squadra

È consigliabile portare un singolo widget Player_Info completamente funzionale in un widget Squad_View utilizzando una Casella impilata come contenitore. Ciò fornisce un design coerente riproducendo il design per giocatore singolo all'interno della Casella impilata e ripetendo il design in direzione dall'alto verso il basso o da sinistra a destra.

Aggiungerai il widget per giocatore singolo al modello di visualizzazione, quindi disporrai il layout nel Grafico degli eventi attraverso la Casella impilata.

Esegui le operazioni seguenti:

1. Trascina una Sovrapposizione sotto Squad_Info e chiamala Container_Overlay.

2. Ridimensiona Container_Overlay a 2560 x 1440. Questa è la dimensione ottimale per tutti gli schermi.

   

3. Annida una Casella impilata sotto il Container_Overlay.

4. Nel pannello Dettagli, modifica le seguenti impostazioni della Casella impilata:

   1. Spaziatura interna = 25

   2. Orientamento = Verticale

   

   La Casella impilata ha una spaziatura interna di 25 px dal bordo dello schermo.

5. Dalla barra del menu principale, seleziona Finestra > Modelli di visualizzazione per aprire il pannello Modello di visualizzazione.

   

6. Fai clic su +Modello di visualizzazione, quindi seleziona Dispositivo - Elenco informazioni giocatore team/squadra Controller HUD > Seleziona. In questo modo viene creato un modello di visualizzazione per il dispositivo Controller HUD.

7. Nel pannello Dettagli, fai clic su +Aggiungi estensione Viewmodel. Si aprono opzioni che forniscono un modo per generare dinamicamente il widget della squadra all'interno del widget Squad_View, in base al numero di giocatori del tuo team.

   

   

   Prima di eseguire +Aggiungi l'estensione modello di visualizzazione

   Dopo aver eseguito +Aggiungi l'estensione modello di visualizzazione

8. Dall'impostazione Classe widget ingresso, seleziona il widget Player_Info dal menu a discesa e imposta Voce modello di visualizzazione su HUDPlayerInfoListViewModel.

9. Espandi l'opzione Modello slot e regola la spaziatura tra ogni widget giocatore. Aggiungi o rimuovi i widget e modifica l'allineamento. Utilizza queste opzioni per visualizzare come appariranno i widget nel gioco.

   Se gli elementi della tua UI sono troppo grandi per lo spazio disponibile, torna al widget Player_Info e regola le dimensioni dei tuoi widget Immagine in modo che si adattino al widget Squad_View.

Successivamente, aggiungerai le associazioni per rendere l'intera UI funzionale per i team.

Associazioni di squadra

Per associare le informazioni di una squadra al widget Squad_View, devi fare riferimento alle informazioni sui membri della squadra attraverso Associazioni visualizzazione. Le associazioni indicano al widget quali informazioni deve acquisire dai dispositivi associati e per quale giocatore. Le informazioni per ogni giocatore vengono quindi popolate nella UI tramite il dispositivo Controller HUD.

1. Seleziona la Casella impilata nel pannello Gerarchia, quindi apri Associazioni visualizzazione e seleziona +Aggiungi widget. In questo modo, la Casella impilata viene aggiunta come widget al pannello Associazioni visualizzazione.

2. Seleziona Squad_View > Seleziona dal menu a discesa Widget. In questo modo, seleziona il widget squadra e tutti i suoi widget interni per l'associazione.

   

3. Nel campo Squad_View a sinistra, seleziona Squad_View > StackBox > Modello di visualizzazione StackBox > Imposta oggetti > Seleziona. Questa operazione passa l'array di modelli di visualizzazione delle informazioni del giocatore nell'estensione appena impostata, grazie a una funzione denominata Imposta oggetti.

   Se la funzione Imposta oggetti non viene visualizzata in questo step, compila il widget e ricontrolla.

   

   Se PlayerInfoStack_Viewmodel_Extension non viene visualizzato nell'elenco, premi Compila e deve apparire.

4. Nel campo vuoto a destra, seleziona Squad_View > HUDPlayerInfoListViewModel > Array informazioni giocatore team/squadra > Seleziona. Questa operazione passa l'array di modelli di visualizzazione delle informazioni del giocatore nell'estensione appena impostata, grazie a una funzione denominata Imposta oggetti.

   

5. Fai clic su Compila. Il tuo widget è pronto per essere aggiunto al dispositivo Controller Hud.

Aggiungi il tuo widget al Controller HUD ed esegui il playtest del tuo progetto.

Configurazione del dispositivo Controller HUD

Ci sono alcune impostazioni essenziali del Controller HUD da modificare. Sostituirai questi elementi HUD predefiniti di Fortnite con un design personalizzato del tuo widget.

1. Trascina un dispositivo Controller HUD nel tuo progetto e lascia il dispositivo selezionato per popolare le relative impostazioni nel pannello Dettagli.

2. Nel pannello Dettagli, imposta le seguenti opzioni:

   1. Mostra HUD = Sì

   2. Override widget Info giocatore = Nome di Il tuo widget

3. Fai clic sull'icona Salva per salvare le modifiche.

   

4. Seleziona Avvia sessione per eseguire il playtest della tua UI personalizzata.

   

Esegui il playtest con due o più giocatori per assicurarti che il layout funzioni e abbia un bell'aspetto con l'isola che hai creato.