Rastreador de misiones
Un diario de misiones: cada misión muestra si está completada, el oro del jugador se ve en pantalla, y al terminar una misión se paga su recompensa y sale un aviso. La IA decide cuándo se ha completado una misión; los comportamientos pagan exactamente una vez; una página de la interfaz del jugador muestra el diario. No hace falta código.
Lo que vas a construir
- Una página de diario de misiones: «Find Herbs» (encontrar hierbas) y «Defeat the Forest Wolf» (derrotar al lobo del bosque), cada una marcada como completada o pendiente
- El oro en pantalla, que se actualiza al llegar las recompensas
- La IA marca las misiones como completadas cuando ocurren en la historia, lo diga el jugador como lo diga
- Las recompensas se pagan una vez: +30 de oro por las hierbas y +50 por el lobo, con un aviso
- Una cuenta del progreso: «1 / 2 completadas»
Cómo funciona
El jugador le entrega las hierbas al anciano del pueblo
→ La IA, siguiendo las Reglas de comportamiento de la variable Quests done, añade "Find Herbs" a la lista
→ El comportamiento "Recompensa: Find Herbs" vigila Quests done (Una variable cambia)
→ Su condición se cumple (Quests done contiene "Find Herbs") y no se ha disparado antes (Máx. activaciones 1)
→ Oro +30, un aviso "Misión completada: Find Herbs (+30 de oro)", y se le dice a la IA
→ El diario de misiones muestra Find Herbs como completadaLa IA es buena juzgando si algo ha pasado en la historia; el motor es bueno pagando exactamente una vez.
Paso a paso
Paso 1: Crea las variables
En la fila Puedes añadir, abajo en la carta, pulsa ＋ Variable para cada una.
Quests done
| Campo | Valor |
|---|---|
| Nombre | Quests done |
| Tipo | Lista / tabla |
| Valor inicial | [] |
| Reglas de comportamiento | mira abajo |
Las misiones que el jugador ha terminado, por su nombre. Las misiones son: "Find Herbs" (llevarle hierbas curativas al anciano del pueblo) y "Defeat the Forest Wolf" (matar al lobo que se está llevando las ovejas). Cuando el jugador complete de verdad una de ellas en la historia, añade su nombre exacto a esta lista. Nunca añadas una misión que no esté terminada, y nunca añadas una dos veces.Gold
| Campo | Valor |
|---|---|
| Nombre | Gold |
| Tipo | Número |
| Valor inicial | 0 |
| Rango | de 0 a (vacío) |
| Reglas de comportamiento | El oro del jugador. Las recompensas de las misiones se suman solas; también puedes cambiarlo por botín, comercio o robo. |
Pulsa Mostrar en la pantalla del jugador para que Gold se vea siempre en el chat.
Misiones completadas (opcional)
| Campo | Valor |
|---|---|
| Nombre | Misiones completadas |
| Tipo | Número |
| Fórmula (se calcula sola) | len({Quests done}) |
Cuenta la lista por sí sola. La IA puede leerla, pero no cambiarla.
Paso 2: Crea un comportamiento de recompensa por misión
En la fila Puedes añadir, pulsa ＋ Comportamiento.
Recompensa: Find Herbs
| Parte | Ajuste |
|---|---|
| Cuándo se dispara | Una variable cambia: Quests done |
| SOLO SI | Quests done contiene Find Herbs |
| Efectos | Cambiar variable: Gold más 30 |
Mostrar notificación: Misión completada: Find Herbs (+30 de oro), estilo Éxito | |
Decirle a la IA: El jugador acaba de completar "Find Herbs" y ha recibido 30 de oro. Menciónalo en tu respuesta. | |
| Máx. activaciones | 1 |
Máx. activaciones en 1 es lo que evita que la recompensa se pague dos veces: la lista vuelve a cambiar cuando se añade la siguiente misión, y «contiene Find Herbs» sigue siendo cierto entonces, pero el comportamiento ya se disparó una vez.
Decirle a la IA le pasa a la IA una frase para su siguiente respuesta, para que pueda escribir al anciano contando las monedas.
Recompensa: Defeat the Forest Wolf
Igual, con Defeat the Forest Wolf en la condición, Gold más 50, y su aviso y su frase para la IA.
Con palabras clave
También puedes completar una misión a partir de palabras de la conversación: Cuándo se dispara: La IA dice una palabra clave el anciano coge las hierbas. Las palabras clave se separan con comas y cualquiera de ellas dispara el comportamiento, así que una lista como derrotar, lobo se dispararía con «he visto un lobo». Usa una frase propia de ese momento, y añade un Interruptor por misión (que se pone en verdadero en los efectos y se comprueba en SOLO SI) para que no pueda dispararse dos veces. Dejar que la IA marque la misión, como arriba, se adapta mejor a las mil formas en que un jugador puede decir las cosas.
Paso 3: Monta la página del diario de misiones
Pulsa Interfaz en el centro de la barra superior. Añade una página con Nueva página (una Página en blanco) y llámala «Misiones».
- Añade una parte Texto para el título, y otra que diga
{Misiones completadas} / 2 completadas(usa Insertar el valor de una variable…) - Añade una parte Lista. En Las filas vienen de, elige Filas que escribo y añade dos filas: título
Find Herbs, textoLlévale hierbas curativas al anciano del pueblo. Recompensa: 30 de oro; títuloDefeat the Forest Wolf, textoMata al lobo que se está llevando las ovejas. Recompensa: 50 de oro - Activa Dibujar cada fila como tarjeta
- En Bloqueada hasta, activa Mostrar las filas bloqueadas, pon Vigilar esta variable en Quests done y deja Comparar con este campo de la fila en
title. En Texto mientras está bloqueada, escribeTodavía pendiente. Una fila se ilumina cuando Quests done contiene su título - Añade un botón con Ir a la página de vuelta a la conversación y, en la página de la conversación, un botón «Misiones» con Ir a la página → Misiones
Desactiva Editar para recorrerla sin gastar saldo.
Una disposición a pantalla completa
La plantilla Panel de estadísticas (en Pantalla completa) te da una disposición ya hecha con cuatro barras, oro y un contador de días, si quieres que el oro y otros números estén siempre en pantalla en lugar de en una página.
Paso 4: Pruébalo
Pulsa Jugar en la barra superior.
- Abre Misiones: las dos dicen «Todavía pendiente», 0 / 2 completadas, Gold 0
- Juega hasta encontrar las hierbas y llevarlas de vuelta. Cuando la IA marca la misión, sale el aviso y Gold pasa a 30
- Abre Misiones: Find Herbs está completada, 1 / 2
- Ve a por el lobo. Gold pasa a 80, 2 / 2
Este turno, a la derecha de la prueba, muestra cuándo cambió Quests done y si se disparó cada comportamiento de recompensa.
Si algo falla:
| Síntoma | Causa probable | Solución |
|---|---|---|
| La misión se hizo en la historia pero nunca se marcó | La IA no la añadió a la lista | Haz que las Reglas de comportamiento nombren cada misión exactamente y digan cuándo cuenta como completada |
| Se marcó, pero no hubo recompensa | El nombre que añadió la IA no coincide con la condición | La entrada de la lista, la condición y el título de la fila tienen que ser el mismo texto |
| La recompensa se pagó dos veces | Máx. activaciones no está en 1 | Ponlo en cada comportamiento de recompensa |
| La fila del diario sigue bloqueada | Comparar con este campo de la fila o Vigilar esta variable están mal | title, y Quests done |
| La IA marca las misiones demasiado pronto | Sus reglas son demasiado vagas | Di qué tiene que pasar: «solo cuando el anciano tenga las hierbas en la mano» |
Ruta con código propio: un panel de misiones debajo del chat
Si escribes tu propia interfaz, lee las mismas variables en el código de la interfaz. Todo lo de arriba se queda como está.
Paneles → Código de frontend → abre index.tsx y sustituye el return <Chat /> que viene por defecto:
export default function MyWorld() {
const api = useYumina();
const msgs = api.messages || [];
const done = Array.isArray(api.variables["Quests done"])
? api.variables["Quests done"].map(String)
: [];
const gold = Number(api.variables["Gold"] ?? 0);
const quests = [
{ name: "Find Herbs", reward: 30 },
{ name: "Defeat the Forest Wolf", reward: 50 },
].map((q) => ({ ...q, done: done.includes(q.name) }));
const completedCount = quests.filter((q) => q.done).length;
return (
<Chat renderBubble={(msg) => {
const isLastMsg = msg.messageIndex === msgs.length - 1;
return (
<div>
<div
style={{ color: "#e2e8f0", lineHeight: 1.7 }}
dangerouslySetInnerHTML={{ __html: msg.contentHtml }}
/>
{isLastMsg && (
<div style={{
marginTop: "16px",
padding: "16px",
background: "linear-gradient(135deg, rgba(30,41,59,0.8), rgba(15,23,42,0.9))",
borderRadius: "12px",
border: "1px solid #334155",
}}>
{/* Header with gold */}
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "14px" }}>
<div style={{ fontSize: "15px", fontWeight: "bold", color: "#e2e8f0" }}>Quest Tracker</div>
<div style={{
display: "flex", alignItems: "center", gap: "6px", padding: "4px 12px",
background: "rgba(234,179,8,0.15)", border: "1px solid rgba(234,179,8,0.3)", borderRadius: "20px",
}}>
<span style={{ fontSize: "14px" }}>💰</span>
<span style={{ fontSize: "14px", fontWeight: "bold", color: "#fbbf24" }}>{gold}</span>
</div>
</div>
<div style={{ fontSize: "12px", color: "#64748b", marginBottom: "12px" }}>
Completed {completedCount}/{quests.length}
</div>
{/* Quest list */}
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
{quests.map((quest) => (
<div key={quest.name} style={{
display: "flex", justifyContent: "space-between", alignItems: "center",
padding: "10px 14px", borderRadius: "8px",
background: quest.done ? "rgba(34,197,94,0.08)" : "rgba(30,41,59,0.5)",
border: quest.done ? "1px solid rgba(34,197,94,0.2)" : "1px solid #1e293b",
}}>
<span style={{
fontSize: "13px",
color: quest.done ? "#94a3b8" : "#e2e8f0",
textDecoration: quest.done ? "line-through" : "none",
}}>
{quest.name}
</span>
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
<span style={{ fontSize: "12px", color: quest.done ? "#4ade80" : "#64748b" }}>
{quest.done ? `+${quest.reward} g` : `${quest.reward} g`}
</span>
<span style={{
display: "inline-flex", alignItems: "center", justifyContent: "center",
width: "24px", height: "24px", borderRadius: "6px", fontSize: "13px", fontWeight: "bold",
background: quest.done ? "rgba(34,197,94,0.2)" : "rgba(239,68,68,0.15)",
color: quest.done ? "#4ade80" : "#f87171",
border: quest.done ? "1px solid rgba(34,197,94,0.3)" : "1px solid rgba(239,68,68,0.25)",
}}>
{quest.done ? "✓" : "✗"}
</span>
</div>
</div>
))}
</div>
{completedCount === quests.length && (
<div style={{
marginTop: "12px", padding: "10px", textAlign: "center", fontSize: "13px", fontWeight: "600",
background: "rgba(34,197,94,0.1)", border: "1px solid rgba(34,197,94,0.25)",
borderRadius: "8px", color: "#4ade80",
}}>
All quests complete!
</div>
)}
</div>
)}
</div>
);
}} />
);
}Qué hace el código:
api.variables["Quests done"]lee la lista por el nombre de la variable; una misión está completada cuando su nombre está en ellaapi.variables["Gold"]lee el orocompletedCountcuenta las misiones terminadas para la línea de progreso y el aviso de «todas completadas»- El panel solo aparece debajo del último mensaje, y se actualiza en cuanto cambia una variable
El estado que aparece junto al archivo en Paneles → Código de frontend debería ser un OK verde.
¿No quieres escribir el código tú?
Pulsa Asistente IA arriba a la derecha del lienzo y describe el panel que quieres.
Para ir más lejos
Más misiones
Añade el nombre de la misión y lo que cuenta como completarla a las Reglas de comportamiento de Quests done, añade un comportamiento de recompensa y añade una fila al diario de misiones (o una línea al array quests en el código). Si usaste la fórmula, cambia el / 2 de la página del diario por el nuevo total.
Misiones que reparte la IA
Añade una segunda lista, Misiones abiertas, y dile a la IA en sus Reglas de comportamiento que añada una misión cuando un personaje le pida ayuda al jugador. Muéstrala en la página del diario con una segunda parte Lista que lea de Una variable (Misiones abiertas) en lugar de filas que escribas tú.
Cadenas de misiones
Para ofrecer «Salvar el pueblo» solo después de las hierbas, escribe la misión nueva como una entrada de lore en espera (espera a un comportamiento antes de que la IA la vea). Luego añade un comportamiento: Una variable cambia sobre Quests done, SOLO SI Quests done contiene Find Herbs, efecto Habilitar entrada de lore para esa entrada, Máx. activaciones 1. A partir de ahí, la IA sabe que el anciano tiene un encargo nuevo. SOLO SI puede tener varias condiciones, con Todas deben cumplirse o Basta con una, para cadenas más largas. El lore en espera se explica en Apertura y lore.
Gastar el oro
La tienda usa la misma variable Gold: las misiones suman y la tienda resta.
Referencia rápida
| Lo que quieres | Cómo hacerlo |
|---|---|
| Que la IA juzgue cuándo se completa una misión | Una variable de Lista / tabla con Reglas de comportamiento que nombren cada misión |
| Pagar una recompensa una sola vez | Comportamiento: Una variable cambia, SOLO SI la lista contiene la misión, Máx. activaciones 1 |
| Avisar al jugador | Efecto: Mostrar notificación, estilo Éxito |
| Avisar a la IA | Efecto: Decirle a la IA (solo la siguiente respuesta) |
| Contar las misiones terminadas | Una variable de Número con la fórmula len({Quests done}) |
| Mostrar el diario de misiones | Una parte Lista con Filas que escribo y Bloqueada hasta vigilando Quests done |
| El oro siempre en pantalla | Mostrar en la pantalla del jugador en Gold |
| Completar una misión con palabras exactas | El jugador dice una palabra clave / La IA dice una palabra clave (basta con cualquiera de ellas) |
| Un panel a medida | Código de interfaz que lea las mismas variables |
Esta es la receta n.º 6
El mismo ciclo (la IA se da cuenta de que algo ha pasado, un comportamiento paga una vez, la interfaz lo muestra) sirve para hitos de la historia, árboles de misiones secundarias y logros.