videojuego
(Para ver mi perfil técnico e intereses, consulta Incursión en los videojuegos.)
Explora los proyectos de videojuego en los que he trabajado en mi formación y personalmente.
Pincha en Detalles para ver el proceso de desarrollo de cada uno.
Nota: Algunas imágenes a continuación se presentan en menor resolución para proteger los proyectos.
(Utiliza las miniaturas para saltar a cada proyecto. Regresa a las miniaturas con el icono de grilla amarillo, abajo-derecha)
2WAYBACKDOOR
(Prueba de implementación en AGS)
Características desarrolladas:
- Guión literario
- Bocetos (manuales y digitales)
- Animación 2D
- Nivel (Creacion dentro del motor)
- Movimiento del personaje
| Género | Aventura gráfica: Point&Click |
| Público | +12 |
| Estilo visual | 2D Pixel |
| Características | Diálogo, Inventario, Objetos, Puzzles, Desplazamiento, Point&Click / Teclado |
| Motor | AGS |
| Estado | Preproducción / Prueba de Implementación |
Necesitaba hacer una primera internación en el terreno técnico de la implementación y la programación, pues no tenía los conocimientos necesarios para encarar un proyecto por mi cuenta. Después de indagar en las opciones de motor al alcance, y teniendo en cuenta las referencias de otros videojuegos, decidí que utilizaría AGS (Adventure Game Studio) para iniciar unas pruebas del proyecto en estilo pixel-art. Según los resultados de mis búsquedas y la presencia de una comunidad activa, sería una opción con la que comenzar a hacer unas pruebas.
Escribí unas cuantas páginas de un primer guión. En ellas se narraba, casi a modo de secuencia cinematográfica, el inicio de una trama con la que comenzaría el videojuego: 2 personajes están destinados a encontrarse para destapar una historia de acción, real pero desconocida, cuyo telón de fondo es tejido por grupos de poder, tecnologías y el propio destino de las personas.
Guión (Introducción de la historia)
Hice algunos bocetos en papel y varias pruebas de dibujos y animaciones pixel-art para acompañar al texto.
Bocetos y esbozo digital de uno de ellos [Photoshop]
Boceto de escena y versión digital del cartel que figuraría en ella (con animación) [Photoshop]
Animación 2D de personaje e implementación [PixelEdit – Photoshop – AGS]
También hice algunas pruebas de implementación de un personaje en AGS (walkable areas, walkbehind areas, mouse cursor, actions inventory). Estaba satisfecho con estas primeras pruebas que me servirían posteriormente, de modo que dejé en el cajón esta primera idea para continuarla en otro momento. Como prueba inicial del motor AGS y como medida de mis habilidades, fue una experiencia breve y válida.
El valor añadido de este trabajo es el hecho de que lo hice con mi hija de 10 años.
WHERE’S THE PARADISE?
(Este proyecto se encuentra aún en estado de desarrollo)
Características desarrolladas:
- Documento de diseño de juego
- Guión literario (2 episodios)
- Descripción de personajes
- Diálogo
- Storyboard
- Diagramas (trama, objetivos, niveles, personajes)
- Bocetos (personajes, 25 / entornos, 40)
- Animación 2D
- Nivel (creación dentro del motor, 13)
- Movimiento en/entre niveles
- Programación(niveles, hotspots, objetos, diálogo)
| Género | Aventura gráfica: Point&Click |
| Público | +16 |
| Estilo visual | 2D Pixel |
| Características | Diálogo, Inventario, Objetos, Puzzles, Desplazamiento, Point&Click / Teclado |
| Motor | AGS |
| Carga productiva | 3 episodios / +60 pantallas / +20 personajes |
| Estado | Preproducción / Prueba de Implementación |
| Tiempo de desarrollo | 4 meses |
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:
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):
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:
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
WELCOME TO MYST MOUNTAIN
(Este proyecto se encuentra aún en estado de desarrollo)
Características desarrolladas:
- Guión técnico (jugabilidad, textos)
- Diagramas (trama, objetivos, niveles)
- Bocetos (entornos, interfaz)
- Recursos (gestión assets)
- Niveles (creación dentro del motor, 5)
- UI/UX (menús, HUD)
Programación Blueprints:
- Objetos
- Triggers
- UI
- Niveles
- Game Instance
- Temporizador
- Linterna
- Inventario
- Radio
- Reiniciar nivel
- Expresión del personaje
- Mensajes narrativos
- Mensajes del jugador
- Puzzle Laberinto
- Puzzle Items
- Puzzle Físicas
- Puzzle Conducción
- Sonido y Música de fondo
- Efectos de cámara
- Nadar y bucear
| Género | Aventura gráfica: Point&Click, 3ª persona, Conducción, Primera persona |
| Público | Todos |
| Estilo visual | 3D estilizado |
| Características | Contrareloj, Objetos, Inventario, Puzzles, Exploración, Conducción, Desplazamiento, Point&Click / Teclado |
| Motor | Unreal Engine 4.27 |
| Carga productiva | 5 niveles / 4 personajes |
| Estado | Demo |
| Tiempo de desarrollo | 2 semanas |
El momento de Unreal Engine había llegado. De hecho, el momento de EMPEZAR.
Como proyecto final del primer curso que hice de Creación de videojuegos con Unreal Engine, nació “Welcome to Myst Mountain“.
Objetivo alcanzado:
- Mi idea en esta primera incursión era aprender, y aprendí mucho más que lo básico. Con este proyecto hice una primera toma de contacto con Unreal Engine y aprendí lo esencial en la creación de un videojuego con este motor y a moverme dentro de ese entorno.
- Aunque faltaban algunas configuraciones para obtener un producto cerrado y entregable, el juego podía probarse de principio a fin con sus funcionalidades.
- Como reto personal, me propuse hacer varios niveles en los que reinase un modo de juego diferente: point and click, conducción, tercera persona y primera persona. De este modo, me permitiría echar un vistazo a las generalidades de cada uno de ellos, y enfrentarme al Game Mode.
Algunas notas:
- el tiempo de desarrollo fue muy escaso: apenas 2 semanas, de un curso de 6 semanas de duración).
- el curso estaba más orientado a la modalidad FPS (shooter en primera persona)
- utilicé la versión 4.27 de Unreal Engine (estaban lanzando la versión 5). Recientemente, migré el proyecto a la versión 5, y algunas cosas dejaron de funcionar. [la carga en la web de medios actualizados queda pendiente por el momento]
Historia: La historia trata de un desarrollador de videojuegos que recibe una extraña misión la noche anterior a una importante entrevista de trabajo, mientras prepara su portfolio para la misma. Lo que no sabe es que la misión “encargada” esconde una importante sorpresa. Por otro lado, la trama se apoya en una antigua leyenda sobre unos famosos diskettes perdidos…
Guión técnico:
Guión técnico de las escenas que corresponden a cada nivel
Detalles y notas sobre configuraciones a ser implementadas
Hice varios planteamientos iniciales en el cuaderno antes de cerrar el concepto y concreté lo mínimo necesario para tener definidas las escenas o niveles.
Transcribí esta información en formato digital, ahondando en los detalles y definiendo la nomenclatura que utilizaría.
Los campos de este cuadro me permitirían localizar los detalles importantes de cada escena:
- Modo de juego
- Checkpoint
- Escenario
- Movilidad
- Hotspots
- Inventario
- Interacción/Acción
- Animación/Estados
- Sonido
- HUD
Tabla definitiva del guión técnico
Mensajes del HUD: Por otro lado, al existir un importante componente de narrativa y aventura, dediqué un tiempo a pensar y ordenar todos los mensajes de texto que irían guiando la trama y serían presentados en el HUD
Los mensajes de texto fueron ordenados considerando las siguientes categorías:
- Hotspots (nombre, descripción, acción, sólo 1 vez)
- Items de Inventario (nombre, descripción, acción, destinos válidos, actualización , sólo 1 vez)
- SMS (mensajes recibidos)
- Personaje (expresiones, sólo 1 vez)
- Jugador (mensajes de juego)
Todos los mensajes de texto se ordenaban por escenas y por orden de aparición, y estaban vinculados entre las categorías. Posteriormente, a la hora de la implementación, todos los mensajes fueron almacenados en variables de tipo string (array) para ser llamados en el momento oportuno.
Tabla con todos los textos que aparecen en el juego
La producción: Debido al escaso tiempo de desarrollo, utilicé los recursos (herramientas y funcionalidades) propios del motor Unreal Engine, así como packs y objetos 3D de Internet de uso libre, que referencié debidamente en la pantalla de créditos.
Pantallas de Créditos
Para ciertos entornos utilicé herramientas como Landscape, spline-road o Folliage.
Entornos
En otros, simplemente, coloqué los objetos y configuré las cámaras, luces y texturas.
El juego se compone de 5 niveles, uno de los cuales se visitaría en 2 momentos y situaciones diferentes. Aquí se ven algunos ejemplos:
Algunas capturas de los niveles
Adjunto también algunos ejemplos de los menús funcionales o información presentada al jugador:
Pantallas de Menú y Controles
Por último, resumo las características implementadas mediante código en los blueprints:
| Características de juego | descripición |
|---|---|
| Timer | Cuenta regresiva de tiempo reflejada en el HUD que lleva al Game Over al llegar a 0. Valor almacenado en Game Instance |
| Linterna | Luz vinculada al personaje y controlada mediante la orientación del mismo |
| Inventario | Relación de objetos recogidos por el jugador necesaria para el desarrollo de los puzzles (sistema no visual). Valores almacenados en Game Instance |
| Radio | Tracklist de canciones controlables por el jugador en la modalidad de Conducción |
| Reiniciar nivel | Input mediante tecla de Reinicio del nivel en la modalidad de Conducción cuando el vehículo queda atascado |
| Menú | Sistema de pantallas de Menú de Inicio, Pausa, Game Over para acceder a los puntos de inicio o final del juego, o detener el juego en curso |
| Puzzle Laberinto | Puzzle basado en la búsqueda de una única salida dentro de un entorno cerrado y del que se pueden utilizar pistas para salir del mismo |
| Puzzle Items | Puzzle basado en la necesidad de conseguir cierto número de items relacionados con la trama para poder avanzar en el nivel. Valores almacenados en Game Instance |
| Puzzle Físicas | Puzzle basado en la interacción del personaje con el entorno y los objetos (movimiento, salto, desplazamiento, …) |
| Puzzle Conducción | Puzzle basado en la conducción de un vehículo (dirección, acelerador, freno, freno de mano) desde un origen hasta un destino por un recorrido de diferentes dificutades |
| Hotspots | Sistema de obtención, y presentación en el HUD, de información del entorno y los objetos mediante la interacción con el cursor del ratón o de un raytrace |
| Expresión del personaje | Sistema de presentación en el HUD de las opiniones y reacciones del personaje ante los sucesos o la exploración del entorno y del juego |
| Mensajes narrativos | Sistemas de presentación en el HUD de textos narrativos de los tipos “narrador” u “otro personaje” |
| Mensajes al jugador | Sistema de presentación en el HUD de textos informativos para el jugador acerca del juego |
| Modo Point and Click | Modo de juego basado en el movimiento y las acciones de un personaje en tercera persona, a cámara fija, controlados mediante el ratón |
| Modo Conducción | Modo de juego basado en el control de un vehículo, a cámara dinámica exterior, mediante el teclado |
| Modo Tercera persona | Modo de juego basado en el movimiento y las acciones de un personaje en tercera persona, a cámara dinámica, controlados mediante el ratón y el teclado |
| Modo Primera persona | Modo de juego basado en el desplazamiento y salto de un personaje en primera persona, controlados mediante el ratón y el teclado, con raytrace para interacción |
| Música y Sonido de fondo | Sistema de música con transiciones configurado para cada nivel. Sistema de sonidos de fondo con atenuación lanzados según la situación |
| Efectos de cámara | Efectos de movimiento de cámara en el Modo Conducción y efectos visuales dentro del agua |
| Nadar y bucear | Simulación de efecto acuático según la situación y configuración de controles acordes a la misma |
| Game Instance | Sistema de guardado y lectura de datos entre niveles para la continuidad de ciertas características del juego |
GRAFFO-WAR
(Este proyecto se encuentra aún en estado de desarrollo)
Características desarrolladas:
- Guión técnico (jugabilidad, textos)
- Diagramas (niveles, blueprints, desarrollo, objetos, animaciones, hotspots, eventos, acciones)
- Bocetos (entornos, interfaz)
- Recursos (gestión assets)
- Niveles (creación dentro del motor, 3)
- UI/UX (menús, HUD)
| Género | Aventura 3ª persona, Conducción |
| Público | Todos |
| Estilo visual | 3D realista |
| Características | Contrareloj, Objetos, Inventario, Puzzles, Exploración, Conducción, Movimiento |
| Motor | Unreal Engine 5.1 |
| Carga productiva | 3 niveles / 4 personajes |
| Estado | Demo |
| Tiempo de desarrollo | 4 semanas |
Programación Blueprints:
- Triggers de Eventos/Textos
- HUD
- Niveles
- Game Instance
- Temporizador
- Lanzar / Coger
- Explorar hotspots
- Interactuar
- Pintar graffiti
- Capacidad respiratoria
- Linterna / Minimapa
- Lugar de recarga
- Lugares seguros
- Lugares para graffiti
- Inventario
- Reiniciar vehículos
- Puzzle conducción
- Puzzle graffiti
- Puzzle Androide
- Puzzle bodega (2)
- Puzzle alarma
- Puzzle cartel
- Sonido y Música de fondo
- Blueprint animación y blendspace
- Comportamientos IA (routine, patrol, chase, attack, arrest)
- Expresión del personaje
- Mensajes narrativos
- Mensajes al jugador
“Graffo-War” es el resultado del proyecto final de mi segundo curso de formación en Unreal Engine.
Pantalla de Menú principal
El curso duró 12 semanas (aprox.), de las que 4 semanas (aprox.) se destinaron a la producción del proyecto final. Con tan poco tiempo, no estuvo de más adelantarse, a nivel personal, en la búsqueda de la idea y en el trabajo de pre-producción. Para nada.
Objetivo alcanzado:
- Dedicar un tiempo previo a realizar un trabajo de pre-producción consistente para definir en detalle los límites del proyecto, me permitió conocer en todo momento la relación tiempo-objetivos-producción.
- Uno de los primeros parámetros de trabajo que me establecí para la producción fue el de comenzar por las mecánicas, de modo que ubiqué al final del calendario las fases de arte y de creación de niveles, y me centré en la programación desde el primer momento.
- Aún con varios detalles que pulir, conseguí realizar un Build del proyecto en tiempo y forma.
- Adquirir mayor soltura con los blueprints y visual scripting estaba entre mis objetivos primordiales, lo cual alcancé con creces, entendiendo en mayor profundidad la lógica detrás de esta forma de programar, creando mis propias funciones y solucionando por mi cuenta todos los problemas que fueron surgiendo.
– Hmmm…!
Condiciones del proyecto (directrices a las que ajustarse, pautadas por el curso):
- Tipo de juego: Tercera persona (libre elección del personaje)
- Niveles: 2 niveles de mundo abierto (1.5 km² cada nivel) + 1 nivel cerrado con iluminación interior
- Coleccionables: Objetos que se recojan y que actualicen su contabilización en el HUD
- IA: NPCs con varios comportamientos, influidos por la presencia del Jugador, y al que puedan perjudicar
- Ataque: Jugador debe disponer de un sistema de ataque
- Checkpoint: Se cargará la última partida si se alcanza Game Over
- Puzzles: 4 puzzles (pulsadores, baldosas, combinación…) – 2 puzzles por nivel
- Splash-Screen: Animación, video o imagen antes del menú del juego
- Menú: Comenzar partida, Salvar/Cargar partida, Opciones, Salir
La historia
La protagonista de esta historia debe realizar un graffiti y subirlo a Internet. Es parte de una reivindicación social dentro del urgente, aunque desigual, debate tecnológico de la actualidad. Transversalmente, se cruzan la trama y el pasado del histórico lugar al que ella acude.
Pre-Producción – Idea
Como es habitual, comencé a moldear la historia mediante una lluvia de ideas y algunos bocetos, aunque algunas limitaciones personales (independientes de las pautas del curso) me ayudaron a acotar el ámbito de búsqueda:
- Quería que fuese una aventura
- Quería basar la historia en un emplazamiento real en el que venía pensando
- No quería armas sangrientas, ni violencia
- Quería conseguir un ambiente solitario, nocturno y con niebla
- Quería una historia que mezclase tecnología de tiempos modernos con historia de siglos pasados
- Quería introducir la importancia de la expresión artística
Primera idea lúcida de lo que podría ser el juego
Algunas ideas que tenía en el bolsillo
Pre-Producción – Investigación
Realicé un pequeño trabajo de investigación de la estética que estaba buscando, tanto en Internet (videojuegos, películas, …), como haciendo mi reportaje fotográfico del lugar en días y noches de niebla. También conversé con gente del lugar y leí algunas historias que pudiesen ayudarme a conducir la trama en algún aspecto.
Libro de anécdotas históricas sobre el lugar en el que se inspira el juego [Alfonso S.M.]
Notas más relevantes de orientación de la producción
Detalles de la estructura del juego y del nivel principal
Pre-Producción – Documentación
Unifiqué toda la información en un documento de diseño en el que definía aquello que aparecería o sucedería en el juego, además de referencias al estilo de entornos o personajes.
Una versión del Documento de Diseño
Traduje las ideas iniciales a algo más detallado y ordenado mediante diagramación digital, profundizando todo lo posible en las definiciones a las que me limitaría durante la producción, y evidenciando las dependencias entre ellas, de manera que pudiese evaluar la repercusión de los recortes que fuesen necesarios por falta de tiempo.
desarrollo
objetos
hotspots
eventos
actionsNPC
blueprints
animation
actionsPlayer
Diagramas de Diseño: DESARROLLO – OBJETOS – EVENTOS – HOTSPOTS – BLUEPRINTS – ACTIONS – ANIMATION [yEd]
También pensé en los textos que debían aparecer en pantalla en cada situación del juego, y los organicé por categorías en un cuadro (mensajes de juego, de nivel, del personaje y de los NPCs).
Versión temprana de la Tabla de textos HUD
Un calendario reunía las tareas de desarrollo. De este modo, pude hacer un cálculo de la viabilidad del proyecto. El calendario contiene categorías cruzadas de ACCIÓN y PRODUCTO:
- ACCIÓN:
- DOCUMENTACIÓN
- PRODUCCIÓN
- DISEÑO
- UX
- PROGRAMACIÓN
- MODELADO
- TEXTURIZADO
- ANIMACIÓN
- ILUMINACIÓN
- AUDIO
- PRODUCTO
- DOCUMENTO
- PROYECTO
- NIVEL
- OBJETO
- PERSONAJE
- UI
- SONIDO
Calendario de categorías cruzadas
Las tareas se actualizaban a diario, de acuerdo a su nivel de avance. El calendario permite realizar balance de cargas cuando algunas tareas tienen un desfase, con respecto a los tiempos previstos.
De acuerdo a la carga de trabajo prevista, se hicieron algunos recortes y cambios en la trama y en las bases del juego, que podrían ser abordados en iteraciones posteriores.
Producción – Programación – Personajes
Comencé a trabajar en blockout las funcionalidades que tendrían los personajes.
En Graffo-War existen 2 personajes principales, controlados por el jugador, y 2 NPCs.
POLICÍA
NPC 2
Asset/Programación de Unreal Engine 5
Personaje principal: PLAYER/PLAYERcar
| Característica | descripición |
|---|---|
| Movimiento | Andar, Correr, Sprintar, Agacharse, Saltar con cámara dinámica en tercera persona (WSAD – LShift – LCtrl – LAlt – Spacebar) |
| Mensajes | Mensajes posicionados en el HUD para cada circunstancia |
| Pintar | Pintar graffiti (LMB). Selección de color (1, 2, 3) |
| Ataque | Lanzar nueces (LMB). Apuntar con cambio a cámara cercana (RMB) |
| Alternar modos | Cambio de modo Pintar/Atacar (Mouse Wheel) |
| Examinar | Obtener información de zonas/objetos del entorno (hotspots) mediante puntero (MMB) |
| Cámara | Alternar entre cámaras cercana y lejana (C) |
| Interactuar | Activar eventos en puzzles (I) |
| Smartphone | Encender/Apagar Smartphone con linterna, GPS y consumo de batería (F). Cuando la batería es 0, el Smartphone se apaga y no se puede utilizar. El Smartphone se utiliza al final del juego para realizar una fotografía. |
| Pulmones | Cuando PLAYER se desplaza en modo Sprint, comienza a consumir la capacidad respiratoria, lo que disminuirá la velocidad a partir de ciertos límites. Se repondrá automáticamente con el tiempo. |
| Vehículo (PLAYERcar) | Acelerar, Frenar, Girar (WSAD/Up-Down-Left-Right) Freno de mano (Spacebar) Luces (L) |
Parte del código del PLAYER:
bp_CharPLAYER
Parte del código del PLAYERcar:
bp_CharPLAYERcar
Algunos comportamientos del PLAYER
Personaje NPC1: ANDROIDE (inteligencia artificial)
| Característica | descripición |
|---|---|
| Movimiento | Correr |
| Mensajes | Mensajes posicionados encima de sí mismo para cada circunstancia |
| Pintar | Pintar graffiti al pasar por zonas “pintables” |
| Ataque | Lanzar nueces al personaje PLAYER |
| Modo “pintada” | Recorrido aleatorio por un mapa en el que se puede pintar |
| Modo “alerta” | Detiene un tiempo su rutina en ciertas condiciones |
| Modo “evasión” | Movimiento evasivo en ciertas condiciones |
| Modo “ataque” | Ataque al personaje PLAYER en determinadas condiciones |
Parte del código del NPC “ANDROIDE”:
bp_CharNPCandroid
Algunos comportamientos del NPC ANDROIDE
Personaje NPC2: POLICE (inteligencia artificial)
Nota: De este personaje se hicieron varias versiones para obtener NPC’s con diferentes roles en el juego y comportamientos frente al jugador.
| Característica | descripición |
|---|---|
| Movimiento | Conducción libre y por caminos definidos |
| Mensajes | Mensajes posicionados encima de sí mismo para cada circunstancia |
| Modo “patrulla” | Recorrido predefinido pero inteligente por un mapa haciendo patrulla. “Recuerda” si ya vió al PLAYER antes. |
| Modo “persecución” | Recorrido libre, a mayor velocidad, en persecución del PLAYER |
| Modo “cacheo” | Detener al PLAYER, revisar lo que lleva y proceder acorde a ello |
| Modo “arresto” | Lanzar el Game Over en ciertas condiciones |
| Modo “reinicio” | Auto reinicio de la posición y de la velocidad del coche para evitar quedar atascado en su movimiento |
Parte del código del NPC “POLICE”:
bp_CharNPCpolice
Algunos comportamientos del NPC POLICÍA
Producción – Programación – Eventos
EVENTOS: Estas son algunas características que le dan juego y vida al entorno:
| Característica | descripición |
|---|---|
| Recarga de batería | Zona de carga automática de la batería del Smartphone mientras PLAYER permanezca en la zona. La interacción con esta zona es debidamente informada en el HUD, así como también son reflejados en tiempo real los cambios sobre el nivel de batería (porcentaje y 3 colores). |
| Lugar seguro | Zona segura en la que no es posible que PLAYER sea detectada por los NPC POLICÍA. La interacción con esta zona es debidamente informada en el HUD. |
| Pared para PLAYER | Zona en la que PLAYER podrá hacer el graffiti, y NPC ANDROIDE podrá “pisar la pintada”, y así repetidamente. La interacción con esta zona es debidamente informada en el HUD. |
| Paredes para ANDROIDE | Zonas en las que NPC ANDROIDE hará automáticamente su pintada, y en las que PLAYER deberá borrarla, y así repetidamente. |
| Pintadas | PLAYER deberá borrar con 1 color específico todas las pintadas de NPC ANDROIDE para poder pasar de nivel (esta información se gestiona desde Game Instance). PLAYER sólo podrá pintar el graffiti con 3 colores en el orden indicado, y eso permitirá avanzar hacia el final del juego. |
| Botes de spray | PLAYER deberá recoger latas de pintura de 3 colores diferentes de diferentes lugares de los mapas. PLAYER necesitará estas latas para realizar su graffiti y para borrar las pintadas de NPC ANDROIDE. PLAYER también podrá perder, en diferentes circunstancias con NPC ANDROIDE o NPC POLICÍA, las latas que haya recogido. PLAYER puede/debe seleccionar la lata de pintura que utilizará en cada caso. La lata seleccionada y la cantidad de pintura restante se reflejarán en el HUD. Cada vez que se adquiere una lata nueva, se cambia al modo pintura y se selecciona la lata adquirida automáticamente. La información sobre las latas de pintura y los textos programados en relación a ellos, se muestran en el HUD en el evento que corresponde. |
| Nueces | PLAYER podrá recoger y lanzar nueces que le servirán para 2 propósitos fundamentales: quitarle a NPC ANDROIDE sus latas de pintura, e inhabilitar la cámara de seguridad de la puerta de la bodega. Las nueces que se lanzan se pueden recoger. La interacción con las nueces es debidamente informada en el HUD |
| Físicas | Ciertos elementos han sido configurados con físicas y gravedad para aportar realismo a ciertos eventos. |
Parte del código de las paredes para pintar:
bp_PAINTPOINT / bp_PAINTWALL
Partes de código de información en el HUD:
bp_Battery / bp_Spray
Algunos Eventos
Algunos Eventos del juego
Producción – Programación – Mensajes
MENSAJES: Existen diferentes mensajes que se muestran en el HUD, según el origen y la circunstancia:
| TIPO de mensaje | descripición |
|---|---|
| Mensaje de juego | Mensajes de introducción, progreso y finalización del juego, a modo de voz narrativa. Incluye títulos. Puede compartir funciones con el personaje virtual que acompaña al personaje PLAYER en todo momento. |
| Mensaje de nivel | Mensajes acerca de las características que existen o se activan en el juego, y con las que se puede interactuar. Ofrecen información al usuario sobre cómo proceder. |
| Mensaje de PLAYER | Mensajes en donde el personaje principal, PLAYER, expresa alguna opinión o aporta alguna información relevante sobre la situación, o de utilidad para los puzzles. |
| Mensaje de NPC ANDROIDE | Mensajes de expresión del NPC ANDROIDE cuando se le ataca con nueces. El texto se posiciona siempre sobre el emplazamiento del NPC ANDROIDE, aunque se mueva. |
| Mensaje de NPC POLICÍA | Mensajes de aviso y detención del NPC POLICÍA cuando intercepta al personaje PLAYER. El texto se posiciona siempre sobre el emplazamiento del NPC POLICÍA, aunque se mueva. |
| Mensaje de HOTSPOT | Mensaje de información acerca del objeto o lugar examinado. El texto se posiciona siempre sobre el emplazamiento del HOTSPOT. |
Para agilizar el trabajo de presentar tanta información en pantalla mediante mensajes de texto, diseñé y fui refinando un sistema de varias funciones. Hablo más sobre el tema en este post.
Ejemplo de código de mensajes de texto
Funciones de mensajes de texto
Producción – Programación – Puzzles
PUZZLES: Existen varios puzzles que superar durante el juego:
| puzzle | descripición |
|---|---|
| Puzzle del coche de policía | Puzzle de ingenio y de habilidad: Un vehículo de policía (NPC POLICÍA) bloquea el paso al nivel 2. Si la personaje PLAYER se acerca al lugar, es GameOver. Mientras tanto, otros coches de policía recorren el mapa. Si cualquier coche alcanza a la personaje PLAYER, es GameOver. La personaje PLAYER debe obligar al vehículo a abandonar el lugar y dejar el paso libre para pasar de nivel. |
| Puzzle de la alarma | Puzzle de ingenio: Una alarma se activará en varias circunstancias: al pasar frente a la puerta vigilada de la bodega y al errar en el código para abrir ésta. La alarma se puede desactivar con un interruptor yendo hasta ella, pero la personaje PLAYER puede “desactivar” la cámara de seguridad para evitar que la alarma se active cada vez que se acerque a la puerta de la bodega. |
| Puzzle del código de la puerta de la bodega | Puzzle de exploración y deducción: Una puerta con código numérico bloquea el paso al nivel 3. Gracias a las informaciones brindadas durante el juego, el jugador deberá deducir un número de 4 dígitos que le abrirá la puerta. Errar en el código activará la alarma. Para crear este puzzle, seguí la idea y los pasos de Ryan Laley. |
| Puzzle del póster de la protesta social | Puzzle de exploración y recolección: Un póster de una protesta social, vinculado a la historia del juego, está repartido en varios pedazos por uno de los mapas. Recolectarlos todos brindará algo más de información sobre la historia y ayudará en la resolución de puzzles. |
| Puzzle de vencer al NPC ANDROIDE | Puzzle de exploración y habilidad: El NPC ANDROIDE está pintando graffitis en varios puntos del mapa, y lo hace a toda velocidad. La personaje PLAYER debe borrar todas sus pintadas para detener su acción, acabar con él y hacer avanzar la historia hacia el siguiente nivel. Para ello, la personaje PLAYER debe encontrar la lata de spray adecuada, asegurarse de no perderla en los encuentros con el NPC ANDROIDE o el NPC POLICÍA, reponerla si se le agota, y revisar todos los puntos en los que el NPC ANDROIDE puede pintar, ya que éste no dudará en regresar a pintar de nuevo, aunque su pintada haya sido borrada alguna vez. |
| Puzzle del compartimento secreto de la bodega | Puzzle de tiempo y exploración: La personaje PLAYER no podrá abandonar la bodega hasta que ella no encuentre lo que fue a buscar, la lata de spray de color especial. Pero ésta está escondida en un compartimento secreto ubicado en la oscuridad, y al cual sólo podrá acceder durante un limitado período de tiempo, y siempre que active el mecanismo que se interpone en medio. |
| Puzzle final: Pintar y Enviar | Puzzle de tiempo y habilidad: La personaje PLAYER deberá realizar una pintada en un lugar específico, usando los colores en un orden determinado, sin ser interceptado por el NPC POLICÍA, ni interrumpido por el NPC ANDROIDE. Además, deberá hacer una fotografía del mismo cuando lo tenga finalizado, para poder concluir el juego. |
Ejemplo de código de algunos puzzles
Algunas capturas de los Puzzles
Producción – Programación – UI
UI: Tras varias iteraciones de diseño de la UI, decidí utilizar la función WidgetSwitcher para unificar todo lo referente a interacción entre niveles y a visualización de información en pantalla en un solo blueprint (inclusive las variables con los textos a mostrar en pantalla), y conmutar a la capa que me interesase en cada momento.
En el caso del HUD, al estar todo unificado y ubicado en un mismo lugar, los procedimientos y emplazamientos siempre son los mismos, y la solución resulta óptima.
Detalle de la UI: Pantallas de menu y HUD en un solo blueprint
Producción – Niveles
NIVELES: Existen 3 niveles y misiones que completar durante el juego:
| nivel | descripición |
|---|---|
| Misión 1: los caminos nocturnos | Es un nivel de conducción. El objetivo es llegar al destino indicado sin ser detectado, para lo que se dispone de un sistema GPS que sirva de orientación. El mapa está lleno de coches de policía patrullando, que no dudarán en seguir al jugador incansablemente al detectarle, aunque se puede escapar de ellos. Habrá que resolver un puzzle, un obstáculo en el camino. La primera misión introduce al jugador en la historia y en la ambientación. |
| Misión 2: el poblado abandonado | En la misión 2, el jugador en tercera persona debe encontrar en un nuevo mapa, unos sprays y un lugar en el que pintar. La misión principal es hacer un graffiti y fotografiarlo. En medio, se cruzan algunas dificultades, como la policía o un androide, que pueden entorpecer la tarea, y algunos puzzles que resolver. Por otro lado, el lugar posee una historia que puede aportar algo de información. La segunda misión introduce al jugador al personaje principal PLAYER y profundiza en la historia del lugar y de la trama. |
| Misión 3: la bodega real | En la misión 3, el jugador debe encontrar un item faltante en un nuevo mapa. Necesitará este item para concluir el juego. |
Ejemplo de cada nivel
Imagen de cada nivel
Ejemplo de código de blueprint de nivel
Blueprint Level 1
Al estar basados en emplazamientos reales, creé los 2 primeros niveles a partir de mapeos 3D satelitales que me sirvieron como referencia de escala y posición.
Para empezar a crear los niveles, moldeé el terreno con la herramienta Landscape de Unreal Engine, y reservé una capa del mismo para modificar el terreno mediante splines, lo que me sirvió para crear los caminos. (Utilizar Landscape era otra de las premisas -no escrita- del curso para realizar el proyecto).
Con la técnica Automaterial pude asignar texturas utilizando la herramienta Paint del Landscape de Unreal Engine, y elegir sobre cuáles podría esparcir geometría Folliage según mis intereses, además de ubicar Folliage “a mano” en determinados lugares.
Nivel 1: Referencia satelital y Resultado de la herramienta Landscape + Automaterial
Nivel 2: Referencias satelitales y Resultado de la herramienta Landscape con algunos assets ubicados
Debido al reducido tiempo de producción, todos los assets y texturas que utilicé en las escenas fueron tomados de Quixel y otras fuentes de uso libre, válidos para proyectos como este.
Esta tarea requirió un importante tiempo de búsqueda, organización, tomando nota de la autoría para dar crédito a sus creadores. En cuanto a la preparación de los assets, en varias ocasiones hubo que realizar conversiones de formato, correcciones en el transform, o en los materiales, las texturas y normales, y en varios casos hubo que desechar los archivos seleccionados por contener errores o convertirse en retos que, simplemente, llevarían más tiempo de resolver que diseñar desde 0 un modelo nuevo.
Resultados
A continuación muestro resultados de implementación en los niveles.
Nivel 1
Nivel 2
Nivel 3
El final del juego