Ciao a tutti!
Questo tutorial è rivolto a tutti gli utenti che vorrebbero avere un approccio un po’ più avanzato rispetto alla "semplice" visualizzazione 3d in Unreal Engine, cogliendo le opportunità che le sue applicazioni interattive sono in grado di offrire.

L'obiettivo è infatti miratamente quello di cogliere le potenzialità di un software che negli ultimi anni sta facendo parlare molto di se. Unreal Engine nel campo archiviz è, come risaputo, uno strumento molto valido e si vedono sempre più utenti che raggiungono davvero un alto livello di realismo! Ovviamente parliamo di un motore completo e complesso, che va oltre la dimensione puramente grafica, quindi abbiamo la possibilità di interagire con gli oggetti in scena, spegnerli, muoverli o cambiargli materiale. Offrendo queste possibilità anche ai destinatari delle nostre creazioni interattive.
Di seguito, vedremo quali sono i passaggi necessari per creare un piccolo menù che ci permetterà di cambiare i materiali di un’automobile. In altri termini, un semplice configuratore 3D real time basato sulla tecnologia di Unreal Engine.

Il sintetico tutorial che vi proponiamo si divide essenzialmente in tre fasi:
- Creazione del blueprint per le mesh da configurare
- Creazione di una semplice interfaccia grafica
- Script dei pulsanti per la gestione dei materiali.

Non tratteremo la creazione degli assets, argomento che merita decisamente una trattazione a se stante. Tutti i passaggi che vedremo sono applicabili a tutte le geometrie e in qualsiasi settore.

Consiglio di dare uno sguardo alle blueprint (level blueprint, blueprint classes), ho inserito qualche link di approfondimento nel testo.

Buona lettura!


CREAZIONE DEL BLUEPRINT

Iniziamo creando un blueprint con all’interno tutte le geometrie che modificheremo tramite il menù.
La procedura è molto semplice, basta cliccare il tasto destro sul content browser e, nel menù a tendina, selezionare blueprint class. Apparirà la finestra “Pick parent class” con l’elenco delle classi, in questo caso selezioniamo la classe Actor.

cf2af066d6be602d9231c7094d212db0.gif

Abbiamo creato un blueprint vuoto che può essere richiamato all’inizio del configuratore. Rinominiamolo “BP_carrozzeria”.
Per utilizzare questo blueprint per la gestione dei materiali, è necessario inserire all’interno le mesh sulle quali vogliamo agire. Esistono diversi procedimenti per inserire delle static mesh, il più veloce è tramite trascinamento dal content browser alla viewport del blueprint; ricordatevi di controllare che il posizionamento sia corretto! :)
In questo caso, le mesh hanno un unico materiale assegnato, associato a “Element 0”. Nel caso di mesh con più materiali, capiremo più avanti come richiamarle.

N.B. Quando carichiamo le mesh all’interno del blueprint vengono trasformate automaticamente in variabili. Questo ci permetterà di richiamarle più avanti!

a13579f7de7247246206baac0ac2d5ba.jpg

Clicchiamo su compila, chiudiamo la finestra e trasciniamolo sulla scena. Per modificare la posizione o il materiale assegnato alle singole mesh, dovrete riaprire la scheda del blueprint.

4fdc7d6c0553e4106667c82caa1a5566.gif

 CREAZIONE WIDGET

Per la gestione dei pulsanti dobbiamo passare alla creazione di un’interfaccia. Come nei videogiochi, abbiamo la possibilità di avere un’interfaccia diversa a seconda del livello in cui siamo.
Create nel content browser una cartella e rinominatela UI. All’interno di questa cartella, create una UI vuota come nella GIF che segue e rinominatela (in questo tutorial “UI_mercedes”).

a11f8009b99b0ee357602dd9718d39e8.gif

 LEVEL BLUEPRINT

Passiamo alla creazione dello script nel level blueprint che richiamerà questa UI ogni volta che facciamo partire il configuratore in questo livello. È utile crearla adesso per controllare se stiamo procedendo correttamente.
Nella barra degli strumenti apriamo il menù blueprint e clicchiamo su “open level blueprint“.
Cerchiamo, su event graph, “event begin play”.
Aggiungiamo il nodo “create widget” che ci permette di richiamare l’interfaccia. Nel menù class (in viola su questo nodo) selezioniamo UI_mercedes.
Abbiamo appena richiamato l’interfaccia ma ancora non è visibile quando facciamo partire il configuratore. Per visualizzarla è necessario aggiungere il nodo “add to viewport”

Tutta la procedura è esemplificata nella Gif qui di seguito.

bb82e6bdb1abf41b909df33829ee17b9.gif

Da questo momento in poi, tutte le volte che vogliamo testare l’interfaccia, è sufficiente premere play nella barra degli strumenti.

INTERFACCIA

Torniamo alla creazione della UI.
Riapriamo la finestra cliccando due volte sulla UI (UI_mercedes) creata in precedenza. Quella che si presenta è la finestra di creazione delle interfacce. Al centro troviamo una viewport con un rettangolo che rappresenta la risoluzione dello schermo. A seconda del device per il quale stiamo creando il configuratore, dobbiamo scegliere la risoluzione più adatta dal menù “screen size”.

ee41a6e520767137621ede72956dfb24.jpg

Sulla sinistra troviamo la scheda palette con tutti gli oggetti (già funzionanti) che possiamo aggiungere all’interfaccia.

Cerchiamo “button” sulla barra di ricerca poco in alto e trasciniamolo sulla viewport

95f775b9122934b67234848434c52dca.jpg

Questo bottone potrà essere modificato a nostro piacimento nell’aspetto tramite il menù appearance sotto details. Potete decidere i colori, le trasparenze oppure caricare delle immagini create in precedenza! Questo mio primo bottone accenderà il materiale grigio della carrozzeria, lo rinomino “Button_gray”

c6e75711d5d38e5d5997b5d3945dc018.jpg

Fatto ciò e creati i pulsanti a voi necessari, passiamo alla fase di script.

Per ogni pulsante cerchiamo il menù events sotto la scheda details. Da questo punto possiamo collegare un evento a seconda di ciò che succede al bottone durante il gioco. Nel nostro caso utilizzeremo OnClicked, al click del pulsante.

60e94f6877f431a1d72c37e666c9173d.jpg

Una volta cliccato sul più, la finestra passa dalla modalità designer, alla modalità graph.

SCRIPT PULSANTI
Cerchiamo “OnClicked (Button_gray)”

0f20c5d6f83fa1888772755118704de9.jpg

Aggiungiamo il nodo “get all actors of class”. Questo cerca tutti gli actors che implementano una determinata classe. Sotto actor class (in viola anche in questo nodo) selezioniamo il nostro blueprint (BP_carrozzeria).

ba0c09c872256fe9fd47b5b6fd4bdc62.gif

Ora colleghiamo “for each loop with break”. Questo nodo ci permette di scandire tutto quello che c’è all’interno di out actors del nodo precedente e mi rilascerà il primo elemento dell’array.

cea74d29797d90f63d58ba34ef3e3987.jpg

Ora colleghiamo il nodo “is Valid”. Questo ci permette di fare un controllo sull’array per determinare che non sia un oggetto vuoto. Ora colleghiamo "is not valid" di questo nodo a "break" del nodo precedente, cioè se non trova niente, si ferma.

59f462a53f929ac7b3b8aff3a37f8c1b.jpg

Ora possiamo collegare le mesh che abbiamo inserito all’interno del blueprint scrivendo Get e il nome della mesh, esempio “get classe c door”.

1a648121f6d0096de6449365251e9956.gif

Per ultimo colleghiamo il set material alle variabili come in figura

N.B. Nel set material è presente l’input element index che di default è impostato su 0. In questo lo lasceremo così perché il nostro è su Element 0, ma se il materiale che vogliamo cambiare è su un canale differente, basta modificarlo con il numero che troverete sulla lista dei materiali. (element 1 – element 2 - ecc)

1a7bec73f68bafccb0d256f4cb7e7005.gif

Una volta creati tutti gli script per i tasti, compilate, salvate e cliccate play per provare il menù sulla scena!
f8846816a5c1d234827c17850087c4f5.gif

Bene, è tutto! Spero che questo piccolo tutorial vi sia piaciuto e che lo troviate utile per i vostri lavori su unreal engine! :)

Buon 3d a tutti!