I widget utente sono progettati nell'editor widget con i widget UMG.
I widget utente sono come mappe in quanto tracciano il percorso tra un widget UMG e le funzioni del dispositivo. Leggere un widget utente ti aiuterà a capire la struttura di una UI. Dall'Editor widget, puoi esaminare:
Il layout e il design della UI .
Le associazioni del widget in Visualizza associazioni.
Nel modello di funzionalità, apri la cartella Controller HUD e fai due volte clic sul widget UW_HCD01 per saperne di più su come il widget è stato creato e associato al dispositivo Controller HUD.
Layout widget
Il layout del widget è la fase di progettazione di una UI personalizzata. Nell'Editor widget, puoi utilizzare i widget UMG del pannello Palette per creare l'aspetto e pianificare le funzionalità della tua UI. L'ordine in cui utilizzi i widget UMG determina l'aspetto della UI.
Per saperne di più sulle funzioni dei widget UMG, consulta la sezione Palette del documento Editor widget.
Con il widget UW_HCD01 aperto, guarda nel pannello Gerarchia. Il pannello Gerarchia mostra quali widget UMG sono stati utilizzati e l'ordine in cui sono stati aggiunti alla viewport.
I widget UMG si possono rinominare nel pannello Gerarchia una volta aggiunti alla viewport.
Tutti i progetti di widget devono avere un widget radice che funge da schermo. Un widget Overlay chiamato Root si trova alla base del design e funge da schermo. Il Viewport è impostato su Riempi schermo, il che fa sì che il disegno riempia l'area designata Radice.
Un pannello griglia viene utilizzato per ospitare il design delle barre Salute e Scudo. I pannelli griglia sono griglie flessibili che organizzano i widget figlio in righe e colonne.
Puoi personalizzare ulteriormente righe e colonne perché il Pannello Griglia aggiunge Opzioni ai suoi Widget che controllano il numero di righe e colonne, lo spazio occupato da righe e colonne, il livello che il Widget occupa nel design e una speciale opzione di movimento chiamata Spingi.
Nudge consente di spostare il Widget figlio lungo gli assi X e Y senza occupare spazio. Ciò significa che solo il contenuto all'interno del contenitore viene spostato, ma il contenitore mantiene la sua posizione e lo spazio che occupa nel layout.
Il widget Overlay, denominato ShieldBarContainer, è il primo widget figlio del pannello Griglia. Questo widget si trova nella riga 1, colonna 0 e viene visualizzato nell'intervallo di riga 1, nell' intervallo di colonna 0. I widget ShieldBarContainer vengono visualizzati su Layer1.
Ciò significa che tutti i widget figlio di ShieldContainer vengono visualizzati nella parte anteriore del progetto perché si trovano sul livello 1, ma si trovano a destra dei widget dietro di esso perché si trovano nella riga 1. La barra dello scudo si estende su 2 righe (0 e 1) e ne determina la lunghezza.
Utilizzando l'opzione Spingi > Y, puoi spostare il widget ShieldBarContainer di -25.0 Unità Slate verso il basso dalla sua posizione predefinita in modo che copra leggermente il contenitore dell'integrità dietro di esso.
Il widget Overlay denominato HealthBarContainer è il secondo widget figlio del pannello Griglia. Questo widget si trova nella riga 1, colonna 0 e viene visualizzato nell'intervallo di riga 1, nell' intervallo di colonna 0. I widget HealthBarContainer vengono visualizzati su Layer0.
Ciò significa che tutti i widget figlio di HealthBarContainer vengono visualizzati nella parte posteriore del progetto perché si trovano sul livello 0. La barra della salute si trova nella riga 0, quindi viene visualizzata a sinistra della barra dello scudo. HealthBarContainer si estende anche sulle righe 0 e 1, determinando la lunghezza della barra della salute.
Di seguito è riportata la ripartizione dei widget UMG che compongono le barre dello scudo e della salute e il loro scopo nel design generale.
ShieldBarContainer
ShieldBarContainer ospita tutti i widget UMG che compongono il design della barra degli scudi. La barra degli scudi è composta da:
| UMGWidget | Nome del widget | Finalità |
|---|---|---|
Immagine | ShieldBar_backing | Utilizzato come contenitore per aggirare l'intero design della barra degli scudi. Questa è un'istanza materiale denominata MI_HCD01_Backplate. |
Casella impilata | ShieldContent | Organizza i widget figlio (icona della barra dello scudo e materiale della barra dello scudo) da sinistra a destra all'interno del materiale ShieldBar_Backing e ShieldBarContainer. |
Immagine | ShieldIcon | Il materiale dell'icona scudo utilizzato come livello anteriore. |
Sovrapposizione | ShieldBarContainer | Utilizzato per sovrapporre i widget figli nella seconda colonna della Stack Box di ShieldContent. Questi widget costituiscono il materiale della barra dello scudo. |
Immagine | ShieldBarStroke | Utilizzato come contenitore per aggirare la barra degli scudi. Questa è un'istanza materiale denominata MI_HCD01_BarStroke. |
Immagine | ShieldBar | Il materiale M_ProgressBar_Basic è un materiale dinamico a due tonalità che utilizza una funzione materiale per spostarsi a sinistra e a destra lungo la barra scudo, a seconda delle informazioni che il widget riceve dal dispositivo Controller HUD. |
HealthBarContainer
L'HealthContainer ospita tutti i widget UMG che compongono il design della barra della salute. La barra della salute è composta da:
| UMGWidget | Nome del widget | Finalità |
|---|---|---|
Casella impilata | Contenuto di salute | Organizza i widget figlio (design dell'icona della barra della salute e materiale della barra della salute) da sinistra a destra all'interno dell'HealthContainer. Questa casella impilata si estende intorno al widget Sovrapposizione ShieldContainer e centra la barra dello scudo nel design generale della UI. Ciò è dovuto al fatto che la casella dello stack HealthContent ha una dimensione dell'asse X maggiore rispetto alla casella dello stack ShieldContent. |
Immagine | HPIcon | Il materiale dell'icona della salute utilizzato come livello anteriore. |
Sovrapposizione | HPBarContainer | Utilizzato per sovrapporre i widget figlio nella seconda colonna della casella dello stack HealthContent. Questi widget costituiscono il materiale della barra della salute. |
Immagine | HPBarStroke | Utilizzato come contenitore per aggirare la barra della salute. Questa è un'istanza materiale denominata MI_HCD01_BarStroke. |
Immagine | HPBar | Un materiale dinamico a due tonalità che utilizza una funzione materiale per spostarsi a sinistra e a destra lungo la barra della salute, a seconda delle informazioni che il widget riceve dal dispositivo Controller HUD. |
Successivamente, imparerai come selezionare un Viewmodel per aggiornare i materiali dell'interfaccia utente in modo da mostrare lo stato attuale della salute e degli scudi del giocatore nel gioco.
Modello di visualizzazione
Un Viewmodel controlla le informazioni sul giocatore attraverso un elenco di funzioni. Le funzioni forniscono un modo per controllare le informazioni sui giocatori tramite il Widget UMG e le funzionalità del dispositivo. I viewmodel forniscono un modo specifico per associare i widget UMG ai dispositivi di Fortnite Creativo.
I viewmodel ascoltano le funzioni in esecuzione nel dispositivo utilizzando il widget utente per sostituire l'interfaccia utente predefinita. Il viewmodel utilizza quindi le funzioni del dispositivo per aggiornare l'interfaccia utente tramite Visualizza associazioni.
Ad esempio, i modelli di visualizzazione della barra Scudo e Salute ascoltano le funzioni Scudo e Salute del Controller HUD. Quando la funzione Controller HUD viene eseguita su scudi e integrità giocatore, il modello di visualizzazione ascolta queste funzioni e trasmette le informazioni attraverso le associazioni di visualizzazione per aggiornare l'interfaccia utente.
Sono disponibili diversi Viewmodel tra cui scegliere. Nell'elenco di Viewmodel di seguito, nota che sono presenti Viewmodel specifici del dispositivo. Questi contengono le funzioni specifiche di quel dispositivo.
I seguenti Viewmodel controllano più di una parte della UI attraverso le funzioni del dispositivo negli elenchi di funzioni.
Il dispositivo - Elenco informazioni giocatori team/squadra Controller HUD viene utilizzato con il widget UW_HCD01. Utilizza le informazioni sul giocatore di controllo per importare le tue informazioni dal controller HUD perché questo modello è pensato per essere giocato da un giocatore: tu!
Per questo esempio di UI, la salute e lo scudo sono controllati attraverso questo modello di visualizzazione ascoltando le funzioni del Controller HUD.
Successivamente, imparerai come associare i materiali UI Salute e Scudo alla funzionalità Controller HUD in Visualizza associazioni.
View Binding
Visualizza associazioni associa la funzionalità del widget UMG alle funzioni del dispositivo associato e aggiorna la UI nell'HUD. Nel Widget UW_HCD01, i Materiali ShieldBar e HPBar sono associati alle funzioni Scudo e Integrità del Controller HUD. Queste funzioni monitorano i tuoi scudi e la tua salute nel gioco e aggiornano il materiale della barra in base alla quantità di scudi e salute disponibili.
Per rendere funzionale la UI di scudo e integrità, inizia selezionando un widget UMG e associando le proprietà del widget a una specifica funzione del dispositivo. Le associazioni devono essere create nel pannello Visualizza associazioni.
Aggiunta di un widget UMG
I widget immagine (ShieldBar e HPBar) vengono selezionati prima nel pannello Gerarchia, quindi nel pannello Visualizza associazioni. Puoi fare clic sul pulsante +Aggiungi widget per aprire l'elenco delle funzioni di Viewmodel. Una funzione viene aggiunta al Widget per controllare le informazioni sulle Proprietà del Widget. In questo caso, è la funzione Brush a controllare i materiali ShieldBar e HPBar.
Aggiunta di un'associazione dispositivo
Dopo aver determinato quale widget associare, viene selezionato il tipo di associazione del dispositivo. C'è un campo vuoto accanto al campo del widget. Facendo clic nel campo vuoto si apre una lista di associazioni di dispositivi disponibili. Le opzioni di associazione del dispositivo vengono visualizzate automaticamente sotto i campi di associazione del widget e del dispositivo. Le opzioni determinano il modo in cui il widget si aggiorna in base alle informazioni che riceve dal dispositivo.
Il widget UW_HCD01 utilizza un parametro Imposta scalare per aggiornare le proprietà del pennello.
View Binding
| Proprietà pennello Barra scudo | Proprietà pennello barra salute |
|---|---|
 |  |
Pannello Dettagli
| Materiale ShieldBar | Materiale HealthBar |
|---|---|
 |  |
Nel widget UW_HCD01, i widget Immagine (ShieldBar e HPBar) hanno materiali dinamici nelle proprietà Pennello (che si trovano nel pannello Dettagli).
Impostazione dei parametri del dispositivo
Per fare in modo che il Materiale rifletta lo Stato attuale degli scudi e della salute del giocatore, le associazioni del dispositivo hanno Parametri che devono essere Impostati per inviare le informazioni sul dispositivo ai Widget UMG.
In questo esempio, il widget Immagine e la relativa funzione Pennello vengono aggiunti automaticamente al parametro Pennello del Controller HUD. Questa associazione determina la proprietà Pennello del widget Immagine da aggiornare.
Successivamente, il nome del parametro specifica quale parametro aggiornare nel materiale Pennello. Qui, Progress viene digitato nel Campo.
Infine, il valore dell'associazione è determinato dal viewmodel. Nel Campo Valore dell'associazione, sono Imposta le funzioni HUDPlayerInfoListViewmodel > Controllo delle informazioni giocatore > Scudo e Integrità.
La funzionalità Controller HUD ora aggiorna la proprietà Pennello nel widget Immagine tramite la funzione di conversione dei parametri scalari esaminando la proprietà Avanzamento e passandovi i valori di Salute e Scudo.
L'avanzamento è il valore che sposta la barra avanti e indietro tra i valori Progress Start e ProgressEnd. Ciò significa che il valore di Progress è Limite tra 0 e 1.
| Gruppi di parametri materiali di ShieldBar | Gruppi di parametri del materiale della HealthBar |
|---|---|
 |  |
Se inizi il gioco con Salute e scudi al massimo, i danni provocano lo spostamento della barra a sinistra in base alle proprietà Avanzamento e Normalizza avanzamento. Queste proprietà determinano di quanto il materiale si sposta a sinistra quando il giocatore subisce danno.
Il materiale si sposterà lungo la barra a destra quando la salute e gli scudi vengono ripristinati alla stessa velocità con cui si deteriorano utilizzando le proprietà Avanzamento e Normalizza avanzamento.
Apri altri Widget Utente e vedi se riesci a leggerli e capire l’ordine in cui i Widget UMG sono stati aggiunti alla gerarchia, il tipo di viewmodel selezionato per il Widget Utente e come i Parametri del Widget UMG e le funzioni del dispositivo sono associati nei legami di visualizzazione.
Visualizzazione modello oggetto equipaggiato
Questo modello di visualizzazione può essere utilizzato con il dispositivo Controller HUD per tenere traccia delle statistiche di un oggetto equipaggiato utilizzando lo slot widget Override widget informazioni sull'oggetto equipaggiato. Tutti i campioni di UI utilizzano il fucile d'assalto WID_Assault_AutoHigh_Athena_C_Ore_T03 come oggetto equipaggiato.
Apri la cartella Dispositivi > Controller HUD > Widget e fai due volte clic sul widget UW_HCD03_SelectedItem. Da questo viewmodel, puoi tenere traccia di una serie di informazioni e statistiche sulle armi nella UI:
Icona oggetto
Nome dell'oggetto
Icona munizioni
Conteggio munizioni
Eccesso di munizioni
È un'arma di tipo caricatore
