InicioDesarrollo de VideojuegosCampo de Visión — Vista de PNJ

👁️ Campo de Visión — Vista de PNJ

Simulación interactiva de campo de visión de PNJ mediante proyección de sombras. Coloca obstáculos, ajusta el ángulo y el alcance del FOV, y observa cómo se actualiza en tiempo real el polígono de visibilidad.

Desarrollo de Videojuegos3DFácil60 FPS
field-of-view ↗ Abrir independiente

👁️ Campo de Visión — Visibilidad de PNJ

Simulación interactiva de campo de visión mediante proyección de sombras. Coloca obstáculos en la escena, ajusta el ángulo del cono FOV y el alcance de visión, y observa cómo se recalcula el polígono de visibilidad en tiempo real.

🔬 Qué Demuestra

Los algoritmos de proyección de sombras calculan un polígono de visibilidad trazando rayos desde la posición del PNJ y recortándolos en los bordes de los obstáculos. El resultado es un FOV preciso que maneja correctamente la oclusión parcial, las esquinas y los obstáculos superpuestos.

🎮 Cómo Usar

Arrastra al PNJ por la escena. Haz clic para colocar o quitar obstáculos. Ajusta el deslizador de ángulo FOV (30°–360°) y el alcance. El polígono de visibilidad se actualiza al instante — las áreas brillantes son visibles, las oscuras están ocultas.

💡 ¿Sabías Que?

Los algoritmos de campo de visión son fundamentales en los juegos de sigilo (Metal Gear Solid, Hitman). Muchos roguelikes usan la variante de sombreado recursivo que procesa la cuadrícula octante por octante para un rendimiento máximo.

Sobre la Proyección de Sombras de Campo de Visión

Esta simulación muestra cómo un PNJ de un juego de sigilo calcula exactamente lo que puede ver. Desde la posición del PNJ, lanza rayos hacia cada esquina de obstáculo relevante y a lo largo de los bordes de su cono de visión, encontrando la intersección más cercana de cada rayo con el borde de un rectángulo o la pared límite usando una fórmula paramétrica de rayo-segmento. Conectar los puntos de impacto ordenados produce un polígono de visibilidad preciso que respeta la oclusión.

El deslizador de Ángulo establece el cono FOV de 20° a 360°, el deslizador de Alcance limita la visión a 60-500 px, y la velocidad del PNJ controla la tasa de auto-rotación. Mueves al PNJ verde, lo orientas haciendo clic, y dibujas o arrastras cajas grises como muros; el objetivo naranja se vuelve rojo cuando cae dentro del polígono. La misma idea impulsa la conciencia de los enemigos, las comprobaciones de línea de visión y la iluminación en muchos juegos 2D.

Preguntas Frecuentes

¿Qué muestra esta simulación?

Modela el campo de visión de un personaje no jugador en una escena 2D. El PNJ verde ve un cono de visión, y el polígono verde brillante marca exactamente qué áreas son visibles. Las cajas grises proyectan sombras que ocultan partes de la escena, y el objetivo naranja se marca cuando el PNJ puede verlo.

¿Qué es la proyección de sombras?

La proyección de sombras calcula un polígono de visibilidad trazando rayos desde el observador hacia afuera y deteniendo cada rayo en el primer obstáculo que golpea. El límite entre las regiones iluminadas y oscuras forma los bordes del polígono. Aquí el PNJ es la luz o el ojo, y las cajas bloquean los rayos, creando las áreas oscuras ocultas detrás de ellas.

¿Cómo se construye el polígono de visibilidad?

El código reúne el ángulo hacia cada esquina de obstáculo y de pared que se encuentra dentro del cono FOV, más un abanico de rayos límite a lo largo de los bordes del cono. Cada ángulo se lanza como un rayo, se recorta hasta el impacto más cercano o el alcance máximo, y los puntos resultantes se ordenan por ángulo y se unen en un polígono relleno que se abre en abanico desde el PNJ.

¿Qué hacen los deslizadores de Ángulo y Alcance?

El deslizador de Ángulo establece el ancho del cono de visión, desde un estrecho 20° hasta un círculo completo de 360°. El deslizador de Alcance establece hasta dónde puede ver el PNJ, entre 60 y 500 píxeles; los rayos se limitan a esta distancia incluso donde nada los bloquea, de modo que el polígono nunca se extiende más allá.

¿Qué controla el deslizador de velocidad del PNJ?

Cuando no estás interactuando, el PNJ gira lentamente para que puedas ver cómo su cono recorre la escena. El deslizador de velocidad, de 0 a 3, escala qué tan rápido gira esa auto-rotación. Ponerlo en 0 congela la dirección hacia la que mira. Hacer clic en el lienzo, arrastrar al PNJ o dibujar una caja desactiva la auto-rotación para que puedas apuntar manualmente.

¿Cuál es la ecuación clave detrás del lanzamiento de rayos?

Cada rayo se prueba contra cada segmento con una intersección paramétrica. Escribiendo el rayo como origen más t por dirección y el segmento como una línea, el solucionador calcula el determinante de los dos vectores de dirección; si no es cero, encuentra t a lo largo del rayo y u a lo largo del segmento, aceptando el impacto solo cuando t es positivo y u está entre 0 y 1.

¿Cómo decide si el objetivo es visto?

Se considera que el objetivo es visto cuando se cumplen tres condiciones: su distancia al PNJ está dentro del alcance, su rumbo cae dentro del medio ángulo del cono, y una prueba de punto en polígono lo sitúa dentro del polígono de visibilidad. Esa última prueba usa un conteo de cruces de rayos par-impar, por lo que una caja situada entre el PNJ y el objetivo lo oculta correctamente.

¿Es esto físicamente preciso?

Es un modelo geométrico 2D fiel de la línea de visión más que una simulación óptica completa. Las matemáticas de rayo-segmento son exactas para los obstáculos poligonales utilizados, por lo que la oclusión, las esquinas y las cajas superpuestas se manejan correctamente. Ignora efectos reales como la caída de luz, la difracción y la agudeza periférica, lo cual es apropiado para la IA de videojuegos, donde lo que más importa son decisiones de visibilidad nítidas.

¿Por qué lanzar rayos hacia las esquinas en lugar de a ángulos fijos?

Un polígono de visibilidad solo cambia de dirección en las esquinas de los obstáculos, así que lanzar rayos hacia cada esquina captura cada borde de silueta con muy pocos rayos. Lanzar a ángulos fijos e igualmente espaciados perdería características delgadas o desperdiciaría esfuerzo. Se añaden pequeños desplazamientos a cada lado de cada esquina para que los rayos puedan deslizarse justo más allá de un borde y revelar lo que hay detrás.

¿Dónde se usa esta técnica en videojuegos reales?

Los algoritmos de campo de visión y línea de visión sustentan títulos de sigilo como Metal Gear Solid y Hitman, donde los guardias deben reaccionar solo a lo que realmente pueden ver. La misma idea del polígono de visibilidad impulsa la iluminación dinámica 2D, la niebla de guerra en juegos de estrategia, y el sombreado recursivo utilizado por muchos roguelikes para revelar la mazmorra a medida que exploras.

⚙ Bajo el capó

Polígono de visibilidad por proyección de sombras para un PNJ de juego de sigilo. Lanza rayos hacia las esquinas de los obstáculos, ordena en abanico por ángulo, y traza la región visible exacta. Añade obstáculos rectangulares, ajusta el ángulo y alcance del FOV, arrastra para mover al PNJ.

Canvas 2DRaycastingProyección de SombrasVisibilidadDesarrollo de JuegosSigilo

3D · Renderizador Three.js / WebGL · Objetivo 60 FPS · funciona completamente del lado del cliente, sin instalación

¿Qué encontraste?

Añadir pasos de reproducción (opcional)