Edu Segovia - ARTES

Videojuegos - Diseño - Sonido

008
Cómo lo hice
‘Where’s the Paradise?’ Ep. 2

Regreso a Posts
Videogames

Aquí explico origen y diseño de este bonito y loco proyecto ¡desde el episodio 2!

‘Cómo lo hice’ es la serie del blog dedicada a mostrar los procesos de creación

[DISEÑO · ARTE · DESARROLLO · PRODUCCIÓN]

Visita mis videojuegos para conocer todos mis proyectos


(Este post es una ampliación de la ficha descriptiva de Where’s the Paradise? Ep. 2 ‘El misterio de las cintas perdidas y la pota misteriosa’)

Debido al interés de algunos colegas por colaborar conjuntamente en una historia, me puse a trabajar en algo fresco y atractivo, más ajustado a nuestras preferencias de jugadores de aventuras gráficas clásicas (aventura, puzzles y sarcasmo), y que estaría ambientada en tiempos modernos.

La historia se divide en 3 episodios, relacionados pero independientes, y está enfocada en grupo de chavales inmaduros que se enfrenta a la novelesca, y nada usual, situación de toparse con el paraíso en medio de su cotidianeidad y de sus sueños adolescentes. Los temas de fondo son el crecimiento juvenil y la resolución de un extraño misterio.

El juego sería un “point & click” de 2 acciones con la opción de controlar a más de un personaje, de estética 2D pixel-art. Debería incluir diálogos e inventario. El motor: AGS. El desarrollo comenzaría por el episodio 2 (MCPPM).

Trabajar en este proyecto me sirvió, fundamentalmente, para entrenar en el trabajo de diseño y documentación del juego durante el estado de pre-producción.

 

Considero que existen unas definiciones básicas para comenzar a crear la estructura de un juego: la esencia de la trama, el espacio y el momento en que se desarrolla, y los personajes que aparecen con sus historias. Para encarar el proyecto con calidad en calidad en la forma de trabajar es recomendable ordenar todo desde el inicio, sobre el papel.

Los primeros pasos se centraron en definir a grosso modo estas cuestiones para poder elaborar un guión inicial sobre el que basar el trabajo. Definí los momentos clave de la trama, las conexiones e incohrencias entre ellos y sus detalles particulares (mapas, objetos, eventos, etc…).

Esquemas y Preguntas y Respuestas pertenecientes al Brainstorming

Este guión entra en los detalles de las historias de los personajes (de dónde vienen, cuál es su situación actual, cómo se van relacionando entre ellos…) y explica las razones por las cuales suceden las cosas.

Breve ejemplo del guión subdividido en secuencias detalladas y concretas

Pasé del esquema en papel a los diagramas digitales planteando asuntos como las escenas, los objetivos, las relaciones entre los personajes…

Escenas y Objetivos del juego [Office – yEd – XMind]

Relaciones entre personajes y sus historias personales [XMind]

También dediqué un tiempo a definir los mapas en los que se sucederían las escenas. Crear un mapa de escenarios conectados y vinculados a una historia aún parcialmente indefinida no fue tarea simple, pero éste fue el resultado:

Escenarios con sub-escenarios (mapas). Versión de texto y versión codificada (para ser llamados por código) [Office]

Diagramas del Mapa completo de escenarios. Versiones comprimida y expandida [XMind]

Diagramas del Mapa completo de escenarios. Versiones alternativas con más detalles [yEd]

 

Una vez que la estructura principal estaba definida, era hora de hacer una aproximación al arte del videojuego.

Comencé haciendo bocetos a mano de los personajes, de manera que pudiese agregar algo de identidad al proyecto. Aquí presento algunas imágenes:

mcppm00
mcppm01
mcppm03
mcppm02
mcppm04
mcppm05
mcppm06
mcppm07
mcppm08
mcppm09
mcppm10
mcppm11
mcppm12
mcppm13
mcppm14
mcppm15
mcppm16
mcppm17
mcppm18
mcppm19
mcppm20
mcppm21
mcppm22
mcppm23
mcppm24
previous arrow
next arrow
mcppm00
mcppm01
mcppm03
mcppm02
mcppm04
mcppm05
mcppm06
mcppm07
mcppm08
mcppm09
mcppm10
mcppm11
mcppm12
mcppm13
mcppm14
mcppm15
mcppm16
mcppm17
mcppm18
mcppm19
mcppm20
mcppm21
mcppm22
mcppm23
mcppm24
previous arrow
next arrow

Bocetos de personajes

Después realicé una prueba de transformación de uno de los personajes a pixel-art, y creé un ciclo de animación:

Transformación de 1 personaje. Fotogramas de ciclo de animación y animación de movimiento lateral [Photoshop – PixelEdit]

A continuación, inicié la labor de plasmar la idea de los escenarios, que después serían dibujados digitalmente. El entorno está parcialmente basado en localizaciones reales, por lo que abordé esta tarea mediante 2 métodos complementarios: por un lado, utilicé imágenes satelitales y de Internet para obtener vistas aéreas y fotografías de referencia; por otro, realicé el “scouting” de las zonas, sacando mis propias fotografías de los detalles que me interesaban. Combiné esta información recopilada con “bocetos de memoria” y con mis propias ideas para crear las primeras imágenes de los escenarios, buscando encuadres y estética (en esos mismos dibujos se desarrollarían las tramas ya definidas en el guión):

mcppmMaps01
mcppmMaps02
mcppmMaps03
mcppmMaps04
mcppmMaps05
mcppmMaps06
mcppmMaps07
mcppmMaps08
mcppmMaps09
mcppmMaps10
mcppmMaps11
mcppmMaps12
mcppmMaps13
mcppmMaps14
mcppmMaps15
mcppmMaps16
mcppmMaps17
mcppmMaps18
mcppmMaps19
mcppmMaps20
mcppmMaps21
mcppmMaps22
mcppmMaps23
mcppmMaps24
mcppmMaps25
mcppmMaps26
mcppmMaps27
mcppmMaps28
mcppmMaps29
mcppmMaps30
mcppmMaps31
mcppmMaps32
previous arrow
next arrow
mcppmMaps01
mcppmMaps02
mcppmMaps03
mcppmMaps04
mcppmMaps05
mcppmMaps06
mcppmMaps07
mcppmMaps08
mcppmMaps09
mcppmMaps10
mcppmMaps11
mcppmMaps12
mcppmMaps13
mcppmMaps14
mcppmMaps15
mcppmMaps16
mcppmMaps17
mcppmMaps18
mcppmMaps19
mcppmMaps20
mcppmMaps21
mcppmMaps22
mcppmMaps23
mcppmMaps24
mcppmMaps25
mcppmMaps26
mcppmMaps27
mcppmMaps28
mcppmMaps29
mcppmMaps30
mcppmMaps31
mcppmMaps32
previous arrow
next arrow

Bocetos en papel y bocetos digitales de algunos escenarios [Photoshop]

En el momento de hacer una prueba de implementación hay ciertas limitaciones importantes a considerar. Principalmente, es el hecho de que los personajes se moverán sólo por zonas específicas, dibujadas a mano sobre el mapa o fondo (walkable area). Lo mismo sucede con las zonas en las que los personajes estarán enmascarados por el mapa o fondo, como pasar por detrás de un árbol (walkbehind area). La limitación reside en que, si el mapa no es el definitivo, es posible que haya que redibujar estas zonas una y otra vez, cada vez que se altere el mapa (por ejemplo, al agregar una puerta o una farola, o al modificar el suelo de la escena). Lo más razonable, sobre todo si se trata de muchos mapas, es no dibujarlas hasta disponer de los fondos con las áreas definitivas definidas (aunque sean bocetos inacabados aún).

Dado que aún no disponía de estas imágenes, pero quería hacer pruebas de implementación en AGS, decidí utilizar las fotografías en las se basarían los dibujos finales de los mapas, e incluir algún dibujo si ya lo tuviese encaminado. Podría empezar a programar y más tarde me podría dedicar a mejorar el arte, pero ya teniendo algunas funcionalidades en marcha. También decidí utilizar al personaje por defecto de AGS (Roger).

Prueba de implementación: Recorrido por los mapas [AGS]

Prueba de implementación: Hotspots, Objetos, Diálogos [AGS]

 

Paralelamente, fuimos conversando con los compañeros sobre la precuela de este episodio (el que sería el episodio 1), y haciendo algunos avances sobre la trama.

Personalmente, pensé en cómo podría crear un nivel que enriqueciese la jugabilidad dentro del género “aventura gráfica”, explorando ideas para favorecer a la experiencia del jugador. El nivel sería un bucle, cuyos puzzles serían la “llave de salida”. Otra vez sobre el papel, planteé el diseño de un nivel en el que resolver 4 ó 5 puzzles para poder avanzar, y que introdujese al jugador en la historia personal de uno de los personajes protagonistas.

También hice algunos bocetos de los momentos clave y los escenarios:

charca01
charca02
charca03
charca04
charca05
charca06
charca07
charca08
charca09
charca10
charca11
charca12
previous arrow
next arrow
charca01
charca02
charca03
charca04
charca05
charca06
charca07
charca08
charca09
charca10
charca11
charca12
previous arrow
next arrow

Bocetos en papel de algunas escenas y escenarios

Para finalizar, aunque es un trabajo continuo durante todo el desarrollo, debo mencionar el ejercicio de documentación. Reuní toda la información que se fue generando en un documento de diseño organizado, maquetado e indexado del que poder disponer durante el desarrollo del juego para consultar las definiciones del proyecto, o cualquier información relevante, y que seguiría actualizándose.

Adjunto a este documento, fui creando otros para tener reporte de revisiones, cambios, incoherencias, errores… que iba registrando mientras trabajaba.

Ejemplos de documentos de trabajo generados para el desarrollo del juego

Leave a Reply

Your email address will not be published. Required fields are marked *