Share
Se usi Corona SDK, sai che è uno strumento potente e facile da usare per creare giochi per dispositivi mobili. Tuttavia, la piattaforma è limitata a due sole dimensioni, anche se stanno uscendo con metodi integrati per simulare effetti 3D. Come sviluppatore di giochi, puoi superare in qualche modo questa limitazione usando il concetto di profondità di campo.
Anche se nel mio esempio mi riferirò a Corona SDK, la teoria della profondità di campo può essere applicata a qualsiasi piattaforma di sviluppo e a quasi tutti gli oggetti grafici.
Se ti sei immerso nella fotografia, sai già qual è la profondità di campo. Per quelli di noi che non lo so, cercherò di spiegare. La profondità di campo è l'effetto sfocato che si vede nelle fotografie causato dalla messa a fuoco su un particolare oggetto rispetto ad altri. La profondità di campo si basa su due concetti: percezione della messa a fuoco e distanza di emulazione.
Nel primo concetto, la percezione della messa a fuoco verrà utilizzata su due oggetti o due piani per creare un ambiente con profondità. Un oggetto sarà il punto focale e gli altri oggetti o piani saranno sfocati. Gli oggetti fuori fuoco appariranno quasi sempre sfocati per aiutare a controllare il fuoco dello spettatore.
Il secondo concetto emula la distanza. Quando guardi il paesaggio, gli oggetti del tuo armadio appariranno più grandi e gli oggetti più lontani appariranno più piccoli. La profondità di campo utilizza questo concetto per rafforzare l'illusione di profondità nella scena. Rendendo gli oggetti in un ambiente 2D più grandi o più piccoli, la mente dello spettatore sarà ingannata assumendo che ci sia profondità nella scena.
Se hai già giocato a videogiochi o hai guardato alcune foto popolari, hai già visto il concetto di profondità di campo in uso, ma potresti non averne riconosciuto l'effetto. Se esegui una ricerca rapida su Google Image per profondità di campo, puoi vedere centinaia di esempi per questo stile di fotografia. Le foto che vedrai vanno dai paesaggi alle foto di matrimoni. In ogni fotografia di profondità di campo, sai immediatamente cosa il fotografo vuole che lo spettatore guardi.
Utilizzando la profondità di campo, è possibile controllare la messa a fuoco della scena e creare profondità concentrandosi sul soggetto principale mantenendo gli altri elementi fuori fuoco. Sebbene mi piaccia lo sviluppo con Corona SDK, questo effetto è un modo semplice ma potente per superare i limiti 2D della piattaforma Corona SDK.
Nei seguenti esempi, spiegherò come la profondità di campo può essere utilizzata nei giochi mobili. Sentiti libero di usare il concetto di profondità di campo in qualsiasi tua applicazione mobile con l'SDK di tua scelta.
Ora che conosciamo la profondità di campo, guardiamo un esempio di una scena che non usa il concetto di profondità di campo.
In questa scena, entrambi gli uccelli sono a fuoco e appare come uno schermo piatto per lo spettatore. Sebbene questa scena possa essere abbastanza buona per alcuni giochi, possiamo usare il concetto di profondità di campo per rendere la scena più interessante per il giocatore e portarla davvero in vita. Nella scena successiva, vedrai un esempio di base del concetto di profondità di campo in uso.
Usando il concetto di profondità di campo, questa scena ha simulato la distanza mantenendo a fuoco l'uccello a sinistra e lasciando l'uccello a destra fuori fuoco. Rendere più piccolo anche l'uccello fuori fuoco rinforza la percezione della distanza.
Possiamo anche invertire la scena per far apparire il punto focale più lontano. Rendere gli oggetti più grandi sfocati e mantenere il punto focale a fuoco compire questa inversione. Diamo un'occhiata a un esempio di questa inversione di scena.
Nella scena di inversione, abbiamo reso l'uccello più piccolo il punto focale e abbiamo ingannato lo spettatore assumendo che l'uccello più piccolo sia più lontano sfocando gli oggetti più vicini.
A questo punto, potresti essere curioso di sapere come sono stati creati questi elementi grafici. Se si dispone di Photoshop o di uno strumento di modifica grafico simile, è possibile utilizzare una sfocatura gaussiana per creare scene di profondità di campo. Sono sicuro che qualsiasi tipo di sfocatura funzionerà, ma ho avuto il maggior successo con il Gaussian Blur. Diamo un'occhiata a come creare un'immagine sfocata e non sfocata per la nostra app.
Con Photoshop aperto, crea un nuovo documento 150 pixel per 150 pixel. L'impostazione predefinita per le altre opzioni funzionerà per questo tutorial.
Quindi, fare clic sullo strumento forme personalizzate e selezionare Bird 2 dal menu a discesa forma. In questo tutorial, sto usando la forma di un uccello. Qualsiasi forma funzionerà.
Ora che abbiamo selezionato una forma, cambiamo il colore di primo piano con un bel colore blu facendo clic sul Imposta il colore di primo piano opzione.
Con lo strumento forma, crea una forma di uccello all'interno del documento e prova a fare in modo che l'uccello riempia la maggior parte del documento.
Aggiungiamo un semplice bordo alla nostra forma per dargli una definizione.
Prima di aggiungere il Gaussian Blur alla nostra forma, andiamo a File> Salva per Web> Dispositivi per salvare la forma come file PNG nella nostra cartella del progetto. La forma non sfumata che stiamo salvando verrà utilizzata come punto focale nella nostra applicazione mobile.
Dopo aver salvato la forma non sfocata, ora possiamo aggiungere il Gaussian Blur. Con la maggior parte delle forme, puoi semplicemente aggiungere una sfocatura gaussiana senza dover completare passaggi aggiuntivi. Nel nostro caso, dovremo usare il Immagine piatta opzione in Photoshop perché stiamo usando un bordo. Se non appiattiamo l'immagine, la sfocatura produrrà alcuni risultati imprevisti.
Fare clic con il tasto destro sul livello forma e fare clic su Immagine piatta. Dopo che l'immagine è appiattita, aggiungi il Gaussian Blur andando a Filtro> Sfocatura> Sfocatura gaussiana.
Con la nostra sfocatura gaussiana applicata alla nostra forma, ora possiamo salvare la forma nella nostra cartella del progetto usando le stesse istruzioni al punto 6.
Dopo aver completato questi otto passaggi, dovresti avere due uccelli nella cartella del progetto, un'immagine chiara e nitida di un uccello e un uccello sfocato. Ora puoi incorporare queste immagini nella tua prossima applicazione mobile.
In questo tutorial, spero che tu abbia imparato come utilizzare il concetto di profondità di campo per dare vita ai tuoi giochi. Anche se ho usato un uccello nel mio tutorial, puoi usare quasi tutti gli oggetti per creare una scena con profondità usando il concetto di profondità di campo. Puoi applicare la profondità di campo allo sfondo sul tuo prossimo scroller laterale 2D o applicare il concetto a determinati elementi del tuo prossimo gioco horror. Grazie per aver letto!
Accentsconagua