Diseño de entornos 3D para videojuegos

Composición

Composición · 01

Composición

La composición es la arquitectura de la información visual

​

Dicho de otro modo, mediante la composición podemos:

​

• Organizar los elementos de la escena.
• Establecer una jerarquía visual.
• Guiar la mirada del espectador.
• Comunicar conceptos.
• Contar una historia.
• Proporcionar pistas para la navegación.
• Evitar el caos.

Composición · 03

Composición

• Dependiendo del proyecto, la composición puede abordarse de distintas maneras:
• Puede ser responsabilidad del diseñador de niveles, del departamento de arte o de ambos.
• Los proyectos orientados al “gameplay first” suelen trabajar la composición después del layout jugable.
• Los juegos narrativos o artísticos a veces abordan la composición primero.
• Idealmente, en juegos con mundos inmersivos, gameplay y composición deberían desarrollarse al mismo tiempo.
• En cualquier caso, diseñadores y artistas necesitan comprender el gameplay previsto.
• Puede ser de gran ayuda en términos de legibilidad y navegación.
• Su relevancia en el diseño de niveles ha aumentado exponencialmente con el paso de los años.

Composición · 04

Contextualizando la composición

Al observar una composición, nuestra mente busca algunos anclajes:

• Escala humana
• Escala relativa entre elementos (también puede determinar la distancia respecto al espectador)
• Posicionamiento respecto al horizonte
• Posicionamiento respecto a los bordes
• Similitud de las formas en relación con nuestra realidad
• Similitud de los colores en relación con nuestra realidad
• Proximidad espacial entre formas
• Proximidad espacial entre colores y valores
• Luz

​

Composición · 05

Composición: ingredientes

• Vista y cámara
• FOV / distancia focal
• Centro de interés
• Formas
• Luz y sombra
• Color: valor, tono, saturación, contraste
• Capas
• Posicionamiento (¿el objeto de interés está por encima o por debajo de nosotros?)
• Textura y microcontrastes
• Tamaño / escala
• Distancia
• Disposición en el plano bidimensional de la pantalla
• Relación espacial entre elementos
• Orden de los elementos
• Movimiento.

Composición · 06

Vista y cámara

Esta es una lista parcial de tipos de cámara y vistas que podemos encontrar (¡podéis sugerir más!):

• Abstracta
• Interfaz de usuario
• Entorno lógico 2D figurativo con perspectiva fija
• Cinemática dentro del juego
• Perspectiva fija
• Movimiento de cámara predefinido sobre raíles
• Móvil sobre raíles o dentro de volúmenes
• Cámara libre en primera persona
• Cámara libre en tercera persona
• Sobre el hombro
• Híbrida (por ejemplo, libre pero redirigida mediante triggers)
• Muchas más (incluidos experimentos como la vista en segunda persona…)

Composición · 07

Vista y cámara

Abstracta

Super Hexagon

Bejeweled

Composición · 08

Vista y cámara

Abstracta (UI)

Hypnospace Outlaw

Her Story

Composición · 09

Vista y cámara

Entorno lógico 2D figurativo con perspectiva fija

Inside

Super Mario World

Composición · 10

Vista y cámara

Cinemática dentro del juego

Killer is Dead

The Legend of Zelda: Majora’s Mask

Composición · 11

Vista y cámara

Perspectiva fija

Resident Evil Remake

Tunic

Composición · 12

Vista y cámara

Predefinida sobre raíles

Panzer Dragoon Remake

Time Crisis 3

Composición · 13

Vista y cámara

Móvil sobre raíles o dentro de volúmenes

Little Nightmares

Etherborn

Composición · 14

Vista y cámara

Cámara libre en primera persona

Portal 2

Mirror’s Edge

Composición · 15

Vista y cámara

Cámara libre en tercera persona

Elden Ring

Fortnite

Composición · 16

Vista y cámara

Cámara libre en tercera persona

Resident Evil 4

Sobre el hombro

Super Mario 64

Híbrida (libre + reposicionamiento)

Composición · 17

Vista y cámara

Y muchas otras. Por ejemplo:

Vista en segunda persona

Her Story

Vídeo

Driver: San Francisco (el jugador controla realmente el coche de delante)

Composición · 18

Vista y cámara (recordatorio)

Esta es una lista parcial de tipos de cámara y vistas que podemos encontrar (¡podéis sugerir más!):

• Abstracta
• Interfaz de usuario
• Entorno lógico 2D figurativo con perspectiva fija
• Cinemática dentro del juego
• Perspectiva fija
• Movimiento de cámara predefinido sobre raíles
• Móvil sobre raíles o dentro de volúmenes
• Cámara libre en primera persona
• Cámara libre en tercera persona
• Sobre el hombro
• Híbrida (por ejemplo, libre pero redirigida mediante triggers)
• Muchas más (incluidos experimentos como la vista en segunda persona…)

Composición · 19

FOV / distancia focal

• El campo de visión (FOV) y la distancia focal se refieren al tamaño del mundo observable en un momento dado.
• El FOV se mide en grados; la visión humana ronda los 90º.
• La distancia focal se mide en milímetros y es la medida que usan las cámaras reales para hacer zoom.
• Un FOV más alto permite ver más elementos alrededor (vista más amplia).
• Una distancia focal más alta permite ver menos elementos alrededor (más zoom).

Composición · 20

FOV / distancia focal

• Una distancia focal alta comprime la profundidad.
• Los elementos parecen estar más cerca entre sí
• La perspectiva se deforma menos
• Necesitamos alejarnos más del sujeto
• Esto aporta cierta distancia emocional
• Una distancia focal baja exagera el espacio
• Los elementos parecen estar más lejos
• La perspectiva se deforma más
• Podemos acercarnos más al sujeto
• Esto aporta una conexión emocional más cercana

Fallen Angels (Wong Kar-Wai, 1995)

Tinker Tailor Soldier Spy (Tomas Alfredson, 2011)

Composición · 21

FOV / distancia focal

God of War 2 (PS2)

God of War Ragnarok (PS4, PS5)

En videojuegos:

• Una cámara lejana con FOV bajo da más protagonismo al entorno.
• Una cámara cercana con FOV alto da protagonismo al personaje principal.

​

Composición · 22

Tipos de movimiento de cámara

Algunos juegos (como Arkham Asylum) pueden usar muchos movimientos cinematográficos durante el gameplay, pero normalmente se reservan para cinemáticas. No los cubriré todos aquí.

Composición · 23

Vistas + FOV + movimiento de cámara

Cuando el personaje principal es una IP potente por sí mismo, los juegos suelen usar muchos tipos de cámara para lucirlo todo lo posible.

En la imagen: Batman: Arkham Asylum.

Composición · 24

Centro de interés

• ¿Cuál es el sujeto principal de la escena? Ese es el centro de interés, o el POI principal.
• ¿Cuáles son los sujetos secundarios? Esos serán nuestros POI secundarios.
• Todos los sujetos deben leerse en el orden correcto, según su relevancia.
• Usando las técnicas que veremos aquí, podréis hacer que unos sujetos destaquen más que otros.
• Organizad la escena en consecuencia.

Composición · 25

Formas

• Es la base de todo lo demás
• Las siluetas son cruciales
• Ayudan a leer los espacios
• Ayudan a memorizar los espacios
• La geometría subyacente nos afecta a nivel emocional
• Las formas redondeadas resultan más amigables
• Las esquinas duras y las puntas se perciben como peligrosas
• Las formas verticales generan tensión
• Las formas horizontales resultan más relajadas

Qué es el efecto Bouba-kiki

​

El efecto Bouba–Kiki se predice por propiedades del sonido, no por propiedades del habla

Composición · 26

Formas

• Dependiendo de cómo gestionemos la forma, podemos evocar:
• Tensión
• Significado
• Direccionalidad
• Armonía
• Etc.
• Por ejemplo, la arquitectura gótica es conocida por su extrema verticalidad (direccionalidad), como si intentara abandonar el suelo (tensión) para alcanzar el cielo (significado).

Composición · 27

Formas

• La catedral de Colonia es una obra maestra de la arquitectura gótica.
• La Sagrada Familia es una obra maestra del modernismo catalán y el neogótico.
• Ambas parecen fuego. Ambas recibieron inspiración de la última etapa de la arquitectura gótica: el gótico flamígero [1, 2].

Composición · 28

Simetría

• El mundo natural es asimétrico (orgánico).
• Por eso, la simetría evoca la idea de estar más allá de la naturaleza.
• Puede transmitir significados de:
• Espiritualidad
• Poder
• Armonía perfecta
• Etc.
• ¡Usadla con intención!

​

Composición · 29

Simetría

La arquitectura y el paisajismo japoneses suelen romper la simetría para evocar un aspecto naturalista. Arriba y a la derecha: fotos que hice en Okayama.

Composición · 30

Proporciones

Existen muchas proporciones preestablecidas…

• Proporción áurea (1,618…)
• Proporción de plata japonesa (1,414)
• Proporciones de Fibonacci
• Rectángulos dinámicos
• Regla de los tercios
• Simetría
• Etc.

Leed sobre la proporción de plata en la arquitectura japonesa

​

Composición · 31

Proporciones

• No son “reglas” estrictas. Son guías que pueden ayudar en distintos contextos.
• Por ejemplo, la regla de los tercios suele ayudar a equilibrar el horizonte, pero… ¿beneficiaría a esta imagen?
• La composición no es una colección de trucos y atajos. ¡La composición es un lenguaje!
• Por eso, en videojuegos normalmente nos preocupa más resolver problemas que respetar teorías tradicionales o místicas (aunque sean hermosas).

Foto de Michael Kenna

​

Composición · 32

Proporciones

Sin embargo… las proporciones pueden tener un profundo significado cultural. Estos son dos edificios que fotografié en Japón. Izquierda: Kinkakuji (el Pabellón Dorado), Kioto. Está construido íntegramente con rectángulos de plata.

Derecha: interior de un restaurante tranquilo frente al Koraku En, Okayama. Las paredes muestran rectángulos de plata.

Composición · 33

Luces y sombras

• La luz y las sombras definen volúmenes.
• Aportan:
• Profundidad
• Legibilidad
• Contraste
• Guía visual
• Solidez
• ¿Qué representa la forma de la derecha?

​

Composición · 34

Luces y sombras

• La luz y las sombras definen volúmenes.
• Aportan:
• Profundidad
• Legibilidad
• Contraste
• Guía visual
• Solidez
• ¿Qué representa la forma de la derecha?

​

Composición · 35

Luces y sombras

Imágenes de la GDC 09 que muestran un prototipo de Mirror’s Edge (lanzado en 2008). Incluso entonces, un estudio como DICE (conocido por la gran calidad de sus juegos) trabajaba la iluminación desde el inicio del proyecto, aunque solo fuera el tiempo necesario para hornearla con los valores por defecto. Mirad la versión final y fijaos en los degradados de las sombras, la luz blanca rebotando por todas partes, la oclusión ambiental densa… La iluminación ayuda a la legibilidad y hace que las cosas parezcan más sólidas. ¡Eso también ayuda a vender ideas!

Composición · 36

Color

• Las variables que nos interesan son:
• Tono (qué color del arcoíris)
• Saturación (cuánta cantidad de ese color)
• Valor (cuán claro u oscuro)
• Contraste (la diferencia entre dos o más colores)
• Los valores son esenciales. Definen siluetas, luces y sombras.
• Las personas daltónicas suelen tener problemas con el tono, pero no con los valores. Por tanto:
• La legibilidad debe basarse en el valor, no en el tono.

• Nota: la forma en que los ordenadores calculan los colores puede ser poco intuitiva. Por ejemplo, cambiar la saturación también puede afectar al valor percibido. Sin embargo, para diseño de niveles suele bastar con estimarlo a ojo.
• Intentad apoyaros en la comprensión de los conceptos generales más que en tecnicismos.

​

Composición · 37

Color

Composición · 38

Color

Composición · 39

Color

Le Corbusier es conocido sobre todo por ser pionero en el uso del hormigón armado, pero también era maravilloso con el color. En la imagen: el pabellón Esprit Nouveau en Bolonia.

Fijaos también en cómo creó una fascinante yuxtaposición y contraste entre el mundo natural y orgánico, y la racionalidad pura y perfecta de las estructuras creadas por el ser humano.

Bonus: Ter hablando sobre el uso del color en Le Corbusier (en español).

Composición · 40

Color

En el mundo real, Disney usa cambios de valor y tono en la atracción de Cars, donde las montañas del fondo están pintadas con un tono siena más claro para simular densidad atmosférica. Es como un matte painting, muy usado en cine.

En videojuegos también hacemos mucho matte painting…

Mirror’s Edge usa el color de forma magistral para:

• Mejorar la legibilidad
• Guiar al jugador
• Crear contrastes entre habitaciones a lo largo de una misión
• Centrar el arte en lo básico (forma, color, luz, textura)
• Construir una dirección de arte que deja una impresión duradera

Composición · 41

Color

TLOZ: Majora’s Mask: N64 (arriba) vs. remake de N3DS (abajo)

​

• Las texturas decorativas de N64 compiten por la atención con elementos importantes.
• El andamio en 3DS está bien aislado, señalando su relevancia.
• La torre del reloj en N64 tiene una silueta definida como conjunto, pero el propio reloj (el elemento más relevante) es más difícil de separar del resto.
• El espacio en 3DS es más amplio, lo que facilita la navegación (aunque podría argumentarse que también se siente menos opresivo, algo que encajaba con el tema).

Composición · 42

Color

Hades es visualmente muy denso, pero sigue siendo legible la mayor parte del tiempo. No es por mero “instinto”: todos los elementos tienen sus valores bien calibrados para que las escenas sean lo más claras posible.

Composición · 43

Tamaño y escala

• “El hombre es la medida de todas las cosas”.
• Si no tienes un ser humano en la escena, usa un objeto humano identificable
• Los objetos humanos son un excelente sustituto de una silueta humana, porque aportan:
• Sensación de escala
• Un misterio (¿a quién pertenece este objeto?)
• En la imagen: Modulor Man, de Le Corbusier.

Composición · 44

Tamaño y escala

¿Cuál es el tamaño de esta estructura?

Composición · 45

Tamaño y escala

¿Cuál es el tamaño de esta estructura?

Composición · 46

Capas

• Debido a la naturaleza interactiva de los videojuegos, crear un primer plano adecuado puede llegar a ser imposible.
• Por eso, la mayoría de juegos operan en el rango entre plano medio y fondo.
• Los juegos en primera persona suelen tener un primer plano constante: las manos del jugador.
• En términos de puesta en escena, los juegos con posiciones de cámara predefinidas pueden ofrecer la mejor estratificación en capas.

Composición · 47

Capas

El maravilloso Little Nightmares II a veces coloca al jugador en primer plano con una intención expresiva o narrativa.

Composición · 48

Capas

Tened en cuenta que la diferencia entre primer plano, plano medio y fondo es conceptual. En realidad, cada posición de profundidad puede estar compuesta por varias capas.

Hollow Knight puede llegar a tener más de una docena de planos en scroll, desde efectos visuales de primer plano (como vapor o partículas) hasta muchas capas de fondo que generan un efecto 3D.

Composición · 49

Capas

• Los primeros planos son mucho más complicados de implementar en juegos 3D con cámara libre.
• Sin embargo, usando puntos de observación, POI y POA podemos predecir o incluso imponer perspectivas concretas y crear composiciones clave para ellas.
• Hoy en día, incluso los juegos de mundo abierto lo hacen.

Composición · 50

Textura y microcontraste

• Aquí no uso el término “textura” en el sentido del modelado 3D. No hablo de archivos de imagen.
• Lo uso en su sentido artístico: detalles que generan la impresión de una superficie continua.
• Un mayor contraste entre esos detalles (microcontraste) aumenta el peso compositivo y llama la atención.
• En la imagen de la izquierda: una escena del éxito indie Mouthwashing, donde un grupo de hachas clavadas en la pared forma un patrón que refuerza el POI y objetivo actual: una trampilla que lleva al sistema de ventilación.

Composición · 51

Textura y microcontraste

Descanso vs. detalle

• Concentrad los detalles en las zonas hacia las que queréis dirigir la atención del jugador.
• Dejad que los ojos descansen donde no sean necesarios…
• Fijaos en cómo Portal 2 sustituye los tutoriales de la pistola de portales del primer juego por paredes decoradas para atraer nuestra atención. ¡Ingenioso!
• El resto de la habitación está lleno de cosas irrelevantes que no contrastan ni destacan demasiado (escombros, plantas, etc.).

Composición · 52

Posicionamiento relativo

• Dividid el espacio en áreas distinguibles.
• ¿Dónde está el sujeto en comparación conmigo y/o con otros sujetos?
• ¿Está más alto? Entonces debe ser importante.
• ¿Alguno de los sujetos tiene direccionalidad?
• ¿Hacia dónde me lleva?
• Las composiciones triangulares suelen funcionar con facilidad. También son más fáciles de ejecutar en un entorno interactivo.
• Cuando está bien hecho, la geometría establecida por los sujetos marca un camino claro para que lo sigan nuestros ojos.

Foto de Garry Winogrand

Foto de Joseph Koudelka

Composición · 53

Posicionamiento relativo

Los triángulos son muy útiles para establecer relaciones simples rápidamente.

Composición · 54

Movimiento

Composición · 55

Movimiento: encuadre centrado

Cuando hay mucha acción, es importante predecir hacia dónde mira el usuario y hacer que la nueva información aparezca ahí.

Composición · 56

Movimiento: guiando la mirada

En un entorno interactivo, los elementos o lugares relevantes pueden destacarse mediante el movimiento.

Composición · 57

Movimiento: guiando la mirada

El movimiento y la vista del jugador son esenciales. Los elementos relevantes que quedan fuera de nuestro FOV pueden invitarnos a mover la cámara hacia POI concretos.

​

En la imagen: un barnacle de Half-Life 2 ayuda al jugador a descubrir un alijo secreto de consumibles en el techo (enlace)…

Composición · 58

Movimiento: guiando la mirada

Ghost of Tsushima usa el sistema de “viento guía”.

​

Técnicas de Kurosawa aplicadas a la navegación en videojuegos…

​

¡El único límite es nuestra imaginación!

Composición · 59

Movimiento: guiando la mirada

Usé todo este conocimiento para guiar la mirada del jugador durante los desafíos de TNT en After Us.

​

Especialmente en el puzle final de TNT (30:44).

Composición · 60

Atención y saliencia

Saliencia bottom-up

Si usamos cualquiera de los recursos mencionados en un elemento concreto, destacará automáticamente.

Composición · 61

Atención y saliencia

Saliencia top-down

• Los efectos visuales no son los únicos recursos que hacen que los sujetos destaquen.
• Los rostros humanos, las personas o los elementos asociados a nuestra tarea u objetivo actual también destacarán en nuestra mente.

Composición · 62

Posicionamiento

• Un reto clave de las formas y entornos 3D es hacer que sean interesantes desde cualquier ángulo.
• Esta fue una de las mayores habilidades de los maestros de la escultura y la arquitectura.
• En videojuegos, debido al gran rango de movimientos posibles, solemos elegir puntos concretos del nivel para generar composiciones alrededor de ellos.
• Pasillos.
• Puntos de entrada
• Puntos de observación / miradores del paisaje (normalmente usados para presentar una nueva sección).
• POA (Point Of Advantage).
• POI (Point Of Interest).

Composición · 63

Posicionamiento

1. El Shaddai: Ascension of the Metatron

2. Papo y Yo

3. Metal Gear Solid: Ground Zeroes

4. TLOZ: Breath of the Wild

Composición · 64

Líneas guía (guiding lines)

• Describen flujo y direccionalidad.
• Pueden ser explícitas (un camino, un cable relevante…) o implícitas (formas subyacentes de la composición).
• Las líneas guía relevantes para una tarea deben ser explícitas.
• Las líneas guía relevantes para la estructura del juego pueden ser implícitas.
• Sin embargo, las líneas guía implícitas funcionan más como apoyo. Si el camino y/o el objetivo no están claros, nuestro cerebro puede descartarlas fácilmente.
• Por tanto, ¡no sobreestiméis su efectividad!

Composición · 65

Líneas guía

En el videojuego indie Industria, tuberías gruesas con cables conducen al jugador hacia máquinas relevantes tanto para el gameplay como para la trama.

Composición · 66

Líneas guía

Muchos puzles usan cables y formas similares (como láseres o haces de luz) para expresar visualmente la correlación y causalidad entre distintos elementos de gameplay.

En la saga Portal, los cables son informativos, aunque en The Witness seguir el recorrido de cables semienterrados puede formar parte del desafío.

Composición · 67

Líneas guía

Las líneas guía implícitas pueden servir como una base sólida para crear composiciones bellas que funcionen en armonía con el flujo del juego.

​

¡Pero no esperéis que los jugadores las registren de forma consciente!

Composición · 68

Migas de pan (breadcrumbs)

• Son elementos pequeños repartidos por el mundo del juego que invitan al jugador a seguir una dirección o realizar determinados movimientos.

• Es una de las técnicas más antiguas usadas en videojuegos con este propósito.
• El nombre viene de Hansel y Gretel.

Composición · 69

Migas de pan

• Se sigue usando hoy en día.
• Alan Wake II contiene varios ejemplos de migas de pan en un contexto moderno y surrealista.
• Seguid las luces rojas…

Composición · 70

Migas de pan: bonus track

• Una moneda con glitch en Super Mario 64 permite al experto Pannenkoek2012 elaborar una teoría sobre cómo era el nivel Tiny-huge Island en una versión anterior durante el desarrollo.
• Esto demuestra que, en gran medida, SM64 está diseñado como un mecanismo de relojería: cada elemento tiene una relación muy estudiada con su entorno.

Composición · 71

Composición · 72

Espacio negativo

Gaetano Kanizsa, del Instituto de Psicología de la Universidad de Trieste, describe fenómenos de “márgenes casi perceptivos en campos de estimulación homogénea” en un artículo publicado en la Rivista di Psicologia (n.º 1, enero-marzo de 1955):

​

“Considerad, por ejemplo, la figura reproducida, que objetivamente está formada por tres sectores circulares negros y tres líneas angulares colocadas en cierto orden sobre un fondo completamente blanco.

​

Pues bien, no solo todos mis pacientes afirmaron ver claramente un triángulo blanco superpuesto sobre otro parcialmente cubierto por el primero, sino que muchos también dijeron tener la impresión de que era realmente un triángulo recortado de otro papel más blanco que el fondo y pegado encima del resto. Así, no podían distinguir exactamente dónde estaban los bordes de esa figura, ni los márgenes reales de una superficie verdaderamente distinta del fondo.”

​

Composición · 73

Espacio negativo

“El fenómeno desaparece si cada elemento del conjunto tiene autonomía formal, una completitud que permite percibirlo no como una forma a la que le falta algo, sino como una forma completa. En ese caso, se restablece la uniformidad del campo visual.”

​

Composición · 74

Espacio negativo

• ¡El espacio negativo también es espacio!
• Es más sutil que el espacio positivo, pero igual de importante.
• Bien utilizado, el espacio negativo define las formas casi tanto como el espacio positivo.
• Las formas positivas completas y aisladas no ayudan a definir el espacio negativo.

​

Imagen de la derecha: para lograr el efecto deseado, Escher hace que los animales sean “incompletos” e interdependientes en la sección central. Así construye el gradiente pez-pato y consigue una distribución equilibrada del peso entre los espacios negros y blancos.

Cielo y agua I, Maurits Cornelis Escher (M. C. Escher)

Composición · 75

Espacio negativo

• Eduardo Chillida fue famoso por esculpir con volumen negativo.
• Puede ser una gran fuente de inspiración para formas y espacios interesantes…

Composición · 76

Espacio negativo

Patterns of Justice es una serie fotográfica premiada que realicé en la Ciudad de la Justicia de Barcelona usando espacio negativo para “esculpir” la composición.

​

(Y ni siquiera me disculpo por la autopromoción descarada)

Composición · 77

Espacio negativo

• La combinación de espacio negativo y oclusiones también ayuda a construir capas en la imagen.
• Si dos objetos están en contacto en el plano 2D de la imagen, parecerá que también se tocan físicamente.
• Si queréis evitarlo, añadid espacio negativo entre ellos u ocultad uno detrás del otro.
• También puede usarse deliberadamente para crear ilusiones ópticas.
• ¡Esperé un año entero para hacer esta foto de las tres chimeneas de Sant Adrià!

Composición · 78

Espacio negativo: bonus track (para ver en casa)

Composición · 79

Oclusiones y recorrido

Oclusiones…

• Gestionan el flujo de información visual.
• Crean sensación de ritmo y anticipación.
• Añaden misterio.
• Fomentan la exploración.

​

Los jardines japoneses usan esta técnica de forma preciosa. Mirad estas fotos que hice en el Okayama Koraku-en.

Composición · 80

Oclusiones y recorrido

Para TLOZ: BotW, Nintendo usó lo que llaman la “Field Triangle Rule”:

• El mundo está formado por triángulos, rectángulos y trapecios.
• Los triángulos responden a las formas del terreno desde el POV del jugador.
• Invitan al jugador a tomar decisiones durante la exploración: “¿Debería escalarlo o rodearlo?”
• Los triángulos tienen distintos propósitos según su tamaño:
• Triángulos grandes: montañas que actúan como landmarks lejanos.
• Triángulos medianos: ocultan objetos lejanos para mantener el misterio.
• Triángulos pequeños: terreno cercano; influyen en el ritmo y mantienen el interés.
• Los triángulos son formas que atraen la mirada. Por eso, los diseñadores a menudo colocaban objetos interesantes en las puntas de montañas y colinas, formando POI que atraen al jugador.
• Los rectángulos suelen ser estructuras artificiales.
• Su propósito es revelar sorpresas de forma abrupta.
• Los trapecios ofrecen una mezcla de efectos triangulares y trapezoidales.
• Las torres se colocaron como POI que ofrecen objetivos y motivaciones.

Fuente: https://www.4gamer.net/games/341/G034168/20170901120/

​

Composición · 81

Oclusiones y recorrido

Los caminos rectos son aburridos.

Composición · 82

Oclusiones y recorrido

• Las estructuras se colocan como una sucesión de misterios.
• Cada vez que tenían que introducir un nuevo camino hacia un objetivo, seguían este proceso:
• Curvar el camino para introducir variación.
• Añadir cambios de elevación usando triángulos.
• Ocultar la torre usando el terreno.
• Revelar nuevas estructuras (como ruinas cuadradas) durante el trayecto.
• Por último, hacer que la torre reaparezca de repente para lograr un efecto dramático.

Composición · 83

Oclusiones y recorrido

Composición · 84

Imaginabilidad

• Se refiere a la probabilidad de que un objeto o entorno se recuerde con claridad.
• Kevin A. Lynch introdujo el concepto en el contexto de las ciudades estadounidenses.
• Cinco elementos contribuyen mucho a la imaginabilidad de una ciudad:
• Camino
• Landmark
• Borde
• Nodo (intersección)
• Distrito
• Fijaos en que la mayoría de estos elementos también pueden aplicarse a la creación de mundos virtuales.
• TLOZ no tiene distritos, pero sí áreas muy diferenciadas.

Composición · 85

Half-Life 2: puente de Highway 17

Se considera un momento muy memorable.

​

Leed los comentarios de este post de Reddit y os haréis una idea de lo memorable que es.

​

La música ambiental también juega un papel, pero es muy interesante observar que la mayoría de cosas que lo hacen tan memorable funcionan a nivel inconsciente. Algunos de los comentarios destacados dicen:

​

“Por alguna razón es una zona muy reconocible.”

​

“Es curioso que, aparentemente, sea un recuerdo vívido que parece tener todo el mundo que jugó ese nivel.”

​

Composición · 86

Half-Life 2: puente de Highway 17

• Lugar reconocible recorrido de una forma inusual (contraste).
• La combinación de masa (suelos, techos, sala de control) y líneas (estructuras metálicas y barandillas).
• Mucho espacio negativo compuesto por formas geométricas simplificadas. Muy legible.
• La estructura es una colección de líneas guía explícitas que, además, son la base misma de la composición.
• El suelo oculta nuestro objetivo.
• El peligro constante de caer.
• El espacio se describe mediante valores (sombras y luces).
• Enemigos y munición colocados como migas de pan.
• Los pájaros aportan movimientos sutiles que llevan nuestra mirada hacia ellos, haciéndonos más conscientes del fondo y de nuestra altitud.
• La mayoría de estas cosas funcionan de forma inconsciente.

Veamos un vídeo

Composición · 87

Prototipando Mirror’s Edge

• Este vídeo es ORO.
• Todavía no daré ninguna explicación.
• Con todo lo que hemos aprendido en mente, vamos a apreciarlo juntos.
• Puedo poner el vídeo tantas veces como queráis.

Composición · 88

Cómo componer

Antes de componer

• Tratad de entender las situaciones ofrecidas por el gameplay. Hablad con los level designers.

Primeros pasos

• ¿Cuál es el sujeto principal?
• ¿Cuál o cuáles son los sujetos secundarios, si los hay?
• Escribid cuál es vuestro objetivo como diseñadores.
• ¿Es introducir gameplay? ¿Secuenciar una cinemática? ¿Impresionar al jugador con una vista? ¿Simplemente vestir la escena de forma coherente?
• El objetivo guiará vuestra composición.
• No lo hagáis todo a la vez. No intentéis impresionar al jugador con una vista mientras aprenden gameplay y le contáis una historia.
• Los objetivos y sujetos serán nuestros POI (puntos de interés). Están en la parte alta de nuestra jerarquía.
• Saber esto permitirá encontrar nuevos e interesantes puntos de observación.
• Revisad vuestro moodboard.
• ¿Hay imágenes que puedan relacionarse con vuestros POI?
• ¿Algún escenario que evoque emociones o cuente una historia similar a la que queréis comunicar?
• ¿Qué queréis que vea primero el jugador?
• La respuesta más sencilla es mostrar el sujeto principal en el centro.

Composición · 89

Cómo componer

Componiendo

• Lo primero: masa y líneas.
• Enfatizad sujetos y objetivos con movimiento (animaciones, scripts de spawn, etc.) e iluminación (resaltando las áreas de interés).
• Testead, hablad con los game/level designers.
• Comunicad vuestras necesidades a los level designers y managers.
• Tened en cuenta que otros elementos, como textura, concentración de detalles, etc., deben contar la misma historia que nuestra composición.
• Durante esta fase suelen aparecer problemas de legibilidad.
• Si el artista pone demasiados detalles en una parte poco importante del nivel y/o viste los POI de forma aburrida, afectará al gameplay.
• Si la jerarquía ya no está clara, volved a vuestros apuntes y recordad cuál es la jerarquía visual que buscamos.
• Testead (otra vez).
• Repetid el proceso.

Composición · 90