game-visual-hierarchy

Jerarquía Visual del Fotograma del Juego

Idea Central

La atención que un jugador puede dedicar a la pantalla en cada instante es limitada. Cualquier cosa que "destaque" (más brillante, más oscuro, más saturado, más denso, más grande, en movimiento) se toma del mismo presupuesto. La jerarquía se trata de asignar este presupuesto: la información más crítica para la jugabilidad y que requiere reacción inmediata obtiene los medios más prominentes y exclusivos; el resto de elementos se retiran activamente.

La acción clave es restringir la capa inferior, no elevar la superior. Si solo haces que lo importante sea brillante, otros activos también se volverán brillantes y al final todo grita. Un enfoque efectivo es definir un rango estrecho para el lienzo base y dejar espacio en blanco en la dirección que usarán las capas superiores.

El método está destilado del blog de Riot de 2014 "Defining the Rift's Visual Style". Lo que son afirmaciones originales del artículo, lo que son deducciones de esta habilidad y los datos medidos se encuentran en references/rift-case-study.md; otras fuentes en references/sources.md.

0. Primero, Encuentra las Propias Especificaciones del Proyecto

Primero busca estos elementos en el proyecto:

• Dirección artística y especificaciones de color, archivos de paleta, registros de capturas de QA, problemas ya documentados en páginas de revisión;
• Limitaciones del dispositivo y herramientas de exportación, como el límite de cuadros por segundo de una pantalla LED o cómo se maneja el brillo;
• Registros de decisiones: qué se ha hecho y qué se ha rechazado.

Si los encuentras, usa su terminología y espacio de color, y toma sus números como criterios de aceptación. Separa los supuestos de los hechos verificados en los comentarios del código. Cuando las especificaciones entren en conflicto con los principios aquí descritos, señálalo, no los reescribas por tu cuenta.

1. Comienza por las Decisiones que el Jugador Debe Tomar

Primero pregúntate: ¿qué debe leer el jugador en este momento? ¿Dónde estoy? ¿A dónde puedo ir? ¿Quién es enemigo, quién es aliado? ¿Qué está a punto de golpearme? ¿Qué puedo hacer ahora? ¿Cuál fue el resultado de lo que acabo de hacer? Lo que se lee debe ser verdadero: lo que parece un camino transitable, que hará daño o que tiene un área de efecto, debe serlo realmente en la jugabilidad.

• Ordenamiento considera dos puntos. Urgencia: cuál es el costo de pasar por alto la información y qué tan rápido se necesita reaccionar; el costo es mayor si el jugador puede esquivar, interrumpir o reposicionarse basándose en ella; los efectos a los que no se puede responder no deben diseñarse como advertencias. Persistencia: si es constante o instantáneo. Por lo general, las señales "instantáneas y letales" son las de mayor prioridad.
• Punto de atención: Marca dónde está mirando el jugador en ese momento (personaje, punto de mira, cursor). Las señales cerca del punto de atención pueden basarse en color y forma; las señales de emergencia lejos del punto de atención deben usar movimiento, área o cambios generales en el borde de la pantalla.
• Fases: Explora y combate, navega/selecciona/resultados; ordena cada una por separado; al entrar en una fase, reduce activamente las capas que no son relevantes.
• Divide por función, no por activo: Los bordes de acantilados y los objetos recogibles son información de juego; colócalos en el borde superior de la capa de entorno. Las partículas decorativas pertenecen a la capa de entorno, aunque técnicamente sean "efectos".
• El orden de dibujo no es igual a la prioridad de prominencia: Las balas de una torreta se dibujan sobre los enemigos, pero son muchas y contienen poca información individual; deben ser pequeñas y de corta duración.

Para los puntos de partida de capas por tipo, consulta references/layer-stacks.md.

2. Canales de Prominencia

Canal	Características
Contraste de brillo	El más fuerte y rápido; funciona incluso en escala de grises; es la primera opción para jerarquizar.
Saturación	El segundo más fuerte. Pequeñas áreas de color muy saturado también llaman la atención.
Matiz y temperatura	Muy fuerte cuando contrasta con la familia de colores principal de la escena, como un color frío en una escena de lava; dentro de la misma familia de colores, no es fiable (rojo vs. verde). También se usa para expresar semántica.
Densidad de detalle	La textura de alta frecuencia es ruido y dispersa la atención.
Forma, área, silueta	La forma distingue el tipo de señal; la silueta determina si se reconoce desde lejos.
Movimiento y modo de aparición	Extremadamente efectivo para la visión periférica; la aparición repentina es más efectiva que el fundido gradual. Cuando las señales de máxima prioridad usan movimiento, otros movimientos cíclicos deben detenerse o degradarse.
Posición y encuadre	Borde de pantalla, placa base, contorno, círculo base. La UI persistente depende principalmente de esto.
Tono general de pantalla y brillo total	Se lee primero desde lejos y de un vistazo; es adecuado para expresar estados globales.

Definición de brillo: Si se puede distinguir en escala de grises, depende del brillo percibido (L*). El V en HSB mezcla "brillante" y "saturado": el V del azul puro es 100, pero su L* es solo 32. Cuando se usen números de brillo, especifica de qué tipo se trata.

3. Reglas de Asignación

1. El lienzo es el más estrecho y deja espacio libre en la dirección que usarán las capas superiores. Por defecto, deja espacio en ambos extremos. En juegos oscuros y pantallas LED, el lienzo puede pegarse al extremo oscuro; entonces las capas superiores solo pueden expandirse hacia lo brillante y lo saturado, complementando con contornos, siluetas y movimiento.
2. La capa superior incluye a la inferior y luego se expande hacia afuera. La capa superior puede usar los tonos medios del lienzo, siendo visible gracias a la parte adicional: reflejos más brillantes, siluetas más oscuras, acentos más saturados. Dentro de la capa también hay jerarquía: la parte que sobresale se gasta en partes pequeñas que llevan información de juego (dirección, arma, punto débil, extremidad de anticipación), el resto se convierte en una zona de descanso de bajo detalle.
3. El canal más fuerte se reserva para la señal de mayor prioridad de la Sección 1, como un carril exclusivo. El carril exclusivo se extrae de todas las demás capas, perteneciendo solo a su dueño. Un carril corresponde a un solo significado para que el jugador pueda aprenderlo; cualquier otra cosa que entre es una falsa alarma. No tiene que ser "el más brillante", puede ser un matiz, una forma o un movimiento, o puede asignarse por fase.
4. Prominencia × Área × Duración × Cantidad = Un Presupuesto. El presupuesto restringe lo que compite con la señal principal; la señal principal primero debe garantizarse visible a la distancia de visualización.
   • Los destellos de impacto y la retroalimentación de resultados deben ser cortos. Las advertencias son lo contrario: aparecen antes del suceso, dejan tiempo de reacción y se intensifican gradualmente a medida que se acercan.
   • La cantidad puede abrumar la imagen: cientos de balas o texto flotante en pantalla requieren limitación por cantidad. Los indicadores de área grande reducen el relleno y solo hacen visible el borde; cuando se superponen, toman la unión.
   • La UI persistente primero no debe obstruir la jugabilidad (alrededor del personaje, dirección de avance, próxima ubicación a operar), y luego ser estrecha, pequeña y pegada al borde. La UI en espacio mundial, como barras de salud y números de daño, cuenta para el presupuesto de la capa que etiquetan.
   • La seguridad contra destellos tiene prioridad sobre la jerarquía: "corto" no reduce el riesgo de fotosensibilidad. Los destellos de área grande no deben superar 3 veces por segundo, evitando destellos rojos saturados.
5. La comparación es local. Observa el elemento y el fondo más desfavorable con el que realmente hace contacto. Para elementos que pasan por fondos claros y oscuros, usa un contorno doble (uno claro y otro oscuro).
6. Orden para solucionar problemas: primero baja, luego cambia de canal, y solo al final sube. Primero retira la capa inferior que se ha salido de sus límites; luego considera darle a la señal un canal que la capa inferior no haya ocupado (matiz, forma, modo de aparición, posición); solo al final refuerza la capa superior. Después de bajar la capa inferior, vuelve a probar: los elementos que antes se separaban por "más oscuro que el fondo" podrían haberse pegado.
7. Cuidado con la inflación de mejoras. Los niveles máximos y la rareza alta se expresan mediante siluetas, piezas y animación, manteniéndose dentro del rango existente.

4. Entorno: Retroceder y Guiar

• Retroceder se logra simplificando, no suavizando: usa formas grandes y claroscuro en lugar de texturas de alto contraste y detalle fino. Desenfocar la imagen también puede bajar las métricas, pero el material se volverá irreconocible. Los cambios comunes son reducir la saturación, bajar el contraste del suelo y reducir las luces ambientales; a menudo no es necesario tocar el personaje primero.
• Guiar: los lugares transitables son más planos, más silenciosos y mantienen una diferencia de brillo estable con los bordes; los bordes son más oscuros y densos. Es un recordatorio suave, no una flecha.
• Dentro del entorno también hay jerarquía: el terreno relacionado con la jugabilidad se coloca en el borde superior del rango; la decoración pura en el medio. Las luces ambientales compiten con los carriles exclusivos; deben reducirse, oscurecerse o dárseles un significado de juego.

5. Unificación y Huellas Técnicas

• Todos los activos vuelven a una misma visión, con escala acorde al personaje. Cuanto mayor sea la variación de estilo entre personajes, más debe centrarse el entorno. Al evaluar un nuevo activo, colócalo junto a los personajes en los extremos del rango estilístico.
• La identidad estilística puede venir de un conjunto de contrastes de formas intencionados (suave vs. afilado), controlando la proporción de referencias realistas y elementos fantásticos.
• Los bordes de polígonos duros, costuras, repeticiones de teselado, parpadeos y texturas ásperas hiperrealistas atraen la atención sin transmitir información; deben ocultarse o convertirse en un estilo intencionado. Las rejillas, los bloques de píxeles y los contornos deliberadamente retenidos no cuentan.

6. Ajuste por Proyecto

• Oscuro / Terror: "Brillante" es un canal escaso. Varias señales se convertirán en puntos brillantes en la oscuridad; deben diferenciarse por forma, altura y dinámica; la información clave no debe colocarse solo en el rango más oscuro.
• Estilo caricatura brillante: Cuando ambos extremos están ocupados por el estilo, el lienzo retrocede al segmento medio, o se usa un contorno oscuro para separar a los personajes.
• 3D / Realista / Iluminación dinámica: El brillo final está determinado por el material, la iluminación y la cámara. Primero estima la iluminación, luego define el rango y mide en la imagen después del postprocesado. Consulta references/3d-lighting.md.
• Pixel art, paletas limitadas, LED, pantallas pequeñas: Consulta references/limited-palette.md.
• Diferencias en visión cromática: La jerarquía se basa principalmente en el brillo; los colores semánticos se acompañan de formas e iconos. Cuando se usan carriles exclusivos por matiz, mira las simulaciones para daltonismo rojo-verde.

7. Métodos de Revisión

Primero razona, luego mide. Primero usa las reglas anteriores y el sentido común de este tipo de proyecto para obtener un juicio: cómo se atenúa la luz, qué limitaciones tiene el dispositivo, cuándo toma decisiones el jugador. La medición solo sirve para responder preguntas específicas; no dejes que los gráficos y los números reemplacen el razonamiento.

• Primero verifica la evidencia: si la captura es anterior a la versión actual, si tiene capas de depuración superpuestas, si la iluminación y el postprocesado estaban activados al tomar la foto. El método está en references/evidence-and-measurement.md.

• Toma el peor caso: el momento más concurrido, el instante en que el jugador toma la decisión clave. Para señales instantáneas, mira el fotograma de inicio, no el pico de brillo total. Para cambios de estado, compara dos fotogramas de la misma cámara.

• Tres pruebas rápidas: ¿la jerarquía sigue presente en escala de grises?; ¿dónde cae primero el ojo después de desenfocar?; si pintas una capa de un color sólido, ¿aún se reconocen la pose y la dirección?

• Verifica las señales clave por canal: compara la señal de máxima prioridad con sus competidores reales en el contexto, canal por canal según la Sección 2.

• Medición: El script scripts/sv_profile.py en el directorio de esta habilidad informa por capa el área, el rango de saturación y brillo, el brillo percibido, la densidad de detalle, la pertenencia a carriles exclusivos y el contraste local. Soporta el espacio de color del proyecto, la comparación de dos fotogramas y GIFs de varios fotogramas. scripts/palette_check.py verifica las paletas en capas antes de empezar. Los parámetros se ven con -h, los métodos de lectura en el archivo de referencia anterior. La salida se escribe en un directorio temporal, no en el proyecto.

  python <directorio_de_habilidad>/scripts/sv_profile.py shot.png -o <directorio_temporal> -r "!environment:0,0,1,1" -r "player:0.42,0.40,0.50,0.55" -r "hud:0,0.88,1,1"
  

• Los fotogramas ilustrativos solo sirven para experimentos de control: si no hay capturas, puedes usar bloques de color para armar fotogramas, pero cambia una variable a la vez y la iluminación debe ser aproximadamente realista. Los números medidos en tus propios fotogramas no pueden ser considerados como "el estado actual" ni usarse para probar que tu solución cumple.

• Los números son solo evidencia: la conclusión final vuelve a "¿puede el jugador leer lo que necesita leer?". Cuando se requiera aprobación, escribe los indicadores de re-evaluación del jugador.

8. Salida

La revisión es de solo lectura por defecto: no se modifican activos, código ni documentación del proyecto; los cambios se escriben solo como sugerencias. Primero responde directamente a la pregunta del usuario; di lo mismo una sola vez.

• Revisión de capturas: Primero da una conclusión de una frase. Los hallazgos se ordenan por impacto en la jugabilidad: primero "dónde estoy, dónde está el enemigo, qué va a golpearme" y obstrucción de la UI; luego la competencia entre entorno y personajes por la atención; finalmente, el estilo y las huellas técnicas. Cada hallazgo escribe la ubicación, el fenómeno, el principio violado y el cambio mínimo.

• Comparación antes/después: Responde punto por punto si "lo que el jugador debe leer" ha mejorado o empeorado; separa el juicio sobre este conjunto de capturas de lo que se debe hacer con la versión actual.

• Diagnóstico solo textual: Da la causa más probable y el orden de investigación, proporciona al usuario comprobaciones que pueda ejecutar por sí mismo y pasos concretos en el motor, enumera también las posibles causas fuera de la imagen (duración, área de impacto, cámara, sonido).

• Elaboración de una especificación: Primero completa el ordenamiento de la Sección 1, luego escribe el rango de cada capa, la pertenencia a carriles exclusivos, las restricciones de área/duración/cantidad, y adjunta ejemplos de cumplimiento e incumplimiento. La especificación debe poder seguirse directamente:

  • Cubre cada tipo de elemento que el usuario haya mencionado;
  • Los valores se dan en las unidades del ejecutor (cuadrículas, píxeles, segundos, campos del motor) como valores de partida, marcados como "pendiente de pruebas reales"; no dejes de dar números solo porque no haya capturas;
  • Escribe el orden de renderizado y las reglas de programación: qué aplasta a qué, límite de superposición, cuándo limpiar;
  • Finalmente, enumera algunas líneas rojas y el orden de implementación.

  Si hay arte pero no hay capturas, pide al usuario que las proporcione para calibrar.

Reglas comunes:

• Si la evidencia es insuficiente, reduce las conclusiones, no te limites a mencionarlo al final; no extrapoles números de cosas que no están en la captura.
• Si no está claro el propósito de un elemento, búscalo primero en el proyecto; si no se encuentra, da una conclusión para dos posibilidades y pregunta al usuario.
• Cuando haya múltiples causas posibles, primero da un diagnóstico que pueda verificarse rápidamente en un paso, luego da soluciones para cada caso.
• Antes de dar soluciones, verifica qué se ha hecho y qué se ha rechazado en el proyecto. Como referencia, usa solo las especificaciones del proyecto o sus propios fotogramas de cumplimiento; no uses números de casos de referencia como estándar.
• No cambies el estilo artístico establecido del proyecto por tu cuenta; escribe los beneficios y costos en la sugerencia.