Impy Runner

IMPY RUNNER

Este juego se trata de un Infinity Runner 2D de estética Pixel Art donde tendremos que saltar en el momento adecuado para esquivar los diferentes obstáculos que se nos presenten.

Referencia:

Una vez tenía el personaje diseñado (Impy, el Dinosaurio travieso) buscaba un juego de plataformas 2D simple y divertido donde pudiera encanjar. Me topé con el famoso juego de Google Chrome y decidí hacer uno similar adaptando la estética al estilo visual de dicho personaje.

Thumbnails:

 Antes de diseñar el juego establecí las mecánicas principales y secundarias del juego mediante algunos bocetos. Cómo se iba a mover el personaje, cómo serían los obstáculos que tendría que esquivar, cómo sería la difícultad, de qué forma se iba a generar el nivel, etc

Gameplay:

El objetivo principal del juego es aguantar sin morir para conseguir la mayor cantidad de puntos posibles. Por tanto, tendremos vidas que perderemos cuando chocamos contra un obstáculo y recuperaremos cuando recogemos ciertos objetos. 

Recibiremos más puntos con el paso del tiempo, por esquivar correctamente los obstáculos y por recolectar objetos.

El único control sobre el personaje es el salto que variará en altura según la intensidad del pulsado.

Prototipo:

Con el prototipo he conseguido ver como funcionaba el sistema de generación aleatoria e infinita de escenarios así como el aumento de los puntos al esquivar obstáculos.

Creación de Niveles:

 

Los escenarios los cree por trozos separando, fondos y suelos, dando un total de 45 combinaciones diferentes.

Sprites Personajes:

Para el personaje pricipal tendremos varias animaciones: Idle, correr y dormir. Siendo la de correr la que utilizaremos durante el juego.

Para el enemigo principal la de volar. Se comporta como otro obstáculo más, con la diferencia de que te resta puntos si impactamos contra el.

Interfaz:

Para la interfaz tendremos un contador de vidas, hasta un máximo de 6, y un contador de puntos simple.

Proceso de Construcción del Juego:

1º Lo primero que hice fue el personaje. Fue diseñado, adaptado a versión Pixel y animado con Photoshop:

2º Realicé un prototipo del juego en Unity 2D. En esta fase establecí la mecánica de salto, generación de escenarios y contador de puntos:

3º Diseñé los diferentes trozos de escenarios con Tiled siguiendo una serie de reglas para evitar que la aletoriedad del generador no provocara un nivel imposible de superar:

4º Inserté todos los sprites en Unity; tanto los escenarios como los diferentes objetos recolectables y el enemigo, previamente diseñado con Photoshop:

5º Programación y mejora del código del prototipo para cada uno de los nuevos elementos introducidos y creación de nuevas mecánicas como por ejemplo el sistema de vidas.

 

6º Creación de menús y sonorización:

 

7º Por último realicé una versión tanto para Windows como para Mac que se puede disfrutar con el teclado o con el mando de Xbox 360.

 

 

Práctica Diseño de Nivel

 

Nivel Super Mario Bros.

En esta práctica utilizando como referencia el videojuego de Super Mario Bros. realicé un diseño de un nivel con algunos de los componentes y mecánicas del juego original.

Thumbnails

 

Antes de decantarme por la temática del nivel (Superficie, acuático, aubterráneo...) y sin saber muy bien cuantas mecánicas sería capaz de implementar realicé algunos conceptos muy generales del nivel: Escaleras con saltos, zonas de doble camino, plataformas aéreas...

Retícula de Construcción y Trayectoria del Jugador

 

Después de decantarme por la temática subterránea dibujé en una hoja cuadriculada los diferentes sectores del nivel y las posibles trayectorias del jugador dentro de cada uno.

 Sectores

Cómo se puede ver en la imagen anterior marqué con flechas las posibles trayectorias del jugador dentro del nivel y dividí el nivel en 5 sectores de diferente tamaño y dificultad progresiva. Todo el nivel está basado en las 4 mecánicas que fui capaz de implementar: Movimiento y salto, aplastar enemigo Goomba y perder vidas.

En el sector A tenemos un inicio sencillo con 3 saltos cortos seguido de 3 enemigos intercalados por saltos medios y largos (sector B). Aumentando la dificultad el sector C tiene 5 saltos consecutivos, donde si fallas uno caerías al vacío. El sector D es el más largo del nivel con un inicio sencillo con dos saltos y un enemigo, una zona intermedia con dos posibles caminos y un salto final complejo donde tenemos que saltar lo justo para no caer. Por último tenemos la zona final con un pequeño reto de escaleras quebradas.

*El tamaño de algunos saltos y número de enemigos representados en la hoja de construcción fueron modificados en la versión final.
 

 Proceso de Construcción del Videojuego

El diseño del nivel y sprites los realicé con Photoshop y Tiled. El resto del videojuego fue hecho con Unity 2D. Mediante imágenes enumeraré los diferentes pasos seguidos para realizar el juego:

1. Programación de mecánicas (Visual Studio 2017).

Fue el proceso más largo y está dividido en varios scripts que controlan a Mario, los enemigos, la cámara, las vidas y los cambios entre escenas. La programación duró durante todo el proceso de desarrollo. Realicé una escena prototipo para probar mecánicas antes de implementar el nivel final.

2. Creación del nivel en Tiled.

Con Tiled apoyado de una hoja de sprites, previamente realizada con Phosothsop, cree el nivel junto a todos sus zonas de colisión.

3. Implementación del nivel en Unity 2D.

Una vez tube todo diseñado fui insertando en Unity cada una de las partes del nivel, animaciones del jugador, controles del jugador, enemigos y sonidos; exactemente por ese orden. Cada cosa que iba añadiendo fui programando su correspondiente script para que funcionara correctamente.

Práctica Diseño de Personaje

 

Impy

Concepto:

La idea original era la de un personaje rechoncho, glotón y adorable. Tenía claro que iba a ser un animal, pero no de qué tipo. Pensé en dos opciones: O hacer un oso del estilo de Winnie de Pooh o un dinosaurio similar a los protagonistas del juego de recreativas, Bubble Bobble.

Referencias:

Al final me decanté por la opción del dinosaurio. Este tipo de animal se asocia con algo grande y peligroso por lo que busqué una forma de transformar sus rasgos en aquellas características que yo buscaba. Tenía que tener unos rasgos simples y claramente reconocibles: 

Ojos grandes y redondos: Buscaba un animal amable y simpático.

Trazos gruesos e irregulares: Buscaba un estilo de dibujo animado.

Extremidades cortas: Tenía que dar la sensación de ser como un niño.

Boca ancha: Apetito insaciable.

Dino, la mascota de la serie de dibujos "Los Picapiedra" (referencia de la derecha), está muy cerca del perfil que buscaba, pero con un diferencia fundamental: Quería que mi personaje tuviera un toque de maldad o fiereza. Adorable, pero que en determindas situaciones parezca terrible, siempre sin perder su encanto. Fue en este punto donde definí uno de sus rasgos más fundamentales: Travieso.

Thumbnails:

Con esa idea en mente empecé a dibujar dinosaurios con esos rasgos: Extremidades cortas, ojos grandes y boca ancha. En estas pruebas fue cuando me di cuenta de que para darle ese toque de travesura ponerle garras y dientes funcionaba bastante bien.

Moodboard - Colores:

Recogí referencias de los colores más típicos para dinosaurios tipo dibujo animado que me apoyarán en mi creación del boceto.

Boceto:

La creación del boceto fue relativamente sencilla gracias a todas las referencias y rasgos definidos anteriormente. Mientras estaba dibujándolo me di cuenta de que afilando más sus garras y dientes conseguiría mejorar ese toque travieso que quería darle. Como dato interesante decir que el nombre Impy tiene como origen la palabra "Imp", que en inglés significa diablillo.

Construcción del Personaje:

Al ser un personaje bastante simple, con rasgos muy definidos, su diseño final es prácticamente un calco del boceto, el cual utilicé como plantilla para pasarlo a formato digital. Todo el proceso lo hice con Photoshop y una tableta gráfica.

Utilizando la vista lateral del boceto como base, hice un serie de líneas y círculos que me marcaron el perfil del personaje y poco a poco fui añadiendo el resto de elementos. Dibujé algunos detalles a posteriori como son el trazo de la barriga y los lunares de la espalda.

Estudio de Color:

Realicé un estudio de color con combinaciones muy dispares para ver cual podría quedar mejor. Aparte de las mostradas en la imagen utilicé otros colores más típicos como el verde o el marrón. El personaje final tiene los colores oscuros de la referencia de la derecha con las escamas anaranjadas de la del centro.

Colores RGB:

Esta es la paleta de colores final del personaje, incluyendo también, el blanco para los dientes y el negro para los lunares de la espalda.


Hoja de Giro:

Después realicé una hoja de giro de 3 poses además de la vista 3/4 mostrada anteriormente. Aquí se pueden apreciar más rasgos del personaje: 9 dientes superiores, dos filas de escamas en la espalda y dos garras en cada pie.


Tamaño:

La altura real del personaje es la mitad de la estatura de un humano adulto medio.


Hoja de Acciones:

Lo dibujé realizando una serie de acciones para destacar su personalidad y también pensando en el próximo videojuego con él de protagonista.

En la vista frontal con la boca abierta se puede apreciar un fila inferior de 8 dientes retráctiles.


Vista in Game:

Debido a que el videojuego que haré será en estética Pixel Art, adapté el aspecto visual del personaje para dicho juego. Cree la animación de cada acción vista anteriormente: Parado, corriendo y durmiendo. 

Todo esto lo hice con las herramientas de animación de Photoshop.

Impy, el Dinosaurio Travieso

 

 

Otro dato curioso sobre el personaje es que al no decantarme por las escamas grises o naranjas cree una historia entorno a esa diferencia reflejada en la Biblia del Personaje:

(...)nació diferente al resto de su especie pues sus escamas son de un color anaranjado (...) lo que hizo que fuera abandonado por el resto de su grupo debido a su falta de “sigilo”

 

Proyecto Robot

El objetivo de este proyecto es realizar un animación sencilla con un robot de protagonista, el cual debe ser de elaboración propia.

Para ello busqué varias referencias de otros alumnos y de animaciones con robots. Una vez tuve claro el diseño del robot lo dibujé en un papel:

 

Para el modelarlo utilicé Cinema 4D y lo hice en varias partes: Por un lado modelé una pata y por el otro el cuerpo. Duplique la pata 3 veces más y las uní al cuerpo. Por último le añadí detalles y una textura básica de colores sólidos.

Después le hice el rig con el mismo programa dando como resultado un total de 11 controladores: Uno para el robot entero, otro para el cuerpo, otro para el ojo y dos para cada pata (para girar los pies y para estirar/contraer las patas).

Para la animación me basé en varios vídeos de referencia sobre la forma de caminar de insectos y robots cuadrúpedos:

Con Cinema 4D hice el texturizado, añadí luces y sombras, desenfoque de movimiento y una imagen de fondo. La finalidad era conseguir integrarlo en un fondo real.

Con After Effects añadí efectos de desenfoque y unas letras de presentación. Por último, con Premiere, sonoricé el vídeo.

Este es el resultado:

ARACNOBOT