Creazione di interazioni personalizzate con abilità

Questa procedura dettagliata fornisce un esempio di progetto UMG (Unreal Motion Graphics) e le relative associazioni Modello di visualizzazione che puoi utilizzare per creare una UI personalizzata per il dispositivo Interazione qualificata.

Quando crei la tua interazione qualificata personalizzata, assicurati di impostare un evento per iniziare l'interazione. Puoi anche impostare attivatori di eventi che assegnano ai giocatori oggetti per aver completato correttamente l'interazione qualificata.

Puoi basarti su questi esempi impostando le cutscene cinematiche una volta che i giocatori o gli oggetti puntano a determinate zone.

Questo tutorial spiega come creare un'interazione qualificata a pressione rapida in cui i giocatori possono tenere premuto un input attivatore per puntare alle zone corrette.

Prima di iniziare a personalizzare la tua UI, devi creare e importare tutti gli asset da utilizzare nei tuoi progetti. Visita la pagina Creazione di una UI personalizzata con i materiali per saperne di più sull'utilizzo dei materiali nel tuo design.

Configura il dispositivo

Segui gli step seguenti per creare un esempio di golf in cui i giocatori puntano a una zona perfetta per garantire il successo quando colpiscono. Quando progetti la tua UI, puoi rinominare i pannelli man mano che li posizioni nel pannello Gerarchia.

1. In Esplora contenuti, posiziona un dispositivo Interazione qualificata nel tuo progetto.

2. Nel pannello Dettagli del dispositivo, modifica le impostazioni seguenti.

   

   Opzione	Valore	Descrizione
   Tipo di UI	Barra	Determina il tipo di interfaccia utente da visualizzare.
   Widget personalizzato	Aggiungi il tuo Widget utente personalizzato	Seleziona un widget personalizzato da utilizzare per l'interazione.
   Tipo di interazione	Carica e rilascia	Carica e rilascia si anima mentre si tiene premuto il pulsante di attivazione e si attiva al momento del rilascio.
   Colore indicatore	Scegli un colore	Questo esempio utilizza il colore rosso.
   Dimensione area buona	80.0	Imposta la dimensione dell'area buona in percentuale rispetto all'indicatore totale.
   Posizione zona buona	0.0	Imposta la posizione della zona buona.
   Dimensione area perfetta	15.0	Imposta la dimensione dell'area perfetta in percentuale rispetto all'area buona.
   Posizione zona perfetta	100.0	Imposta la posizione della zona perfetta.
   Colore zona buona	Scegli un colore	Questo esempio utilizza il colore verde scuro.
   Colore zona perfetta	Scegli un colore	Questo esempio utilizza il colore verde lime.

Aggiunta dell'immagine di sfondo

Segui gli step seguenti per creare l'immagine di sfondo della barra dell'indicatore verticale in questo esempio. Lo sfondo di questa procedura dettagliata è una barra nera arrotondata in cui si trovano le zone.

Utilizza l'immagine qui sopra come riferimento quando ricrei gli step in questo tutorial.

1. Crea un Widget utente per la tua interazione.

2. Individua e fai due volte clic sul Widget utente collegato al dispositivo per accedere al relativo Editor widget utente.

3. Nel pannello Gerarchia, trascina e nidifica una Overlay che serva da canvas generale. In questo esempio, è denominato Overlay. Quindi, trascina un altro Overlay per contenere lo sfondo. In questo esempio, è denominato SID.

4. Trascina e nidifica un'Immagine, denominata Barra nell'esempio, nell'Overlay figlio.

5. Nel pannello Dettagli di Immagine, imposta il materiale o la texture per lo sfondo.

Imposta le zone

Puoi creare una zona negativa per il tuo esempio che garantirà un errore automatico quando preso di mira. Tuttavia, questo esempio utilizza solo una zona perfetta composta da tre contenitori:

• Un'area vuota iniziale, chiamata PerfectZoneStart.

• La zona buona o perfetta, chiamata SizeBox.

• L'area vuota successiva, chiamata PerfectZoneEnd.

Segui gli step seguenti per ricreare la zona perfetta di questo esempio.

1. Dal pannello Tavolozza, trascina e nidifica una Casella impilata all'interno dell'Overlay figlio, denominato SID nell'esempio.

2. Quindi, trascina e nidifica i seguenti elementi figlio all'interno della Casella impilata: Casella scala > Casella dimensione.

   1. Nel pannello Dettagli del pannello Casella scala, imposta l'opzione Allungamento su Specificato dall'utente. Quindi, imposta la Scala specificata dall'utente per indicare quanto spazio vuoi sopra la zona perfetta. Ai fini di questo esempio, imposta la scala su 0.27.
   2. Nella Casella dimensione, imposta Override altezza sull'altezza dell'indicatore superiore.

3. All'interno della stessa Casella impilata, trascina anche Casella dimensione > Casella scala > Overlay > Immagine.

   1. Nel pannello Dettagli del Casella dimensione, imposta Override altezza sulla dimensione della zona perfetta.

   2. Nel pannello Dettagli del Casella scala, imposta Allungamento su Specificato dall'utente. Quindi, imposta Scala specificata dall'utente su 1.

   3. La PerfectZone Overlay conterrà il materiale o la texture della zona perfetta.

4. All'interno della stessa Casella impilata, trascina anche un Overlay > Casella dimensione.

   1. Nel pannello Dettagli di PerfectZoneEnd Overlay, imposta Allungamento su Specificato dall'utente. Quindi, imposta la Scala specificata dall'utente per indicare quanto spazio vuoi sopra la zona perfetta. Ai fini di questo esempio, imposta la scala su 0.49.
   
   1. Nel pannello Dettagli per la Casella dimensione, imposta Override altezza sull'altezza dell'indicatore inferiore.
   

5. Per aggiungere ulteriori dettagli, puoi includere le tacche per le zone di sfondo aggiungendo un'immagine, denominata tacche nell'esempio, sotto la Casella impilata.

Impostazione dello Scrubber

Per questo esempio, lo scrubber deve trovarsi all'interno di un contenitore in movimento. Per eseguire questa operazione, devi creare una Casella impilata con due oggetti.

Il primo oggetto contiene una Casella dimensione impostata su Scala utente, che in seguito collegherai alla Scala indicatore Interazione qualificata nel Modello di visualizzazione. Il secondo oggetto conterrà un contenitore con lo scrubber.

1. Sotto il SID Overlay, trascina e nidifica una Casella impilata, denominata ScrubberStackBox nell'esempio, per contenere due configurazioni figlio di: Overlay > Casella dimensione e Casella dimensione > Casella scala > Immagine denominata Scrubber.

   1. Nel pannello Dettagli della ScrubberMovingZone Overlay, imposta Allungamento su Specificato dall'utente. Quindi, imposta Scala specificata dall'utente su 0.
   
   1. Nel pannello Dettagli per Casella dimensione, imposta Override altezza sull'altezza dell'indicatore superiore.
   
   1. Imposta Override altezza di ScrubberContainer Casella dimensione su 0.
   
   1. Modifica l'impostazione Allungamento della casella della scala Overlay in Specificato dall'utente. Imposta Scala specificata dall'utente su 1.
   
   1. Nell'impostazione Immagine dello scrubber Immagine, imposta il materiale o la texture dello scrubber.
   

Impostazione del Modello di visualizzazione

Per connettere la tua UI personalizzata al dispositivo Interazione qualificata, segui questi step.

1. Nel Widget utente, vai a Finestra > Modelli di visualizzazione per aprire la finestra Modelli di visualizzazione.

2. Fai clic su +Modello di visualizzazione. Quindi, seleziona Dispositivo - Modello visualizzazione Interazione qualificata e fai clic su Seleziona.

3. Dalla barra degli strumenti inferiore o dalla scheda Finestra, seleziona Associazioni visualizzazione.

4. Imposta la tua Associazioni visualizzazione in modo che corrisponda all'immagine seguente.

   
   1. Fai clic su + Aggiungi widget per aggiungere ScrubberMovingZone.
   2. Imposta ScubberMovingZone su Scala specificata dall'utente e UEFN_SkilledInteraction_ViewModel su Valore indicatore corrente.
   3. Fai clic su + Aggiungi widget per aggiungere PerfectZoneStart.
   4. Imposta PerfectZoneStart su Scala specificata dall'utente e UEFN_SkilledInteraction_ViewModel su Zona perfetta min.
   5. Fai clic su + Aggiungi widget per aggiungere PerfectZoneEnd.
   6. Imposta PerfectZoneStart su Scala specificata dall'utente e aggiungi una funzione di conversione per Aggiungi Int Double.
   7. Imposta A su 1.
   8. Imposta B su UEFN_SkilledInteraction_Viewmodel/Zona perfetta max.
   9. Imposta Nega B su Vero.