Aquí explico cómo encaré mi segundo proyecto de videojuego con Unreal Engine.
‘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 Graffo-War)
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:
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.
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