Volver

Halloween Manor

Un juego de Halloween para el navegador: eres el fantasma de una vieja mansión oscura y posees retratos, espejos y mecedoras para que los visitantes, linterna en mano, salgan despavoridos por la puerta principal. Los visitantes son la mascota Triboo con disfraces de Halloween, y se crearon con la API de Tripo, del disfraz a la animación.

Autor: Theodore
Pruébalo en vivo
Halloween ManorPruébalo en vivo

Descripción

Halloween Manor es un minijuego de Halloween que funciona directamente en el navegador. Eres el fantasma de una vieja mansión oscura: los visitantes entran por su cuenta, linterna en mano, y tu misión es poseer los objetos de la casa, elegir el momento justo para aparecerte y hacer que salgan gritando por la puerta principal, uno a uno. En la casa puede haber hasta cuatro visitantes a la vez —a veces llegan de dos en dos— y cada uno tiene su propio temple: las placas de nombre te dicen quién es un miedica y quién un escéptico.

Los objetos son de dos tipos. La caja de música y la puerta de la cocina son señuelos: hacen un ruido que atrae a cualquiera que lo oiga. Las lámparas, la mecedora, el retrato, el espejo de pie y, en el dormitorio, la cama y el armario son sustos, y solo funcionan si alguien está mirando: cuando alguien puede ver un objeto en ese momento, se enciende un ojo encima de él. La jugada básica es primero el señuelo y luego el susto: la caja de música se combina con la lámpara del dormitorio, y la puerta de la cocina, con la mecedora. El retrato muestra a una dama corriente hasta que lo posees: entonces sus ojos se giran y su cara se derrite hasta convertirse en algo horrible; una cara se abalanza desde el espejo de pie, y seis cuadros de terror cuelgan en las paredes del vestíbulo, el pasillo, el despacho, el salón y el dormitorio.

Los visitantes solo ven aquello a lo que apuntan con su linterna. Cuando un haz de luz cae sobre ti, te vuelves más denso y se paran a mirarte fijamente, pero eso por sí solo no los asusta. Pulsa F o haz clic derecho para aparecerte: las luces cercanas se atenúan dos veces, como bombillas a punto de fundirse, y 0,6 segundos después tomas la forma de una figura oscura y te mantienes así 1,5 segundos mientras alzas lentamente la cabeza. La aparición solo asusta a dos tipos de personas: a quien te esté apuntando con la linterna y a cualquiera que ya esté nervioso y pueda verte. Cuanto más miedo tengan, más fuerte es el impacto, así que usa primero los objetos para ponerles los nervios de punta y aparécete para rematar la faena. La aparición tiene un tiempo de recarga de 18 segundos.

Mantén pulsado el botón izquierdo del ratón sobre un objeto durante aproximadamente medio segundo para ponerle una trampa: la escarcha lo va cubriendo y la trampa salta sola cuando alguien se acerca. Puedes tener dos trampas a la vez, y cada trampa se desactiva si en 60 segundos no se acerca nadie. Cuando tu punto de mira está sobre un objeto, en el suelo se dibuja una tenue línea de escarcha que marca hasta dónde puede asustar (o atraer) a la gente, y un pequeño ojo delante del nombre de un visitante se enciende cuando tu próximo movimiento va a pillarlo. Después de actuar, la etiqueta junto al punto de mira te dice qué ha pasado: “Theo jumped” o “No one saw it”.

Cada partida es una noche de unos cinco minutos. El primer visitante entra al empezar y luego llega otro cada 12 segundos hasta que hay cuatro en la casa. En el minuto 3:20 la noche echa el cierre —se apaga la luz del porche y ya no viene nadie más— y en el minuto 4:30 amanece y quien siga dentro se marcha por su propio pie. Cuando se va el último, se abre el libro de visitas: cuándo entró cada uno, de qué huyó o si se marchó al amanecer, con una frase final que depende de a cuántos hayas espantado. No hay puntuación, ni victorias ni derrotas; elige Keep haunting para continuar o Another night para empezar de nuevo.

Controles: con ratón y teclado, el juego es en tercera persona y tú eres el fantasma. Haz clic para bloquear el ratón, flota con WASD (atravesando las paredes), mira alrededor con el ratón y acerca o aleja la cámara con la rueda. Haz clic en un objeto que esté a menos de 4 metros para poseerlo, mantén pulsado el botón izquierdo para poner una trampa y pulsa F o haz clic derecho para aparecerte. Esc libera el ratón y muestra todos los controles, M silencia el sonido y la calidad gráfica se ajusta en la esquina inferior derecha. No puedes ver a los visitantes a través de las paredes, así que guíate por sus pasos: los auriculares ayudan. En móviles y tabletas, la mansión se convierte en una casa de muñecas vista desde arriba: toca un objeto para poseerlo y gira la vista. En ese modo no hay apariciones, trampas ni cuadros: si vuelves a asustar a un visitante antes de que se calme, saldrá corriendo.

Se recomienda un navegador con WebGPU, como una versión reciente de Chrome o Edge; los navegadores sin WebGPU pasan automáticamente a WebGL2. Es para un solo jugador y no hace falta iniciar sesión ni descargar nada, aunque la primera carga tarda un poco porque hay que obtener los modelos y compilar los shaders. La interfaz del juego está en inglés.

Cómo se usó Tripo

Todos los personajes del juego —los visitantes con sus linternas y el fantasma que controlas— se crearon con la API de Tripo; la casa, los muebles y el atrezo se construyen mediante código a partir de formas básicas, y los cuadros, el retrato y la cara del espejo son texturas 2D independientes.

  • Visitantes: Triboo, la mascota de VAST, el equipo detrás de Tripo, con cuatro disfraces de Halloween: un vampiro victoriano, un explorador nocturno con farol, una bruja y un esqueleto dibujado a mano. Primero, con imagen a imagen de Tripo se coloca a Triboo en una pose en T, y los cuatro disfraces parten de esa misma imagen, así que las proporciones coinciden y las figuras se riggean sin problemas; una segunda pasada de imagen a imagen añade el disfraz conservando el cuerpo negro y redondo, el logo frontal y las zapatillas amarillas, con un atuendo hecho como los accesorios de un juguete de vinilo: sombreros, capas y cuellos.
  • Modelos de los visitantes: cada imagen de disfraz se convierte en cuatro vistas y, a partir de ellas, se genera con multivista a 3D de Tripo un modelo con texturas PBR. En tercera persona ves a los visitantes casi siempre de espaldas, y las cuatro vistas hacen que las capas y los chales queden bien resueltos por detrás; a las texturas se les quita la iluminación horneada para que sean las lámparas y las linternas del juego las que iluminen.
  • Rigging y animación: tras una verificación de rigabilidad, el rigging automático de Tripo ajusta un esqueleto humanoide y se aplican ocho animaciones predefinidas de Tripo: reposo, caminar, correr, mirar alrededor, tener miedo, huir y dos tipos de sobresalto. Antes de exportar, un script de Blender retoca a todos los visitantes de la misma manera: el cuerpo esférico, el sombrero y la capa se mueven en bloque con el torso, los accesorios junto a las piernas no se estiran con ellas, se limita el número de triángulos y se elimina el root motion. Cada visitante ocupa unos 1,1–1,7 MB, con texturas WebP.
  • El fantasma: con texto a imagen de Tripo se generaron cuatro imágenes conceptuales, y la elegida pasó por imagen a 3D de Tripo para convertirse en un modelo blanco sin texturas: la niebla fría y translúcida, cómo se densifica bajo el haz de una linterna y la figura oscura y sólida que adopta al aparecerse, todo eso lo dibujan los propios shaders del juego, así que no necesita texturas. Después, una limpieza en Blender hundió la cara del interior de la capucha hasta convertirla en un hueco profundo, redujo el modelo a menos de 8.000 triángulos y horneó la oclusión en los vértices, de modo que el interior de la capucha y los pliegues profundos se oscurecen.

Cómo funciona en el navegador

No hay motor de juego: el juego está construido directamente sobre el renderizador WebGPU de three.js, con TypeScript y Vite, y pasa automáticamente a WebGL2 en los navegadores sin WebGPU. Una vez compilado, es un conjunto de archivos estáticos con rutas relativas, así que se abre desde cualquier subruta de cualquier hosting estático.

Las linternas son las luces más importantes de la casa: cada visitante lleva una, y cada una proyecta sus propias sombras. El shader del fantasma calcula, píxel a píxel, en qué conos de luz de las linternas se encuentra: dentro de un haz se densifica, su contorno se vuelve más nítido y toma un poco del tono cálido de la linterna, mientras que fuera sigue siendo niebla fría. Al aparecerse, cambia a un material oscuro “sólido” que bloquea la luz y escribe en el búfer de profundidad, algo más iluminado por el lado en el que le da una linterna. Cuando el fantasma atraviesa paredes y muebles, estos se disuelven a su alrededor con escarcha en los bordes.

Todo el sonido se sintetiza en vivo con Web Audio: en el juego no hay ni un solo archivo de audio. Los gritos, el crujido de la mecedora, el zumbido eléctrico de la lámpara, la caja de música, el golpe sonoro cuando la cara del espejo se abalanza y el sonido ambiente de la casa se generan todos mediante código. Cuando no puedes ver a nadie a través de las paredes, son los pasos los que te permiten encontrarlos.

El botón de inicio espera a que estén listos la casa, el disfraz del primer visitante y una precompilación de shaders de toda la casa; haz clic y la noche empezará en unos 20 milisegundos. Los demás disfraces se descargan en segundo plano mientras juegas y se incorporan a la rotación en cuanto se compilan sus pipelines. El parpadeo de las luces está limitado para proteger a las personas fotosensibles: ninguna luz se atenúa más de tres veces en un mismo segundo. La calidad gráfica puede ser alta o baja, y en baja se renderiza al 75 % de la resolución.