Tutorial paso a paso: construye un mundo de survival horror desde cero
TIP
Este tutorial usa los gestos del lienzo de Primeros pasos en el lienzo: hacer clic en una fila para abrirla, la fila Puedes añadir abajo en la carta y Jugar en la barra superior. Si aún no la has leído, empieza por esa página.
Vamos a construir un juego de survival horror inspirado en "No, I'm not a Human". La premisa es simple: el apocalipsis ha llegado, y afuera hay «Visitantes» disfrazados de humanos. Estás solo en casa, y cada noche alguien viene a llamar. Mira por la mirilla para juzgar si son humanos o monstruos, toma tu decisión y sobrevive 14 noches.
Por el camino usarás lore, variables, una interfaz escrita por la IA y lore por palabra clave.
Paso 1: Crear un nuevo mundo
Pulsa Crear a la izquierda, elige Proyecto en blanco y luego Lienzo. Después escribe el nombre en el campo de arriba a la izquierda, junto al interruptor Lienzo:
- Nombre:
The Imposters
Paso 2: Escribir la entrada de configuración del personaje
En este juego, la IA no interpreta a un personaje: hace de Game Master (GM), se encarga de narrar las escenas, interpretar a todos los NPC y empujar la historia. Así que la primera entrada le dice a la IA cuál es su papel y qué le toca hacer.
Haz clic en la fila bajo Personaje y mundo para abrirla.
| Campo | Valor |
|---|---|
| Nombre | Configuración del Game Master |
| Enviar como | Instrucción (la opción por defecto; la IA lo trata como una regla a seguir) |
En el campo Contenido, escribe:
Eres un GM de juego de survival horror justo e imparcial. El juego dura 14 días (14 noches).
Ambientación: El apocalipsis ha comenzado. La ciudad está invadida por «Visitantes», entidades que se ven exactamente como humanos. El jugador está solo en casa. Cada noche, alguien llama a la puerta pidiendo ayuda. El jugador debe observar por la mirilla, hablar a través de la puerta y usar distintos métodos para juzgar si el visitante es humano o un monstruo, y luego decidir si abre la puerta.
Tus responsabilidades:
- Cada noche, describe la apariencia y el comportamiento de quien llama
- Da pistas con justicia sin revelar directamente su identidad
- Durante el día, deja que el jugador explore libremente el apartamento, use objetos y haga llamadas
- Mantén una atmósfera de suspenso y tensión
- Al final de cada respuesta, ofrece 3–5 opciones sugeridas (en formato A/B/C/D/E)
Comienza cada respuesta con un encabezado de fase:
- Noche: 🌑 **NOCHE X**
- Día: ☀️ **DÍA X**Algunos puntos clave:
- Esta entrada está en Personaje y mundo → se envía a la IA en cada turno. La configuración central tiene que ir aquí
- Enviar como = Instrucción → la IA lo trata como una directiva de sistema, no como diálogo de personaje. Enviar como está en Cuándo lo ve la IA → Avanzado, pero no hay nada que cambiar
Paso 3: Escribir el mensaje de apertura
Haz clic en el cuadro bajo la apertura (Saludo) y escribe:
🌑 **NOCHE 1**
La pantalla del televisor parpadea con estática. Una emisión de emergencia repite con voz mecánica la misma advertencia: «…Características confirmadas del Visitante: dientes antinaturalmente uniformes y blancos como porcelana. Se aconseja a los residentes extremar la precaución y evitar abrir la puerta a desconocidos…»
Estás solo en el apartamento. Es un lugar modesto: baño, salón, dormitorio, estudio, cocina y una despensa. Hay una mirilla en la puerta principal. La despensa tiene una pistola. El estudio tiene un teléfono fijo. La nevera tiene comida para unos días.
Fuera de la ventana, la calle está desierta. O al menos, eso parece.
Entonces llegan los golpes.
***Toc… toc… toc.***
La voz de una mujer joven se filtra por la puerta, temblorosa y al borde del llanto: «Por favor… déjame entrar… hay algo ahí fuera persiguiéndome…»
**Opciones sugeridas:**
A. Abrir la puerta y dejarla entrar
B. Hablar con ella a través de la puerta y hacerle algunas preguntas
C. Negarte y decirle que se vaya
D. Mirar por la mirilla para observarla con cuidado
E. Otra (escribe cualquier acción que quieras tomar)Los elementos clave de una buena apertura:
- Le dice de inmediato al jugador dónde está y qué ocurre
- Detalla qué recursos y entorno hay disponibles
- Termina con una decisión que obliga al jugador a actuar de inmediato
Paso 4: Crear las variables del juego
Pulsa ＋ Variable en la fila Puedes añadir, abajo en la carta. Hazlo 5 veces, una por cada variable de abajo. En cada una, cambia el nombre de arriba, elige el Tipo, pon el Valor inicial y el Rango, y escribe las Reglas de comportamiento.
El ID es lo que usa el código de la interfaz del Paso 6 para leer la variable. Las variables nuevas reciben un ID aleatorio, así que abre Avanzado al final de los ajustes de la variable, escribe el ID de la tabla y pulsa Aplicar.
1. Vida
| Campo | Valor |
|---|---|
| Nombre | Player HP |
| Tipo | Número |
| Valor inicial | 3 |
| Rango | de 0 a 5 |
| Reglas de comportamiento | Disminuye en 1 cuando el jugador es atacado por un Visitante o comete un error fatal. Cae directamente a cero si el jugador deja entrar al Desconocido Pálido o admite estar solo. Game over a 0. |
| ID (en Avanzado) | player_hp |
2. Energía
| Campo | Valor |
|---|---|
| Nombre | Energy |
| Tipo | Número |
| Valor inicial | 3 |
| Rango | de 0 a 8 |
| Reglas de comportamiento | Registrar a un visitante y disparar cuestan 1 punto cada uno. Observar por la mirilla y hablar son gratis. Se restaura al máximo durante el día. No se pueden realizar acciones que consuman energía cuando la energía es 0. |
| ID (en Avanzado) | energy_current |
3. Día
| Campo | Valor |
|---|---|
| Nombre | Game Day |
| Tipo | Número |
| Valor inicial | 1 |
| Rango | de 1 a 14 |
| Reglas de comportamiento | Aumenta en 1 después de cada ciclo completo noche-día. El juego concluye cuando termina el Día 14. |
| ID (en Avanzado) | game_day |
4. Fase
| Campo | Valor |
|---|---|
| Nombre | Game Phase |
| Tipo | Texto |
| Valor inicial | Night |
| Valores permitidos | Night, Day |
| Reglas de comportamiento | El valor es "Night" o "Day". La noche es para manejar los eventos de llamadas a la puerta; el día es para explorar libremente las habitaciones y usar objetos. |
| ID (en Avanzado) | game_phase |
5. Estado armado
| Campo | Valor |
|---|---|
| Nombre | Has Gun |
| Tipo | Interruptor |
| Valor inicial | activado (true) |
| Reglas de comportamiento | El jugador empieza con una pistola. Disparar a un visitante cuesta 1 de energía pero puede herir accidentalmente a un humano. Describe las consecuencias tras un disparo. |
| ID (en Avanzado) | player_has_gun |
¿Qué son las Reglas de comportamiento?
Las Reglas de comportamiento no son código: son instrucciones en lenguaje natural escritas para la IA. Le dicen cuándo actualizar qué variable. Piénsalas como una «chuleta» para la IA φ(>ω<*)
Paso 5: Cómo cambian realmente las variables
Todas las variables que acabas de crear tienen activado el Seguimiento preciso. Las variables nuevas de tipo Número e Interruptor lo traen activado, y una de tipo Texto lo tiene en cuanto le pones Valores permitidos. Verás una etiqueta «preciso» en cada fila.
Con el Seguimiento preciso activado, la IA que escribe la historia no cambia estos valores por su cuenta. Después de cada respuesta, un pequeño ayudante vuelve a leer la escena, la compara con tus Reglas de comportamiento y decide si cada valor debe cambiar y cuánto. Los números se mueven como mucho lo que digan Máximo que baja por turno / Máximo que sube por turno. Empiezan en 10, más de lo que necesita este juego. Pon que Game Day suba como máximo 1 por turno y deja el resto como está.
Así que cuanto más claras escribas las reglas de comportamiento, mejor funciona el seguimiento. Vuelve y revisa las reglas que escribiste en el Paso 4. Asegúrate de que cada variable diga claramente «cuándo cambia y cómo».
Si desactivas el Seguimiento preciso en una variable, la cambia la IA de la historia, escribiendo una directiva corta al final de su respuesta. El motor le enseña ese formato a la IA por su cuenta.
¿Cómo se ven las directivas en la salida de la IA?
Al final de la respuesta de la IA verás algo como:
[player_hp: -1]
[energy_current: -1]Estas son las directivas. El motor las extrae y aplica automáticamente, y nunca aparecen en la respuesta que ve el jugador.
Más sintaxis de directivas
Además de + (sumar) y - (restar), también está set (fijar a un valor concreto), toggle (invertir un booleano) y más. Ver → Directivas y Macros de IA
Paso 6: Que se vea bien: interfaz generada por IA
A estas alturas tu mundo ya se puede jugar, pero el jugador solo ve texto plano. Vamos a montar una interfaz con ambiente de juego de terror de verdad, y que el código lo escriba la IA.
Método 1: Usa el Asistente IA (recomendado)
- Pulsa Asistente IA, a la derecha de la segunda fila de la barra superior
- Comprueba que el modo bajo el cuadro de texto sea Construir
- Envíale lo siguiente (puedes copiarlo directamente):
Reescribe el componente raíz (index.tsx) como una UI de survival horror post-apocalíptico.
Inspírate en el estilo de «No, I'm not a Human».
Mantén la cáscara externa como `<Chat renderBubble={(msg) => ...} />`: deja que la plataforma siga
manejando el cuadro de entrada, el cursor de streaming y los swipes; nosotros solo tomamos el estilo de las burbujas.
Necesito estos efectos:
1. Título de fase:
- Si la respuesta de la IA contiene «🌑 **NOCHE X**», extráelo y renderízalo como una barra de título estilo monitor CRT
(texto verde oscuro brillante, efecto de scanlines, parpadeo sutil)
- Si contiene «☀️ **DÍA X**», renderízalo como una barra de título en tono cálido (texto ámbar)
- Quita el título del cuerpo del mensaje y muéstralo por separado
2. Efecto de golpes:
- Si la respuesta contiene ***texto en negrita cursiva*** (triple asterisco), extráelo y renderízalo como
una animación de golpes: texto rojo grande con efecto de temblor
3. Barra de estado HUD inferior:
- Fuente monoespaciada, fondo verde oscuro
- Muestra: ⚡ Energía (variable energy_current), ❤️ Vida (variable player_hp),
🔫/🚫 estado armado (variable player_has_gun)
- Visualización compacta de una línea
4. Área de texto narrativo:
- Fondo oscuro (verde-negro profundo), leve resplandor en el borde
- Texto verde claro, interlineado generoso para legibilidad
- Renderizado con renderMarkdown
5. Botones de opción:
- Si la respuesta de la IA contiene «Opciones sugeridas:» o «**Tus opciones:**», extrae las opciones
(A. B. C. D. E.) y renderízalas como botones clicables
- Al hacer clic, envía automáticamente la opción correspondiente
- Tonos verde oscuro, más brillantes al pasar el cursor
6. Ambiente general: estética de monitor CRT negro-verde, baja saturación, sensación opresiva de fin del mundo
Mis variables:
- player_hp: vida, number, 0–5
- energy_current: energía, number, 0–8
- game_day: día actual, number, 1–14
- game_phase: "Night" o "Day"
- player_has_gun: si está armado, true/false- El asistente escribe el código en Paneles → Código de frontend. Pulsa Interfaz del jugador, en el centro de la barra superior, para ver el resultado
- ¿Quieres cambios? Sigue hablando: «haz el efecto de los golpes más dramático» o «los botones de opción están demasiado separados». Si una ronda sale mal, pulsa Deshacer este turno en la barra El último turno del asistente, abajo en el lienzo
Método 2: Usa una IA externa (Claude, ChatGPT, etc.)
Si prefieres usar otra IA, tienes dos formas.
Conéctala a tu carta. Pulsa Conecta tu IA en la barra superior y sigue los pasos. Una vez conectada, tu IA edita la carta directamente y puedes enviarle la petición de arriba tal cual. Mira Conecta tu propia IA.
Pega tú el código. Envía la descripción de efectos de arriba junto con la información técnica de Yumina al final:
Información técnica de Yumina (sigue estas reglas al escribir código):
- Componente raíz: exporta `export default function MyWorld() { return <Chat renderBubble={(msg) => ...} /> }`
- `<Chat />` es el bloque de chat que provee la plataforma: maneja el cuadro de entrada, la lista de
mensajes, el cursor de streaming; nosotros solo personalizamos cada burbuja vía renderBubble
- Dentro de renderBubble, el objeto msg expone: `contentHtml` (HTML pre-renderizado), `rawContent`
(texto crudo), `role` ("user" / "assistant"), `messageIndex`, `isStreaming`,
`renderMarkdown(text)` (convierte markdown en HTML formateado)
- useYumina() te da las variables, p. ej. useYumina().variables.player_hp
- useYumina().sendMessage(text) envía un mensaje como el jugador (para opciones clicables)
- Librería Icons integrada (sin import), p. ej. Icons.Heart, Icons.Zap
- Tailwind CSS y React hooks soportados
- Inyecta animaciones con useEffect + document.createElement("style")
- React, Chat, useYumina, Icons están todos disponibles globalmente en el sandbox, sin importsUna vez que tengas el código:
- Abre Paneles → Código de frontend y selecciona
index.tsx - Pega el código (reemplaza el
return <Chat />por defecto) - Si el panel muestra OK, ya está
No necesitas entender el código
Mientras el panel muestre OK después de pegar, funciona. Si muestra Error, envíale el mensaje de error a la IA tal cual y pídele que lo arregle.
¿Y si el resultado no es lo que querías?
Díselo a la IA directamente: «la barra de vida es muy fina, hazla más gruesa», «cambia el fondo a negro puro», «añade un efecto de parpadeo». Con unas pocas vueltas suele quedar bien.
Paso 7: Escribir lore por palabra clave
La entrada de configuración del Paso 2 se envía en cada turno. Hay información que solo tiene que llegar a la IA cuando viene al caso, y para eso está el lore por palabra clave.
Pulsa el ＋ de arriba a la derecha del bloque Personaje y mundo para añadir una entrada nueva. Ábrela y luego abre Cuándo lo ve la IA: desmarca Enviar siempre y escribe las palabras en Palabras clave. La entrada pasa al bloque Lore por palabra clave. Crea estas tres:
1. Reglas de las llamadas a la puerta
| Campo | Valor |
|---|---|
| Nombre | Evento de llamada |
| Enviar como | Instrucción |
| Palabras clave | puerta, tocar, abrir, golpe |
Reglas del evento de llamada a la puerta:
- Cada noche hay 2–3 visitantes, apareciendo uno por uno
- Opciones del jugador: observar por la mirilla (gratis), hablar a través de la puerta (gratis), pedir un registro corporal (cuesta energía), abrir o rechazar
- Dejar entrar a un humano = puede dar ayuda | Dejar entrar a un Visitante = peligroso
- Mantén las descripciones con suspenso al retratar las escenas de llamada; nunca reveles la identidad directamente2. Observación por la mirilla
| Campo | Valor |
|---|---|
| Nombre | Observación por la mirilla |
| Enviar como | Instrucción |
| Palabras clave | mirilla, espiar, observar, mirar |
Reglas de observación por la mirilla:
- Solo se ve la cabeza y la parte superior del cuerpo del visitante
- Centra las descripciones en: expresión facial, dientes, ojos, textura de la piel
- Los disfraces de los Visitantes tienen fallos sutiles (dientes antinaturalmente uniformes, pupilas anormales, textura de piel extraña)
- Los humanos tienen imperfecciones normales (caries, ojeras, cicatrices)
- Nunca reveles la identidad directamente; describe solo lo que se ve3. Búsqueda en las habitaciones
| Campo | Valor |
|---|---|
| Nombre | Búsqueda de habitación |
| Enviar como | Instrucción |
| Palabras clave | buscar, revisar, registrar, explorar, habitación |
Reglas de búsqueda en las habitaciones (solo de día):
- Despensa: se puede encontrar la pistola
- Cocina: provisiones de comida, puede restaurar algo de energía
- Estudio: teléfono, se puede llamar para obtener información
- Describe detalles del entorno para crear inquietud¿Cómo funciona el disparo por palabras clave?
Antes de cada respuesta de la IA, el motor revisa los mensajes recientes. Si aparece una palabra clave → la entrada correspondiente se envía a la IA en ese turno. Si nadie la mencionó → la IA no la ve y no gasta presupuesto de tokens.
Cuántos mensajes recientes se revisan lo decide Alcance de palabras clave: pulsa Context, abajo en la carta, y abre Avanzado. Por defecto es 2; para este juego va mejor 4.
Paso 8: Probarlo
Pulsa Jugar, a la derecha de la barra superior. La prueba abre una partida de verdad con el modelo que elegiste, así que gasta saldo. Juega unos turnos y comprueba lo siguiente. Este turno, a la derecha, te cuenta lo que pasó detrás de cada uno.
| Qué comprobar | Cómo verificarlo | Si no funciona |
|---|---|---|
| Aparece el mensaje de apertura | El primer mensaje se muestra automáticamente al entrar | Comprueba que la apertura (Saludo) tenga texto |
| La UI personalizada está activa | Los mensajes tienen un título de fase estilo CRT y un HUD | Comprueba que index.tsx en Paneles → Código de frontend tenga el código renderBubble y muestre OK |
| Los valores cambian | Los valores del HUD se actualizan tras las interacciones; Cada valor, en Este turno, dice por qué un valor cambió o no | Comprueba que las Reglas de comportamiento de cada variable estén escritas con claridad |
| El lore por palabra clave se dispara | Mencionar «mirilla» hace que la IA siga las reglas; la entrada aparece en Lo que recibió la IA, dentro del lore mencionado este turno | Comprueba la ortografía de las palabras clave y el Alcance de palabras clave |
Cuando termines, pulsa Detener para volver al lienzo.
Paso 9: Rellenar los datos de la carta
Pulsa Portada y resumen, a la derecha del lienzo. Se abren los Ajustes de la carta:
- Sube una Imagen de portada (algo que transmita la atmósfera de terror). Necesitas una versión vertical Móvil · 2:3 y una horizontal Escritorio · 16:9
- Escribe una Descripción para que los jugadores sepan en qué se meten
- Configura el Idioma: elige el idioma en que está escrito tu mundo (p. ej.,
Español) - Pulsa Guardar en la barra superior
Paso 10: Publicar
- Pulsa No publicado, a la derecha de la barra superior. Te repasa una lista corta: un nombre, una portada, una apertura y al menos una prueba
- Pulsa Publicar. En el diálogo, añade Etiquetas (
horror,survival,misterio,ficción interactiva), elige el Modo de contenido (Limitado o Sin límites), la visibilidad y si otros pueden hacer copias editables - Confirma que tienes los derechos del contenido y pulsa Publicar
Tu mundo pasa a revisión. Cuando la supere, los jugadores podrán encontrarlo en Descubrir ヽ(✿ﾟ▽ﾟ)ノ
Lo que has aprendido
| Concepto | Lo que hiciste |
|---|---|
| Lore | Escribiste la configuración del GM y un mensaje de apertura, la base del comportamiento de la IA |
| Variables | Creaste vida, energía, contador de días, fase y estado armado, con seguimiento preciso después de cada respuesta |
| Reglas de comportamiento | Le dijiste al seguimiento (o a la IA), con palabras normales, cuándo cambia cada valor |
| Interfaz | Hiciste que la IA generara una interfaz estilo CRT, sin escribir código tú |
| Lore por palabra clave | Entradas de reglas que solo llegan a la IA cuando se mencionan |
Qué más puedes hacer
- Comportamientos: dispara automáticamente un final de muerte cuando la vida llega a 0, sin depender de que la IA se acuerde
- Guía de UI personalizada: convierte los mensajes en burbujas de diálogo, escenas de novela visual o registros de combate
- Audio: añade BGM y efectos de sonido, y cambia automáticamente a música inquietante al bajar al sótano
- Lore condicional: envía lore según los valores de las variables, como revelaciones de la trama al final
Ve a yumina.io y busca «No, I'm not a Human» para jugar la versión completa.