Hoy te traigo un tutorial donde recrearemos escenas de videojuegos de antaño, para lograrlo usaremos varios planos ubicados en diferentes posiciones para generar profundidad y por supuesto agregaremos animaciones. Recuerda que este video tiene un propósito educativo. Debes revisar siempre el copyright de cada elemento que vas a utilizar. Comenzaremos con un título super conocido: Metal Slug. El mundo 2d tiene mucho que ofrecernos. Te explicaré con mi tutorial de Spark AR Planes – Animations.
Metal Slug es un juego de mi niñez, recuerdo pasar horas tratando de terminarlo. Estos tipos de juegos 2D encierran un gran trabajo artístico. En internet puedes encontrar bastante información sobre las capas y las posibles técnicas de trabajo. Como podrán ver está relacionado con imágenes simples y sprite sheets. Así que lo primero que haremos es obtener imágenes del juego para extraer sus elementos.
Encontré esta imagen donde se ven nuestros dos personajes. La trabajaremos en Photoshop, usaré la herramienta de lazo magnético y comenzaremos a delimitar sus bordes del primer personaje. Este proceso requiere de tiempo y precisión. Cuando hayamos terminado, utilizamos clic derecho y presionamos la opción capa via cortar, se crea una capa exclusivamente para nuestra selección.
Regresamos a nuestra capa de fondo y realizaremos el mismo proceso para el segundo personaje que es usar el lazo magnético, para luego tenerlo en una capa independiente. Ahora lo exportaremos en formato PNG y seleccionamos “archivo más pequeño” para que no peso tanto (size).
Acto seguido buscaremos en google, fondos de escenas. Hay varias para escoger, me quedaré con esta. Se ve fantástica! Busquemos otra imagen quiero agregar un helicóptero, lo modificaremos en photoshop. Delimitamos este elemento, cuando lo tengamos listo ¡exportamos!
Tutorial Spark AR
En estos instantes iremos hacia Spark AR. Crearemos en esta ocasión con plane tracking. Importaremos los archivos. En el placer generamos un plano, modificaremos su escala también mejoraremos su posición. Le crearemos un material, por supuesto su shader type será flat. Aquí agregaremos el background.
Ahora agregamos un segundo plano, lo situaremos aquí. Le crearemos un material, su textura será el primer personaje. Le aumentaremos su escala, lo movemos hacia adelante. Generamos otro plano y lo movemos hacia aquí… En esta parte visualizaremos el segundo personaje, no te olvides de aumentar su escala.
Para visualizar el helicóptero también crearemos otro plano. El helicóptero estará arriba del escenario. No te olvides que cada elemento estará en diferente profundidad .Así se vería dentro de Spark AR.
Una parte importante de los videojuegos son las interacciones. Haremos ejemplos simples utilizando las acciones de la plataforma. Seleccionamos el plano 1 y usaremos float. Modificamos su duración y también cambiamos el estilo de animación. Usaremos elastic in, así se vería.
Ahora vamos a tomar el plano 2. También usaremos la animación float, la duración será de 4 segundos y aquí vamos a cambiar los puntos de referencia del transition. Tenemos que revisar cómo se visualizará en conjunto toda la escena.
Por último usaremos el plano 3 ya sabes trabajaremos con float. Hacemos los ajustes necesarios para que el helicóptero se mueva de un lado a otro, quedaría de esta manera! Vamos a probarlo!
Se ve muy bueno pero siento que necesita algo más, por supuesto un sprite sheet. En google también podemos encontrar bastante referencia al respecto. Tomaré esta gráfica de explosión.
En Spark AR crearemos un nuevo plano, lo posicionamos en este lado. Cuando creamos el material, este tendrá las mismas propiedades que los otros. Ahora agregaremos un animation sequence, la textura será la asociada a la explosión, ya aparece la animación pero falta configurarla. El FPS lo bajaremos a la textura, le cambiaremos el número que aparece en la fila y en la columna.
Podemos agregar muchas más cosas para generar la inmersión de un juego retro, por ejemplo puede aparecer el título del juego. Recuerda que cada proceso de visualización y animación requiere perfeccionamiento. Inclusive podemos utilizar un tv estilo retro que aparece en la librería de Spark AR.
Patreon
Si desear apoyarme para mantener mi sitio web y recibir los archivos de mis tutoriales, puedes hacerlo a través de patreon. Gracias por llegar hasta aquí.
