UI di conversazione personalizzata

L'Editor widget permette di progettare l'aspetto dei pulsanti e degli sfondi delle tue conversazioni. Non è necessario aggiungere testo a nessuno dei widget nell'Editor widget per creare finestre di dialogo personalizzate. Tutti i pulsanti e i widget dei blocchi di testo estraggono il testo e i dialoghi dal tuo database delle conversazioni.

Utilizzando l'Editor widget puoi importare:

• Immagini

• Finestre di dialogo predefinite

• File di font

Un ottimo esempio di creazione di un'UI personalizzata utilizzando l'Editor widget è disponibile nella pagina del tutorial del Modello Arcade TMNT.

Per aprire l'Editor widget:

1. Fai clic con il tasto destro del mouse all'interno di Esplora contenuti e seleziona Interfaccia utente > Blueprint widget.

2. Seleziona la variante Finestra di dialogo modale nella finestra Selezione Blueprint widget.

3. Assegna un nome al tuo Blueprint widget e fai due volte clic sulla miniatura del widget per aprire l'Editor widget.

4. La creazione di caselle di conversazione personalizzate utilizza i flussi di lavoro descritti nella pagina Editor widget.

I widget che utilizzerai probabilmente con il dispositivo Conversazione includono:

• Pannello Canvas - Pannello per posizionare tutti i widget con controllo di allineamento e altro ancora.

• UEFN TextBlock per ConversationModalDialogViewModel - Per il testo del titolo della conversazione.

• UEFN TextBlock per ConversationModalDialogViewModel - Per il corpo del testo della conversazione.

• Pulsante UEFN per ConversationModalDialogViewModel - Per tutti i pulsanti/campi di scelta di testo.

Valori di associazione

I valori di associazione si riferiscono al testo inserito nel grafico di conversazione. Tutto il testo inserito nei nodi di conversazione viene aggiunto ai widget durante il gameplay, quando quest'ultimi sono associati correttamente ai widget nel modello di visualizzazione.

L'associazione dei valori di testo per la casella della conversazione personalizzata inizia dal pannello Gerarchia nell'Editor widget.

1. Seleziona un widget nel pannello Gerarchia. Puoi iniziare dalla parte superiore della gerarchia e procedere fino alla fine dell'elenco.  

2. Fai clic su Visualizza associazioni nella barra degli strumenti in basso. Si apre il pannello del modello di visualizzazione.  

   

3. Seleziona l'elemento di cui hai bisogno, quindi fai clic su + Aggiungi widget nel pannello Modello di visualizzazione. In questo modo il widget viene aggiunto automaticamente all'elenco dei modelli di visualizzazione.

   

   È possibile aggiungere i widget al modello di visualizzazione facendo clic sul campo Widget e selezionando il widget desiderato nel menu a discesa.

   

4. Seleziona la proprietà da associare al widget facendo clic sull' icona Modifica nella proprietà Testo UEFN e selezionando Testo > Seleziona.

   

5. Seleziona un valore di testo o un valore di pulsante nel menu a discesa CreativeModalDialogueViewmodel. In questo modo, aggiungerai il valore selezionato al widget. La selezione deve essere effettuata in base al tipo di widget nella gerarchia.

   

6. Fai clic su Seleziona per terminare l'associazione dei valori ai widget.

   1. I valori di testo includono Titolo, Corpo o Testo principale pulsante n.:

   2. Titolo è il valore impostato nel campo Nome dell'oratore nel dispositivo Conversazione o il valore impostato in Titolo nel dispositivo Finestra di dialogo popup.

   3. Corpo è il testo che segue e di solito presenta al giocatore le Opzioni nella conversazione. Questi rappresentano i nodi Voce che si collegano al nodo Punto di ingresso predefinito.

   4. Testo principale pulsante n. è il testo che viene visualizzato nei nodi di risposta, man mano che sono ordinati nel grafico di conversazione.

   

I valori dei pulsanti devono essere numerati in base al numero di widget pulsanti utilizzati. I valori sono impostati nello stesso ordine numerico in cui sono stati aggiunti i widget pulsante. I pulsanti sono i nodi di risposta in un grafico di conversazione. In questo modo il testo del pulsante viene associato a ciascuno dei pulsanti di conseguenza.

Associazione dei pulsanti

L'associazione dei pulsanti si riferisce all'attivazione di eventi in seguito alla selezione di un pulsante. Questo può essere un evento semplice, come un PNG che fornisce un oggetto, oppure uno scambio complesso in cui lo stesso PNG offre merci in vendita, dando il via a una serie di eventi successivi.

Per programmare l'attivazione degli eventi nei widget dei pulsanti personalizzati, devi aggiungere la logica degli eventi al pulsante dal modello di visualizzazione.

1. Fai clic su Visualizza associazioni nella barra degli strumenti inferiore.

   

2. Seleziona un pulsante alla volta nel pannello Gerarchia nell'Editor widget. Selezionando il widget nel pannello Gerarchia, il widget del pulsante selezionato viene posizionato automaticamente nel campo Widget.

3. Fai clic su + Aggiungi widget. In questo modo, il widget viene aggiunto di nuovo all'elenco.

   

4. Seleziona il campo freccia e scegli Un metodo per visualizzazione modello.

   

5. Seleziona il pulsante e scegli il valore Al clic. Assicurati di fare clic su Evento nella finestra di selezione, non su Seleziona.

6. Seleziona il valore Risposta nel modello di visualizzazione.

7. Scegli il valore di risposta che desideri per il pulsante nella riga sottostante. L'associazione risultante deve essere simile alla seguente:

   

Puoi anche impostare i pulsanti in modo che vengano mostrati o nascosti a seconda che siano assegnati loro dei valori:

1. Seleziona il pulsante dalla Gerarchia e aggiungi un widget al pulsante.

2. Scegli il valore Visibilità.

3. Trova il Visibilità pulsante n. corrispondente sul lato destro dell'associazione e selezionalo. L'associazione risultante deve essere simile alla seguente:

   

4. Ora il pulsante sarà visibile solo se c'è una risposta da selezionare.

Fai clic sulla GIF per ingrandirla.

Senza l'associazione Visibilità, il testo verrebbe cancellato dal campo di risposta e lascerebbe una casella di scelta vuota per i giocatori:

Fai clic sulla gif per ingrandire. Testo > Seleziona

Associazione di materiali

Puoi utilizzare i materiali in UMG per popolare il widget Immagine. I materiali utilizzati con UMG devono presentare il formato materiale UI affinché il widget riconosca il file Materiale e lo utilizzi con il widget Immagine. Per maggiori informazioni, consulta la documentazione relativa a materiali UI.

Con i materiali, puoi anche popolare l'array Conversazione materiali. Puoi creare materiali personalizzati importando file che possono essere convertiti in texture all'interno del grafico dei materiali. I seguenti tipi di file non costituiscono un elenco completo dei tipi di file accettati, ma rappresentano formati standard per l'importazione di asset di immagini raster:

• .png

• .webp

• .jpg

Nel dispositivo Conversazione, aggiungi i tuoi materiali all'array Materiale di conversazione. Quindi, verifica che nel Grafico di conversazione, sia presente il nodo Imposta materiale. I materiali sono referenziati dal grafico nelle associazioni.

Per associare un materiale a un dispositivo Conversazione, esegui le operazioni seguenti:

1. Nel'Editor widget UI, fai clic sul widget Immagine nel pannello Gerarchia.

   

2. Fai clic su Visualizza associazioni per aprire il pannello delle associazioni. All’apertura del pannello, viene visualizzata una connessione al widget Immagine.

   

3. Fai clic sul pulsante +Aggiungi widget per aggiungere il widget Immagine al pannello Associazioni visualizzazione.

   

4. Fai clic sull'icona Modifica del widget Image nel campo a sinistra per aprire le relative opzioni.

   

5. Seleziona widget Immagine > Pennello > Seleziona. In questo modo vengono aggiunte le associazioni di pennelli selezionabili al campo destro.

   

6. Fai clic sull'icona Modifica nel campo a destra per aprire le opzioni di associazione.

   

7. Seleziona Funzione di conversione > Crea pennello immagine da materiale > Seleziona. In questo modo vengono visualizzate ulteriori opzioni per modificare il materiale desiderato da applicare al widget.

   

8. Dallo slot Materiale, seleziona l'icona Collegamento, quindi dal menu scegli Modello di visualizzazione Finestra di dialogo modale Fortnite Creativo > Materiale artistico 01 > Seleziona.

   

9. Nello slot Dimensioni immagine, inserisci gli stessi valori impiegati nell'Opzione Dimensioni immagine del widget Immagine nel pannello Dettagli .

   

Il risultato finale corrisponderà a un materiale identificativo per l'interlocutore.

Creazione di animazioni UI per le conversazioni

Puoi anche utilizzare il materiale di conversazione in un'animazione UI. Il Tipo di conversazione deve essere impostato su Casella o Personalizzato nel dispositivo Conversazione. Nel grafico del materiale, puoi fare riferimento al materiale della conversazione dal dispositivo Conversazione quando utilizzi il nodo Riproduci animazione della conversazione.

Per associare questo nodo Conversazione al tuo widget UI, devi utilizzare il valore Avanzamento nel modello di visualizzazione per collegarlo all'animazione UI creata in Sequencer.  Per informazioni su come animare un materiale, consulta il documento Animazione UI.