Si usa Corona SDK, sabe que es una herramienta poderosa y fácil de usar para crear juegos móviles. Sin embargo, la plataforma está limitada a solo dos dimensiones, aunque están presentando formas incorporadas para simular efectos en 3-D. Como desarrollador de juegos, puedes superar esta limitación usando lo que se conoce como el concepto de profundidad de campo.
Aunque me referiré a Corona SDK en mi ejemplo, la teoría de la profundidad de campo se puede aplicar a cualquier plataforma de desarrollo y a casi cualquier objeto gráfico..
Si has incursionado en la fotografía, ya sabes qué profundidad de campo es. Para aquellos de nosotros que no sabemos, intentaré explicar. La profundidad de campo es el efecto borroso que se ve en las fotografías causado por el enfoque en un objeto en particular sobre otros. La profundidad de campo se basa en dos conceptos, la percepción del enfoque y la distancia de emulación..
En el primer concepto, la percepción de enfoque se utilizará en dos objetos o dos planos para crear un entorno con profundidad. Un objeto será el punto focal y los otros objetos o planos estarán fuera de foco. Los objetos desenfocados casi siempre aparecerán borrosos para ayudar a controlar el enfoque del espectador.
El segundo concepto es emular la distancia. Cuando mires el paisaje, los objetos del armario aparecerán más grandes y los objetos más alejados aparecerán más pequeños. La profundidad de campo utiliza este concepto para reforzar la ilusión de profundidad en la escena. Al hacer que los objetos en un entorno 2D sean más grandes o más pequeños, la mente del espectador será engañada asumiendo que hay profundidad en la escena.
Si ha jugado videojuegos anteriormente o incluso ha visto algunas fotografías populares, ya ha visto el concepto de profundidad de campo en uso, pero es posible que no haya reconocido el efecto. Si ejecuta una búsqueda rápida de imágenes de Google para la profundidad de campo, puede ver cientos de ejemplos para este estilo de fotografía. Las fotos que verás van desde paisajes hasta fotos de bodas. En cada fotografía de profundidad de campo, instantáneamente sabes lo que el fotógrafo quiere que el espectador vea..
Al utilizar la profundidad de campo, puede controlar el enfoque de la escena y crear profundidad al enfocarse en el sujeto principal mientras mantiene otros elementos fuera de foco. Aunque disfruto el desarrollo con Corona SDK, este efecto es una forma simple pero poderosa de superar las limitaciones 2D de la plataforma Corona SDK..
En los siguientes ejemplos, explicaré cómo se puede usar la profundidad de campo en los juegos móviles. Siéntase libre de usar el concepto de profundidad de campo en cualquiera de sus aplicaciones móviles con el SDK de su elección.
Ahora que sabemos qué es la profundidad de campo, veamos un ejemplo de una escena que no usa el concepto de profundidad de campo.
En esta escena, ambas aves están enfocadas y aparece como una pantalla plana para el espectador. Aunque esta escena puede ser lo suficientemente buena para algunos juegos, podemos usar el concepto de profundidad de campo para hacer que la escena sea más interesante para el jugador y darle vida. En la siguiente escena, verá un ejemplo básico del concepto de profundidad de campo en uso.
Al utilizar el concepto de profundidad de campo, esta escena ha simulado la distancia al mantener el ave a la izquierda enfocada y dejar al ave a la derecha fuera de foco. Reducir el tamaño del ave desenfocada también refuerza la percepción de la distancia..
También podemos invertir la escena para hacer que el punto focal aparezca más lejos. Hacer que los objetos más grandes se vuelvan borrosos y mantener el punto focal enfocado logra esta inversión. Echemos un vistazo a un ejemplo de esta inversión de escena..
En la escena de reversión, hemos hecho del ave más pequeña el punto focal y hemos engañado al espectador para que suponga que el ave más pequeña está más lejos borrando los objetos más cercanos..
A estas alturas, es posible que tenga curiosidad acerca de cómo se crearon estos gráficos. Si tiene Photoshop o una herramienta de edición gráfica similar, puede usar un Desenfoque Gaussiano para crear escenas de profundidad de campo. Estoy seguro de que cualquier tipo de desenfoque funcionará, pero he tenido el mayor éxito con el Desenfoque Gaussiano. Echemos un vistazo a cómo crear un gráfico borroso y no borroso para nuestra aplicación.
Con Photoshop abierto, cree un nuevo documento de 150 píxeles por 150 píxeles. La configuración predeterminada para las otras opciones funcionará para este tutorial.
A continuación, haga clic en la herramienta de formas personalizadas y seleccione Pájaro 2 desde el menú desplegable de formas. En este tutorial, estoy usando la forma de un pájaro. Cualquier forma funcionará.
Ahora que hemos seleccionado una forma, cambiemos el color de primer plano a un bonito color azul haciendo clic en Establecer color de primer plano opción.
Con la herramienta de forma, cree una forma de pájaro dentro del documento e intente que el pájaro llene la mayor parte del documento..
Agreguemos un borde simple a nuestra forma para darle una definición..
Antes de añadir el Desenfoque Gaussiano a nuestra forma, vamos a Archivo> Guardar para Web> Dispositivos para guardar la forma como un archivo PNG en nuestra carpeta de proyectos. La forma no borrosa que estamos guardando se utilizará como punto focal en nuestra aplicación móvil.
Una vez que hayamos guardado la forma no borrosa, ahora podemos agregar el Desenfoque Gaussiano. Con la mayoría de las formas, puedes agregar un Desenfoque Gaussiano sin tener que completar ningún paso adicional. En nuestro caso, tendremos que utilizar el Imagen aplanada Opción en Photoshop porque estamos utilizando un borde. Si no aplanamos la imagen, el desenfoque producirá algunos resultados inesperados.
Haga clic derecho en la capa de forma y haga clic en Imagen aplanada. Una vez que la imagen se ha aplanado, agregue el Desenfoque gaussiano yendo a Filtro> Blur> Gaussian Blur.
Con nuestro Desenfoque gaussiano aplicado a nuestra forma, ahora podemos guardar la forma en nuestra carpeta de proyectos usando las mismas instrucciones en el Paso 6.
Después de completar estos ocho pasos, debe tener dos pájaros en la carpeta del proyecto, una imagen clara y nítida de un pájaro y un pájaro borroso. Ahora puedes incorporar estas imágenes en tu próxima aplicación móvil.
En este tutorial, espero que hayas aprendido a usar el concepto de profundidad de campo para dar vida a tus juegos. Aunque he usado un pájaro en mi tutorial, puedes usar casi cualquier objeto para crear una escena con profundidad usando el concepto de profundidad de campo. Puede aplicar la profundidad de campo al fondo en su próximo desplazador lateral 2D o aplicar el concepto a ciertos elementos de su próximo juego de terror. Gracias por leer!