Tutorial paso a paso: construye un Mundo de horror de supervivencia desde cero
Vamos a construir un juego de supervivencia de horror inspirado en "No, I'm not a Human". La premisa es simple: el apocalipsis ha llegado, y afuera hay "Visitors" 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.
Termina este tutorial y tendrás un dominio sólido de las habilidades principales de creación de Yumina: Entradas, Variables, Directivas, Componentes y el Lorebook. Cualquier tipo de Mundo que quieras construir en el futuro, aquí es donde comienza (•̀ᴗ•́)و
Paso 1: Crear un nuevo Mundo
Haz clic en el botón Create en la navegación izquierda, luego selecciona Blank Project. En el editor, rellena el nombre del Mundo en el campo de entrada superior:
- Nombre:
The Imposters
Si aún no estás familiarizado con las secciones del editor, lee Cómo funciona primero y luego vuelve aquí.
Paso 2: Escribe la Entrada de configuración del personaje
Haz clic en Lorebook en la navegación izquierda.
Verás varios grupos a la izquierda. PRESETS ya tiene algunas Entradas por defecto de Yumina (Fiction Mode, Task, Instructions, etc.). Estas son instrucciones por defecto para ayudar a regular el comportamiento de la IA. Puedes ignorarlas por ahora y revisarlas cuando estés más familiarizado con el sistema.
Vamos a crear nuestra propia Entrada. Asegúrate de estar bajo el grupo PRESETS y haz clic en + Add Entry en la esquina superior derecha.
En este juego, la IA no está interpretando a un personaje: actúa como el Game Master (GM), responsable de narrar escenas, interpretar a todos los NPC y llevar adelante la historia. Así que la primera Entrada le dice a la IA su rol y responsabilidades.
| Campo | Valor |
|---|---|
| Nombre | Game Master Setup |
| Enviar como | Instruction (la IA trata esto como una regla a seguir) |
| Etiquetas | Haz clic en Preset |
En el campo Content, escribe:
Eres un GM justo e imparcial de un juego de horror de supervivencia. El juego dura 14 días (14 noches).
Ambientación: El apocalipsis ha comenzado. La ciudad está invadida por "Visitantes" — entidades que parecen exactamente 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 varios métodos para juzgar si el visitante es humano o un monstruo, y luego decidir si abrir la puerta.
Tus responsabilidades:
- Cada noche, describe la apariencia y 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 telefónicas
- 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á bajo PRESETS → siempre se envía a la IA, visible en cada conversación. Las configuraciones principales deben ir aquí
- Send as = Instruction → la IA trata esto como una Directiva del sistema, no como diálogo de personaje
- Tag = Preset → para fines organizativos
Esta Entrada es la "constitución" de tu juego: define todo sobre cómo se comporta la IA.
Paso 3: Escribe el mensaje inicial
Cambia a la sección First Message y haz clic en Add Greeting. (Alternativamente, crea una nueva Entrada con role: greeting en el Lorebook: mismo efecto.)
**Noche 1**
La pantalla del televisor parpadea con estática. Una emisión de emergencia retumba con voz mecánica, repitiendo la misma advertencia: "…Características confirmadas de los Visitantes: dientes anormalmente uniformes y blancos como porcelana. Se aconseja a los residentes ser cautelosos y evitar abrir la puerta a personas desconocidas…"
Estás solo en el apartamento. Es un lugar modesto — baño, sala, dormitorio, estudio, cocina y un trastero. Hay una mirilla en la puerta principal. El trastero 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 en la puerta.
***Toc… toc… toc.***
La voz de una joven se filtra por la puerta, temblorosa y entre lágrimas: "Por favor… déjame entrar… hay algo ahí afuera 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. Negarse y decirle que se vaya
D. Mirar por la mirilla para observarla con atención
E. Otra (escribe cualquier acción que quieras realizar)Los elementos clave de una buena apertura:
- Le dice inmediatamente al jugador dónde está y qué está pasando
- Explica qué recursos y entorno están disponibles
- Termina con una decisión que obliga al jugador a actuar de inmediato
Paso 4: Crea Variables del juego
Cambia a la sección Variables y haz clic en Add Variable. Crea 5 Variables.
1. Salud
| Campo | Valor |
|---|---|
| ID | player_hp |
| Nombre visible | PV del jugador |
| Tipo | Number |
| Valor por defecto | 3 |
| Mín | 0 |
| Máx | 5 |
| Reglas de comportamiento | Disminuye en 1 cuando el jugador es atacado por un Visitor o comete un error fatal. Baja directamente a cero si el jugador deja entrar al Pale Stranger o admite estar solo. Game over a 0. |
2. Energía
| Campo | Valor |
|---|---|
| ID | energy_current |
| Nombre visible | Energía |
| Tipo | Number |
| Valor por defecto | 3 |
| Mín | 0 |
| Máx | 8 |
| Reglas de comportamiento | Hacer un cacheo a un visitante y disparar cuestan 1 punto cada uno. La observación 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. |
3. Conteo de días
| Campo | Valor |
|---|---|
| ID | game_day |
| Nombre visible | Día del juego |
| Tipo | Number |
| Valor por defecto | 1 |
| Mín | 1 |
| Máx | 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. |
4. Fase
| Campo | Valor |
|---|---|
| ID | game_phase |
| Nombre visible | Fase del juego |
| Tipo | String |
| Valor por defecto | Night |
| Reglas de comportamiento | El valor es "Night" o "Day". Night es para manejar eventos de llamadas a la puerta; Day es para explorar libremente las habitaciones y usar objetos. |
5. Estado de armado
| Campo | Valor |
|---|---|
| ID | player_has_gun |
| Nombre visible | Tiene pistola |
| Tipo | Boolean |
| Valor por defecto | True |
| Reglas de comportamiento | El jugador empieza con una pistola. Disparar a un visitante cuesta 1 de energía pero puede dañar accidentalmente a un humano. Describe las consecuencias después de un disparo. |
¿Qué son las Reglas de comportamiento?
Las Reglas de comportamiento no son código: son instrucciones en lenguaje natural escritas para la IA. Cuando la IA genera una respuesta, las lee para saber cuándo actualizar qué Variable. Piénsalo como una "chuleta" para la IA φ(>ω<*)
Paso 5: Cómo cambian realmente las Variables
Te estarás preguntando: ahora que las Variables están configuradas, ¿cómo sabe la IA cuándo cambiarlas?
Buenas noticias: no necesitas enseñarle a la IA manualmente. Mientras tu Mundo tenga Variables, el motor de Yumina automáticamente hace dos cosas:
- Le dice automáticamente a la IA el formato de Directiva: el motor silenciosamente le pasa a la IA un conjunto de instrucciones en cada turno, diciéndole que use la sintaxis
[variableID: operation value]para actualizar el estado. No necesitas hacer nada para esto. - Envía automáticamente tus reglas de comportamiento a la IA: las reglas que escribiste para cada Variable en el Paso 4 son visibles para la IA en cada turno. Las usa para decidir cuándo actualizar qué.
Por ejemplo: en las reglas de comportamiento de la Variable health, escribiste "disminuye cuando es atacado por un Visitor o cuando el jugador toma una decisión peligrosa". Cuando un jugador es atacado en el juego, la IA incluirá [health: -20] al final de su respuesta. El motor detecta esto y automáticamente baja la salud de 100 a 80.
Así que cuanto más claras escribas las reglas de comportamiento, mejor rendirá la IA. Vuelve a revisar las reglas que escribiste en el Paso 4. Asegúrate de que cada Variable especifique claramente "cuándo cambia y cómo".
¿Cómo se ven las Directivas en la salida de la IA?
Al final de la respuesta de la IA verás algo como:
[health: -20]
[energy: -15]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 (establecer a un valor específico), toggle (invertir un booleano) y más. Consulta → Directivas y Macros de IA
Paso 6: Hazlo verse genial: interfaz generada por IA
En este punto tu Mundo es jugable. Pero todo lo que ve el jugador es texto plano: sin atmósfera, sin inmersión. Vamos a construir una interfaz con una verdadera sensación de juego de horror.
"¿Escribir código?" Nop, deja que la IA lo haga por ti (￣▽￣)ノ
Método 1: Usar el Studio AI integrado de Yumina (recomendado)
- Haz clic en Enter Studio en la parte superior del editor
- Abre el panel del Asistente de IA
- Envíale lo siguiente (puedes copiar esto directamente):
Reescribe el root component (index.tsx) como una UI de supervivencia de horror postapocalíptico.
Toma como referencia el estilo de "No, I'm not a Human".
Mantén la cubierta externa como `<Chat renderBubble={(msg) => ...} />` — deja que la plataforma siga
manejando el cuadro de entrada, el cursor de streaming y los swipes; solo tomamos el control del 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 líneas de escaneo, parpadeo sutil)
- Si contiene "☀️ **DÍA X**", renderízalo como una barra de título de tono cálido (texto ámbar)
- Quita el título del cuerpo del mensaje — muéstralo por separado
2. Efecto de golpes en la puerta:
- Si la respuesta contiene ***texto en negrita cursiva*** (triple asterisco), extráelo y renderízalo como
una animación de golpes en la puerta — texto rojo grande con efecto de temblor
3. Barra de estado HUD inferior:
- Fuente monoespaciada, fondo verde oscuro
- Mostrar: ⚡ Energía (variable energy_current), ❤️ PV (variable player_hp),
🔫/🚫 estado armado (variable player_has_gun)
- Visualización compacta en una sola línea
4. Área de texto narrativo:
- Fondo oscuro (verde-negro profundo), brillo sutil en el borde
- Texto verde claro, interlineado generoso para facilitar la lectura
- Renderizado con renderMarkdown
5. Botones de elecció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 brillante al pasar el cursor
6. Atmósfera general: estética de monitor CRT negro-verde, baja saturación, sensación opresiva de fin del mundo
Mis variables:
- player_hp — salud, número, 0–5
- energy_current — energía, número, 0–8
- game_day — día actual, número, 1–14
- game_phase — "Night" o "Day"
- player_has_gun — si está armado, true/false- La IA genera el código y muestra una tarjeta de aprobación; el panel Canvas da una vista previa en vivo
- ¿Satisfecho? Haz clic en Aprobar. ¿Quieres cambios? Sigue hablando: "haz el efecto de llamada más dramático" o "los botones de elección están demasiado separados"
¡Así de fácil: un frontend elegante, ensamblado sin esfuerzo!
Método 2: Usar una IA externa (Claude, ChatGPT, etc.)
Si te sientes más cómodo con otra IA, eso también funciona. Envía la descripción de efecto de arriba junto con la información técnica de Yumina añadida al final:
Información técnica de Yumina (sigue estas reglas al escribir código):
- Root component: exporta `export default function MyWorld() { return <Chat renderBubble={(msg) => ...} /> }`
- `<Chat />` es el bloque de chat proporcionado por la plataforma — maneja el cuadro de entrada, la lista
de mensajes, el cursor de streaming; solo personalizamos cada burbuja vía renderBubble
- Dentro de renderBubble, el objeto msg expone: `contentHtml` (HTML prerrenderizado), `rawContent`
(texto en bruto), `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 de Iconos 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 — no se necesitan importsUna vez que tengas el código:
- Vuelve al editor → sección Custom UI → abre
index.tsx - Pega el código (reemplaza el
return <Chat />por defecto) - Si la parte inferior muestra Compile Status: OK, estás listo
No necesitas entender el código
No necesitas saber qué hace este código. Mientras la parte inferior muestre Compile Status: OK después de pegar, está funcionando. Si hay un error, envía el mensaje de error de vuelta a la IA literalmente y pídele que lo arregle ∠( ᐛ 」∠)＿
¿Y si el resultado no es lo que querías?
Dile a la IA directamente: "la barra de salud es demasiado fina, hazla más gruesa", "cambia el fondo a negro puro", "añade un efecto de parpadeo". Unas cuantas iteraciones y coincidirá con tu visión.
Paso 7: Escribe Entradas del Lorebook
Las Entradas anteriores están en el grupo PRESETS: siempre enviadas. Pero alguna información solo necesita estar disponible cuando es relevante: para eso está el grupo CHAT HISTORY.
Vuelve a Lorebook, expande el grupo CHAT HISTORY a la izquierda y haz clic en + Add Entry bajo ese grupo para crear algunas Entradas activadas por palabra clave:
1. Reglas de llamada a la puerta
| Campo | Valor |
|---|---|
| Nombre | Knocking Event |
| Enviar como | Instruction |
| Palabras clave | door, knock, open, knocking |
Reglas del evento de golpes en 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 cacheo (cuesta energía), abrir o negarse
- Dejar entrar a un humano = puede ofrecer ayuda | Dejar entrar a un Visitante = peligroso
- Mantén las descripciones llenas de suspenso al retratar escenas de golpes en la puerta — nunca reveles directamente la identidad2. Observación por mirilla
| Campo | Valor |
|---|---|
| Nombre | Peephole Observation |
| Enviar como | Instruction |
| Palabras clave | peephole, peek, observe, look |
Reglas de observación por mirilla:
- Solo se puede ver la cabeza y la parte superior del cuerpo del visitante
- Enfoca las descripciones en: expresión facial, dientes, ojos, textura de la piel
- Los disfraces de los Visitantes tienen fallos sutiles (dientes anormalmente uniformes, pupilas anómalas, textura de piel extraña)
- Los humanos tienen imperfecciones normales (caries, ojeras, cicatrices)
- Nunca reveles directamente la identidad — describe solo lo que se ve3. Búsqueda en la habitación
| Campo | Valor |
|---|---|
| Nombre | Room Search |
| Enviar como | Instruction |
| Palabras clave | search, check, rummage, explore, room |
Reglas de búsqueda en la habitación (solo durante el día):
- Trastero: se puede encontrar la pistola
- Cocina: suministros de comida, puede restaurar una pequeña cantidad de energía
- Estudio: teléfono, se puede llamar para obtener información
- Describe detalles del entorno para generar inquietudCómo funciona la activación por palabra clave
Antes de cada respuesta de IA, el motor escanea los mensajes recientes. Si aparece una palabra clave coincidente → la Entrada correspondiente se envía temporalmente a la IA. Si nadie la mencionó → la IA no la ve, no se desperdicia presupuesto de tokens. Eficiente y preciso (≧▽≦)
La profundidad de escaneo es el ajuste Scan Depth bajo Entry Settings en la sección Lorebook — por defecto 2, se recomienda subirla a 4.
Paso 8: Pruébalo
El contenido principal está hecho. ¡Vamos a probarlo!
Haz clic en Save en la barra superior del editor, luego pulsa el botón dorado PLAY en la parte inferior de la navegación izquierda. El editor te lleva directamente a la Sesión: si ya tienes una Sesión guardada para este Mundo, la reutilizará; de lo contrario, se crea una nueva automáticamente. Comprueba lo siguiente:
| Elemento a comprobar | Cómo verificar | Si no funciona |
|---|---|---|
| Aparece el mensaje inicial | El primer mensaje se muestra automáticamente al entrar | Comprueba la sección First Message para un saludo escrito |
| La UI personalizada está activa | Los mensajes tienen un título de fase estilo CRT y HUD | Comprueba que index.tsx tenga el código renderBubble y Compile Status sea OK |
| Directivas funcionando | Las Variables cambian después de las interacciones (los valores del HUD se actualizan) | Comprueba que las reglas de comportamiento de cada Variable estén claramente escritas |
| Activadores del Lorebook | Mencionar "peephole" hace que la IA siga las reglas | Comprueba la ortografía de las palabras clave y el ajuste Scan Depth |
Paso 9: Rellena la información del overview
Una vez que las pruebas pasen, cambia a Overview y rellena los detalles previos a la publicación:
- Sube una Imagen de portada (algo que transmita la atmósfera de horror)
- Escribe una Descripción para que los jugadores sepan en qué se están metiendo
- Añade Etiquetas:
horror,survival,mystery,interactive fiction - Establece Idioma: elige el idioma en el que está escrito tu Mundo (ej.
English) - Haz clic en Save en la parte superior
Paso 10: Publica
- En la barra superior del editor, haz clic en el botón Publicar (está justo al lado de Save)
- En el diálogo de publicación, establece la clasificación de contenido (General o Sensible para 18+), la visibilidad y si otros pueden editarlo
- Marca el acuerdo de términos y haz clic en publicar
¡Listo! Tu Mundo está en vivo ヽ(✿ﾟ▽ﾟ)ノ
Lo que has aprendido
| Concepto | Lo que hiciste |
|---|---|
| Entradas | Escribiste la configuración del sistema y un mensaje inicial: la base del comportamiento de la IA |
| Variables | Creaste HP, energía y contador de días: el esqueleto del estado del juego |
| Directivas | El motor le enseña a la IA automáticamente; tú solo escribes reglas de comportamiento claras |
| UI personalizada | Hiciste que la IA generara un panel de estado: sin código escrito tú mismo |
| Lorebook | Entradas de reglas activadas por palabra clave: una base de conocimiento bajo demanda |
Estas cinco piezas trabajando juntas forman un Mundo interactivo completo.
Qué más puedes hacer
Este tutorial solo usó las características más fundamentales. Hay mucho más que Yumina puede hacer:
- Motor de reglas — activa automáticamente un final de muerte cuando HP llega a 0, sin necesidad de depender de que la IA lo recuerde
- Guía de UI personalizada — convierte los mensajes en burbujas de diálogo, escenas de novela visual o registros de batalla
- Audio — añade BGM y efectos de sonido, cambia automáticamente a música espeluznante al entrar al sótano
- Entradas condicionales — activa Entradas según los valores de Variables, como revelaciones de trama al final del juego
Para profundizar en sistemas individuales, las páginas de referencia Motor de reglas, UI personalizada y Variables tienen ejemplos elaborados que cubren la gestión compleja de estado.
Juega la versión real
Este tutorial construyó una versión simplificada: 5 Variables, unas pocas Entradas y un renderizador. Pero el Mundo completo "No, I'm not a Human" en Yumina tiene:
- Más de 20 personajes: 8 humanos (la cajera Sarah, el ingeniero retirado Marcus, la enfermera Elena...), 6 Visitors disfrazados de humanos (el repartidor Jake, la niña Lily...), más personajes especiales (Pale Stranger, el misterioso Who, la mujer de los gatos)
- Más de 25 Variables: no solo salud y energía: estados de habitación, registros de Visitors, conteo de informes de FEMA, varios elementos de inventario (café, bebidas energéticas, comida para gatos...)
- Un sistema completo de mirilla: arte sprite para cada personaje a través de la mirilla: humanos con imperfecciones normales, Visitors con señales sutiles
- Un renderizador estilo monitor CRT: animaciones de fase noche/día, efectos de temblor de llamada, botones de elección clicables y un HUD inferior
Dirígete a yumina.io y busca "No, I'm not a Human" para experimentar la versión completa: hazte una idea de lo que puede llegar a ser tu Mundo. Luego vuelve y sigue construyendo ᕕ( ᐛ )ᕗ