Effetto Sfondo

Questo tutorial mostra diversi modi per visualizzare uno sfondo in Wonderland Engine:

Sfondo 3D 

Cielo 

La renderizzazione del cielo è presente fin dai primi giochi. Dona una percezione di profondità e, virtualmente, aumenta le dimensioni del mondo agli occhi del giocatore.

Esistono diverse tecniche per renderizzare il cielo:

  • Rendering dell’atmosfera
  • Immagine Cubemap (chiamata anche “Skybox”)
  • Immagine equirettangolare

Attualmente, Wonderland Engine supporta solo quest’ultima opzione.

Immagine equirettangolare 

Un’immagine equirettangolare si ottiene proiettando un’immagine a 360 gradi su una superficie piana. Ha un rapporto di aspetto di 2:1, quindi la larghezza è il doppio dell’altezza.

Di seguito un esempio di come appare un’immagine equirettangolare:

Esempio di immagine equirettangolare

Vediamo come possiamo creare un cielo in Wonderland Engine!

Importazione 

Per prima cosa, importa la tua immagine equirettangolare: trascina il file da una cartella nel Browser degli Asset del tuo editor, quindi trascina l’immagine da lì nella vista Scena per creare una texture da essa.

Se non hai un’immagine equirettangolare, puoi trovare alcune opzioni gratuite nella lista di risorse qui sotto.

Materiale 

Crea un materiale per renderizzare la texture del cielo:

  • Vai su Viste > Risorse
  • Seleziona la scheda Materiali
  • In alto a destra, clicca su Crea
  • Fai doppio clic sul nome per rinominarlo (opzionale)
  • Seleziona Sky nel menu a tendina nella colonna pipeline

Alla fine otterrai una lista di risorse che appare così:

Mostra come creare un materiale per il cielo

Impostazioni di Rendering 

Ora possiamo collegare il materiale del cielo al renderer del cielo:

  • Vai su Viste > Impostazioni Progetto
  • Scorri fino a Rendering e apri la sezione
  • Scorri fino a Cielo e clicca su abilitato
  • Assegna il materiale del cielo al menu a tendina material
  • Imposta la proprietà texture sulla texture del cielo

Mostra come abilitare il rendering del cielo

Gradiente 

Oltre a utilizzare una texture, puoi anche utilizzare gradienti con due e quattro punti colore.

Aggiorna il pipeline Sky e attiva le funzioni GRADIENT o GRADIENT_4_STOPS.

Una volta aggiornato il pipeline, modifica le proprietà colorStop del materiale del cielo:

Cielo renderizzato come gradiente

Sfondo 2D 

Wonderland Engine supporta anche immagini di sfondo e gradienti bidimensionali.

Per utilizzarlo, cambia la proprietà shader del pipeline Sky su Sfondo per renderizzare in 2D.

In 2D, le texture / gradienti verranno visualizzati in modo identico indipendentemente dalla direzione verso cui la telecamera è orientata:

Immagine di sfondo 2D
Gradiente di sfondo 2D

Risorse 

Ecco un elenco non esaustivo di siti web con immagini equirettangolari gratuite: