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”