Tutorial paso a paso: construye un mundo de survival horror desde cero
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.
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 Crear de la navegación izquierda, luego selecciona Proyecto en blanco. En el editor, rellena el nombre del mundo en el campo superior:
- Nombre:
The Imposters
Si aún no te familiarizas con las secciones del editor, lee primero Cómo funciona y luego vuelve aquí.
Paso 2: Escribir la entrada de configuración del personaje
Haz clic en Lorebook en la navegación izquierda.
Creemos nuestra propia entrada. Asegúrate de estar bajo el grupo Presets y haz clic en Agregar entrada arriba a la derecha.
En este juego, la IA no interpreta a un personaje —— actúa como el Game Master (GM), encargado de narrar las escenas, interpretar a todos los NPC e impulsar la historia. Así que la primera entrada le dice a la IA su rol y sus responsabilidades.
| Campo | Valor |
|---|---|
| Nombre | Configuración del Game Master |
| Enviar como | Instrucción (la IA lo trata como una regla a seguir) |
| Etiquetas | Haz clic en Preset |
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á bajo Presets → siempre se envía a la IA, visible en cada conversación. La configuración central debe ir aquí
- Enviar como = Instrucción → la IA lo trata como una directiva de sistema, no como diálogo de personaje
- Etiqueta = Preset → para organización
Paso 3: Escribir el mensaje de apertura
Cambia a la sección Primer mensaje y haz clic en Agregar saludo. (Alternativamente, crea una entrada con role: greeting en el Lorebook —— mismo efecto.)
🌑 **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 fuerza al jugador a actuar de inmediato
Paso 4: Crear las variables del juego
Cambia a la sección Variables y haz clic en Agregar variable. Crea 5 variables.
1. Vida
| Campo | Valor |
|---|---|
| ID | player_hp |
| Nombre visible | Player HP |
| 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 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. |
2. Energía
| Campo | Valor |
|---|---|
| ID | energy_current |
| Nombre visible | Energy |
| Tipo | Number |
| Valor por defecto | 3 |
| Mín | 0 |
| Máx | 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. |
3. Día
| Campo | Valor |
|---|---|
| ID | game_day |
| Nombre visible | Game Day |
| 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 | Game Phase |
| Tipo | String |
| Valor por defecto | Night |
| 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. |
5. Estado armado
| Campo | Valor |
|---|---|
| ID | player_has_gun |
| Nombre visible | Has Gun |
| 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 herir accidentalmente a un humano. Describe las consecuencias tras 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énsalas como una «chuleta» para la IA φ(>ω<*)
Paso 5: Cómo cambian realmente las variables
Quizá te preguntes —— 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 hace dos cosas automáticamente:
- Le dice automáticamente a la IA el formato de directivas: el motor le pasa en silencio un conjunto de instrucciones a la IA en cada turno, diciéndole que use la sintaxis
[variableID: operation value]para actualizar el estado. No tienes que hacer nada. - 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 al ser atacado por un Visitante o al tomar una decisión peligrosa». Cuando un jugador es atacado en el juego, la IA incluirá [health: -20] al final de su respuesta. El motor lo detecta y baja automáticamente la vida de 100 a 80.
Así que cuanto más claras escribas las reglas de comportamiento, mejor rinde la IA. Vuelve y revisa 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 (fijar a un valor concreto), toggle (invertir un booleano) y más. Ver → Directivas y Macros de IA
Paso 6: Hacerlo lucir bien —— interfaz generada por IA
A estas alturas tu mundo es jugable. Pero todo lo que ve el jugador es texto plano —— sin atmósfera, sin inmersión. Construyamos una interfaz con verdadera sensación de juego de horror.
«¿Escribir código?» No —— deja que la IA lo haga por ti (￣▽￣)ノ
Método 1: Usa el Studio AI integrado de Yumina (recomendado)
- Haz clic en Entrar al Studio en la parte superior del editor
- Abre el panel Asistente IA
- 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 —— 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. Vibra 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- La IA genera el código y muestra una tarjeta de aprobación; el panel Lienzo da una vista previa en vivo
- ¿Satisfecho? Haz clic en Aprobar. ¿Quieres cambios? Sigue hablando —— «haz el efecto de los golpes más dramático» o «los botones de opción están demasiado separados»
¡Así de fácil —— un frontend con estilo, montado sin esfuerzo!
Método 2: Usa una IA externa (Claude, ChatGPT, etc.)
Si te sientes más cómodo con otra IA, también funciona. 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:
- Vuelve al editor → sección UI personalizada → abre
index.tsx - Pega el código (reemplaza el
return <Chat />por defecto) - Si abajo muestra Compilar: OK, ya está
No necesitas entender el código
No necesitas saber qué hace este código. Mientras abajo muestre Compilar: OK después de pegar, está funcionando. Si hay un 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?
Dile 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». Unas pocas iteraciones y coincidirá con tu visión.
Paso 7: Escribir entradas del Lorebook
Las entradas de antes están en el grupo Presets —— siempre se envían. Pero cierta información solo necesita estar disponible cuando es relevante —— para eso está el grupo Historial de chat.
Vuelve a Lorebook, expande el grupo Historial de chat a la izquierda y haz clic en Agregar entrada bajo ese grupo para crear unas cuantas entradas disparadas por palabras clave:
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 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, sin desperdiciar presupuesto de tokens. Eficiente y preciso (≧▽≦)
La profundidad de escaneo es el ajuste Profundidad de escaneo en Ajustes de la entrada, dentro de la sección Lorebook —— por defecto 2, se recomienda subirlo a 4.
Paso 8: Probarlo
El contenido principal está listo. ¡Vamos a probarlo!
Haz clic en Guardar en la barra superior del editor, luego pulsa el botón dorado Jugar al final de la navegación izquierda. El editor te lleva directo a la sesión —— si ya tienes una sesión guardada de este mundo la reutiliza, si no, crea una nueva automáticamente. Comprueba lo siguiente:
| Elemento a comprobar | Cómo verificar | Si no funciona |
|---|---|---|
| Aparece el mensaje de apertura | El primer mensaje se muestra automáticamente al entrar | Comprueba que la sección Primer mensaje tenga un saludo escrito |
| La UI personalizada está activa | Los mensajes tienen un título de fase estilo CRT y un HUD | Comprueba que index.tsx tenga el código renderBubble y que Compilar esté en OK |
| Las directivas funcionan | Las variables cambian tras las interacciones (los valores del HUD se actualizan) | Comprueba que las reglas de comportamiento de cada variable estén claramente escritas |
| El Lorebook se dispara | Mencionar «mirilla» hace que la IA siga las reglas | Comprueba la ortografía de las palabras clave y el ajuste Profundidad de escaneo |
Paso 9: Rellenar la información de la vista general
Una vez que pasen las pruebas, cambia a Vista general 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 meten
- Añade Etiquetas:
horror,survival,misterio,ficción interactiva - Configura el Idioma: elige el idioma en que está escrito tu mundo (p. ej.,
Español) - Haz clic en Guardar arriba
Paso 10: Publicar
- En la barra superior del editor, haz clic en el botón Publicar (justo al lado de Guardar)
- En el diálogo de publicación, fija la clasificación de contenido (General o Sensitive Content), la visibilidad y si otros pueden editarlo
- Marca la aceptación de los términos y haz clic en publicar
¡Listo! Tu mundo está publicado ヽ(✿ﾟ▽ﾟ)ノ
Lo que has aprendido
| Concepto | Lo que hiciste |
|---|---|
| Entradas | Escribiste la configuración del sistema y un mensaje de apertura —— 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 escribir código tú mismo |
| Lorebook | Entradas de reglas disparadas por palabras 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 funciones más fundamentales. Yumina puede hacer mucho más:
- Motor de reglas —— dispara automáticamente un final de muerte cuando el HP llega a 0, sin 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 combate
- Audio —— añade BGM y efectos de sonido, cambia automáticamente a música inquietante al entrar al sótano
- Entradas condicionales —— activa entradas según los valores de las variables, como revelaciones de la trama al final
Para profundizar en sistemas individuales, las páginas de referencia de Motor de reglas, UI personalizada y Variables tienen ejemplos trabajados que cubren la gestión de estado compleja.
Ve a yumina.io y busca «No, I'm not a Human» para experimentar la versión completa —— para hacerte una idea de en qué puede convertirse tu mundo. Luego vuelve y sigue construyendo ᕕ( ᐛ )ᕗ