Rastreador de misiones

Construye un panel rastreador de misiones — muestra el estado de finalización de cada misión (marca de verificación o X), muestra recompensas de oro en tiempo real. Cuando un jugador completa una misión, abre automáticamente una notificación de logro y entrega la recompensa. Esta receta te enseña cómo conectarlo todo con variables, comportamientos y el Root Component.

Lo que vas a construir

Un panel rastreador de misiones integrado en la interfaz del chat:

Lista de misiones — cada misión muestra su nombre y estado de finalización (hecho = marca verde, no hecho = X roja)
Contador de oro — visualización en tiempo real del oro actual del jugador
Detección automática — cuando el mensaje del jugador contiene una palabra clave (por ejemplo, "herb" o "defeat"), la misión se marca automáticamente como completada
Notificación de logro — aparece un toast dorado cuando se completa una misión, diciéndole al jugador cuánto ganó
Recompensas de oro — cada misión paga automáticamente oro al completarse

El jugador envía un mensaje mencionando "found the herbs"
  → El motor detecta la palabra clave del jugador "herb"
  → Comprueba la condición: ¿quest_1_complete == false?
    → Sí: pone quest_1_complete = true, añade 30 de oro, abre notificación de logro
    → No: no hace nada (misión ya completada)
  → El panel de misiones se actualiza automáticamente: "Find Herbs" cambia de ✗ a ✓

Cómo funciona

Este sistema de misiones usa tres mecanismos centrales:

Variables booleanas + disparadores por palabra clave — cada misión se sigue mediante una variable booleana. Cuando el mensaje del jugador contiene un texto específico, una regla de comportamiento pone automáticamente la variable a true
Comprobaciones de condición — los comportamientos comprueban si la misión ya está completada antes de dispararse. Las misiones completadas no se vuelven a disparar (sin recompensas dobles)
El Root Component lee variables — el panel lee el estado de las misiones y el oro de las variables en tiempo real, renderizando dinámicamente marcas de verificación o marcas X

Paso a paso

Paso 1: Crea variables

Necesitamos 5 variables — dos para el estado de finalización de las misiones, una para el oro, y dos más para los nombres de las misiones (para que el Root Component pueda mostrarlas dinámicamente).

Editor → barra lateral → pestaña Variables → haz clic en "Add Variable" para cada una

Variable 1: Estado de finalización de la misión 1

Campo	Valor	Por qué
Nombre	Misión 1 completa	Una etiqueta para tu propia referencia en la lista de variables
ID	`quest_1_complete`	Los comportamientos y el Root Component usan este ID para leer/escribir el valor
Tipo	Boolean	Solo dos estados: "hecho" y "no hecho"
Valor por defecto	`false`	La misión no se ha completado cuando empieza una nueva sesión
Categoría	Flag	Esta es una bandera de estado, no una estadística numérica
Reglas de comportamiento	`Ponla a true cuando el jugador complete la misión Find Herbs. Los comportamientos la detectan automáticamente mediante palabras clave, pero también puedes marcarla como completa en un momento apropiado de la historia.`	Le dice a la IA qué significa esta variable y cuándo debería cambiar

Variable 2: Estado de finalización de la misión 2

Campo	Valor	Por qué
Nombre	Misión 2 completa	Fácil de identificar
ID	`quest_2_complete`	Usado por los comportamientos y el Root Component
Tipo	Boolean	Misma configuración de dos estados
Valor por defecto	`false`	No completada al inicio de la sesión
Categoría	Flag	Bandera de estado
Reglas de comportamiento	`Ponla a true cuando el jugador derrote al Forest Wolf. Los comportamientos la detectan automáticamente mediante palabras clave, pero también puedes marcarla como completa en un momento apropiado de la historia.`	Le dice a la IA qué significa esta variable y cuándo debería cambiar

Variable 3: Oro

Campo	Valor	Por qué
Nombre	Oro	Fácil de identificar
ID	`gold`	Aumenta automáticamente al completar misiones
Tipo	Number	El oro es numérico — necesita suma y resta
Valor por defecto	`0`	Sin oro al inicio de la sesión — gánalo completando misiones
Valor mínimo	`0`	Evita que el oro sea negativo
Categoría	Resource	El oro es una variable de recurso
Reglas de comportamiento	`El oro se otorga automáticamente al completar misiones. También puedes añadir o restar oro en la historia — por ejemplo, botín de combate, comercio o robo.`	Le dice a la IA que el oro puede cambiar en múltiples contextos

Variable 4: Nombre de la misión 1

Campo	Valor	Por qué
Nombre	Nombre de la misión 1	Fácil de identificar
ID	`quest_1_name`	El Root Component usa este ID para mostrar el nombre de la misión
Tipo	String	Los nombres de las misiones son texto
Valor por defecto	`Find Herbs`	El nombre de la primera misión
Categoría	Custom	Solo datos descriptivos
Reglas de comportamiento	`No modifiques esta variable.`	Los nombres de las misiones no deben cambiarse

Variable 5: Nombre de la misión 2

Campo	Valor	Por qué
Nombre	Nombre de la misión 2	Fácil de identificar
ID	`quest_2_name`	Usado por el Root Component
Tipo	String	Los nombres de las misiones son texto
Valor por defecto	`Defeat the Forest Wolf`	El nombre de la segunda misión
Categoría	Custom	Datos descriptivos
Reglas de comportamiento	`No modifiques esta variable.`	Los nombres de las misiones no deben cambiarse

¿Por qué escribir reglas de comportamiento para cada variable?

Porque la IA puede "sugerir" cambios de variables al generar respuestas. Si no le dices que deje en paz una variable, podría marcar la misión como completada por su cuenta (por ejemplo, la IA decide "el jugador encontró hierbas" y pone quest_1_complete a true — pero como saltó la lógica del comportamiento, no se paga ninguna recompensa de oro). El campo de reglas de comportamiento es tu instrucción a la IA — una vez escrito, la IA sabe que estas variables están controladas por el sistema.

Paso 2: Crea comportamientos

Este es el corazón del sistema de misiones. Necesitamos 2 comportamientos, cada uno detectando una palabra clave y marcando la misión correspondiente como completada mientras reparte recompensas.

Editor → pestaña Behaviors → haz clic en "Add Behavior" para cada uno

Comportamiento 1: Completar misión "Find Herbs"

WHEN (cuándo comprobar):

Campo	Valor	Por qué
Trigger type	Player said keyword (`keyword`)	Se dispara cuando el mensaje del jugador contiene un texto específico
Keywords	`herb` o `found herb`	Coincide cuando el jugador dice algo como "I found the herbs"

¿Cómo funciona la coincidencia de palabras clave? El motor comprueba el contenido del mensaje del jugador — si contiene la palabra clave en cualquier lugar, coincide. Así "I found the herbs in the cave" se dispara porque contiene "herb". Si también quieres detectar palabras clave en la respuesta de la IA, crea un comportamiento separado con el tipo de disparador establecido en "AI said keyword" (ai-keyword).

ONLY IF (condiciones):

Variable	Operador	Valor	Por qué
`quest_1_complete`	igual (eq)	`false`	Solo se dispara cuando la misión aún no se ha completado — evita recompensas dobles

¿Por qué necesitas una condición? Sin ella, cada vez que alguien mencione "herb" la recompensa se dispara de nuevo. Con quest_1_complete == false, la primera mención de hierba → completa la misión, paga la recompensa, marca true. Cualquier mención después de eso → la condición falla (ya true), no pasa nada.

DO (acciones):

Añade estas acciones en orden:

Tipo de acción	Configuración	Efecto
Modificar variable	Variable `quest_1_complete`, operación `set`, valor `true`	Marca la misión como completada
Modificar variable	Variable `gold`, operación `add`, valor `30`	Paga una recompensa de 30 de oro
Mostrar notificación	Mensaje `¡Misión completada: Encontrar Hierbas! +30 de oro`, estilo `achievement`	Abre un toast de logro dorado
Tell AI	Contenido: `El jugador acaba de completar la misión "Encontrar Hierbas" y recibió 30 de oro como recompensa. Por favor reconócelo en tu respuesta.`	Hace que la IA sepa lo que pasó para que pueda escribir una mejor transición narrativa

¿Por qué "Tell AI"? Modificar variables y mostrar notificaciones son operaciones silenciosas del sistema — la IA misma no sabe "se acaba de completar una misión". Añadir este paso permite a la IA escribir un seguimiento natural en su próxima respuesta (por ejemplo, "Guardas con cuidado las hierbas en tu mochila, recordando la petición del anciano de la aldea. El viaje no fue en vano después de todo").

Comportamiento 2: Completar misión "Defeat the Forest Wolf"

WHEN (cuándo comprobar):

Campo	Valor	Por qué
Trigger type	Player said keyword (`keyword`)	Igual que antes — disparador de palabra clave del jugador
Keywords	`defeat` y `wolf`	Ambas palabras deben aparecer — evita que "I saw a wolf" se dispare

Lógica de coincidencia con múltiples palabras clave. Cuando ingresas varias palabras clave, el mensaje debe contener todas para dispararse. Así "I defeated the forest wolf" se dispara (contiene tanto "defeat" como "wolf"), pero "I spotted a wolf" no (solo "wolf", sin "defeat").

ONLY IF (condiciones):

Variable	Operador	Valor	Por qué
`quest_2_complete`	igual (eq)	`false`	Lo mismo — evita disparos repetidos

DO (acciones):

Tipo de acción	Configuración	Efecto
Modificar variable	Variable `quest_2_complete`, operación `set`, valor `true`	Marca la misión como completada
Modificar variable	Variable `gold`, operación `add`, valor `50`	Paga 50 de oro (derrotar al lobo es más difícil, por lo que la recompensa es mayor)
Mostrar notificación	Mensaje `¡Misión completada: Derrotar al Lobo del Bosque! +50 de oro`, estilo `achievement`	Abre un toast de logro dorado
Tell AI	Contenido: `El jugador acaba de completar la misión "Derrotar al Lobo del Bosque" y recibió 50 de oro como recompensa. Por favor reconócelo en tu respuesta.`	Hace que la IA sepa lo que pasó

Orden de ejecución de las acciones

Las acciones dentro de un único comportamiento se ejecutan en secuencia. Así: marcar como completada → añadir oro → abrir notificación → decir a la IA. Este orden importa — marcar la variable primero asegura que toda la lógica posterior se base en el estado más reciente.

Paso 3: Añade el panel rastreador de misiones en el Root Component

Este es el paso clave que hace que el panel de misiones aparezca en la interfaz del chat.

Editor → sección Custom UI → abre index.tsx → pega el siguiente código (reemplazando el predeterminado return <Chat />):

tsx

export default function MyWorld() {
  const api = useYumina();
  const msgs = api.messages || [];

  // Lee las variables
  const quest1Done = api.variables.quest_1_complete === true;
  const quest2Done = api.variables.quest_2_complete === true;
  const quest1Name = String(api.variables.quest_1_name || "Find Herbs");
  const quest2Name = String(api.variables.quest_2_name || "Defeat the Forest Wolf");
  const gold = Number(api.variables.gold ?? 0);

  // Datos de la lista de misiones
  const quests = [
    { name: quest1Name, done: quest1Done, reward: 30 },
    { name: quest2Name, done: quest2Done, reward: 50 },
  ];

  const completedCount = quests.filter(q => q.done).length;

  return (
    <Chat renderBubble={(msg) => {
      const isLastMsg = msg.messageIndex === msgs.length - 1;
      return (
    <div>
      {/* Renderiza el texto del mensaje normalmente (la plataforma ya renderizó el HTML, usa contentHtml directamente) */}
      <div
        style={{ color: "#e2e8f0", lineHeight: 1.7 }}
        dangerouslySetInnerHTML={{ __html: msg.contentHtml }}
      />

      {/* Panel rastreador de misiones — solo se muestra en el último mensaje */}
      {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",
        }}>
          {/* Encabezado del panel */}
          <div style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            marginBottom: "14px",
          }}>
            <div style={{
              fontSize: "15px",
              fontWeight: "bold",
              color: "#e2e8f0",
              letterSpacing: "0.5px",
            }}>
              Quest Tracker
            </div>
            {/* Contador de oro */}
            <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>

          {/* Indicador de progreso */}
          <div style={{
            fontSize: "12px",
            color: "#64748b",
            marginBottom: "12px",
          }}>
            Completed {completedCount}/{quests.length}
          </div>

          {/* Lista de misiones */}
          <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
            {quests.map((quest, idx) => (
              <div
                key={idx}
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  padding: "10px 14px",
                  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",
                  borderRadius: "8px",
                }}
              >
                {/* Lado izquierdo: nombre de la misión */}
                <div style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "10px",
                }}>
                  <span style={{
                    fontSize: "13px",
                    color: quest.done ? "#94a3b8" : "#e2e8f0",
                    textDecoration: quest.done ? "line-through" : "none",
                  }}>
                    {quest.name}
                  </span>
                </div>

                {/* Lado derecho: distintivo de estado */}
                <div style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "8px",
                }}>
                  {/* Cantidad de recompensa */}
                  <span style={{
                    fontSize: "12px",
                    color: quest.done ? "#4ade80" : "#64748b",
                  }}>
                    {quest.done ? `+${quest.reward} g` : `${quest.reward} g`}
                  </span>

                  {/* Distintivo de estado de finalización */}
                  <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>

          {/* Banner de todas las misiones completadas */}
          {completedCount === quests.length && (
            <div style={{
              marginTop: "12px",
              padding: "10px",
              background: "rgba(34,197,94,0.1)",
              border: "1px solid rgba(34,197,94,0.25)",
              borderRadius: "8px",
              textAlign: "center",
              fontSize: "13px",
              color: "#4ade80",
              fontWeight: "600",
            }}>
              All quests complete!
            </div>
          )}
        </div>
      )}
    </div>
      );
    }} />
  );
}

Recorrido por el código

No te intimides por la longitud — lo que hace es muy directo. Vamos sección por sección:

Configuración básica

tsx

const api = useYumina();
const msgs = api.messages || [];
// ...
<Chat renderBubble={(msg) => {
  const isLastMsg = msg.messageIndex === msgs.length - 1;
  // ...
}} />

El Root Component MyWorld() es la entrada para la UI del mundo. <Chat renderBubble={...} /> mantiene a la plataforma a cargo de la lista de mensajes, el cuadro de entrada y el desplazamiento — solo tomas el control de cómo se ve cada burbuja
useYumina() — obtiene la API de Yumina para que puedas leer variables
msg.messageIndex — el índice de la burbuja actual en la lista de mensajes. El panel de misiones solo se muestra debajo del último mensaje, así que no obtienes un panel duplicado en cada mensaje
msg.contentHtml — el HTML que la plataforma ya renderizó desde Markdown, se puede usar directamente con dangerouslySetInnerHTML

Leyendo variables

tsx

const quest1Done = api.variables.quest_1_complete === true;
const quest2Done = api.variables.quest_2_complete === true;
const quest1Name = String(api.variables.quest_1_name || "Find Herbs");
const quest2Name = String(api.variables.quest_2_name || "Defeat the Forest Wolf");
const gold = Number(api.variables.gold ?? 0);

=== true — comparación estricta, asegura que solo el booleano true cuenta como hecho. Evita que "true" (cadena) o 1 (número) se malinterpreten
String(... || "Find Herbs") — lee el nombre de la misión, recurre a un predeterminado si la variable no existe
Number(... ?? 0) — convierte el oro a un número. ?? 0 significa "usa 0 si la variable no existe"

Datos de la lista de misiones

tsx

const quests = [
  { name: quest1Name, done: quest1Done, reward: 30 },
  { name: quest2Name, done: quest2Done, reward: 50 },
];
const completedCount = quests.filter(q => q.done).length;

Recopila la información de las misiones en un array para que puedas iterar sobre él con .map(). completedCount cuenta cuántas están hechas, usado para la visualización de progreso.

Distintivo de estado

tsx

<span style={{
  background: quest.done
    ? "rgba(34,197,94,0.2)"    // hecho → fondo verde
    : "rgba(239,68,68,0.15)",  // no hecho → fondo rojo
  color: quest.done ? "#4ade80" : "#f87171",
}}>
  {quest.done ? "✓" : "✗"}
</span>

Cada misión tiene un pequeño distintivo a la derecha — marca verde para hecho, X roja para no hecho. Este es el efecto del componente de distintivo.

Contador de oro

tsx

<div style={{
  padding: "4px 12px",
  background: "rgba(234,179,8,0.15)",
  borderRadius: "20px",
}}>
  💰 {gold}
</div>

Una visualización de oro en forma de píldora en la esquina superior derecha del panel. Cada vez que se completa una misión, el oro aumenta y el panel se refresca automáticamente para mostrar el nuevo valor.

tsx

{completedCount === quests.length && (
  <div style={{ /* estilos de resaltado verde */ }}>
    All quests complete!
  </div>
)}

Cuando cada misión está hecha, aparece una línea de texto verde en la parte inferior del panel. completedCount === quests.length comprueba si el conteo de hechos es igual al total.

¿No quieres escribir código tú mismo? Usa Studio AI

Barra superior del editor → haz clic en "Enter Studio" → panel AI Assistant → describe en lenguaje natural lo que quieres (por ejemplo, "construye un panel rastreador de misiones que muestre el estado de finalización de las misiones y el oro"), y la IA generará el código por ti.

Paso 4: Guarda y prueba

Haz clic en Save en la parte superior del editor
Haz clic en Start Game o vuelve a la página de inicio y abre una nueva sesión
Verás el panel rastreador de misiones debajo de la respuesta de la IA: dos misiones marcadas con X rojas, 0 de oro
Envía un mensaje que contenga la palabra clave (por ejemplo, "I found the herbs") — tu mensaje contiene "herb", el comportamiento se dispara inmediatamente, el panel se actualiza: "Find Herbs" cambia a una marca verde, el oro se convierte en 30, aparece una notificación de logro
Envía otro mensaje con la palabra clave (por ejemplo, "I defeated the forest wolf") — tu mensaje contiene tanto "defeat" como "wolf", la segunda misión se completa, el oro aumenta a 80
Una vez completadas ambas misiones, aparece un banner verde "All quests complete!" en la parte inferior del panel

Si algo no funciona:

Síntoma	Causa probable	Solución
El panel de misiones no aparece	El código del Root Component no se guardó o tiene un error de sintaxis	Comprueba el estado de compilación en la parte inferior de la sección Custom UI — debería mostrar un "OK" verde
Envié un mensaje con "herb" pero la misión no se completó	La palabra clave del comportamiento no coincide con tu redacción real	Asegúrate de que tu mensaje contenga "herb". Nota: el disparador es un disparador de palabra clave del jugador — solo comprueba el mensaje del jugador, no la respuesta de la IA
La misión se completó pero el oro no cambió	Falta la acción "modificar variable gold add" en el comportamiento	Vuelve al editor de comportamientos y confirma que hay una acción "modificar variable gold add 30" después de la acción "modificar variable quest_1_complete"
La misma misión sigue dando recompensas repetidas	No hay condición configurada	Asegúrate de que la condición ONLY IF del comportamiento incluya `quest_1_complete eq false` — solo se dispara cuando no se ha completado todavía
El panel no se actualiza en tiempo real	Normal — el panel se refresca con el siguiente mensaje	La variable ya ha cambiado; espera a la respuesta de la IA o envía otro mensaje y el panel se actualizará automáticamente
La notificación no apareció	Falta la acción "mostrar notificación" en el comportamiento	Confirma que hay una acción de mostrar notificación en la lista de acciones con el estilo establecido en `achievement`
La misión "Defeat the wolf" no se dispara	Ambas palabras clave deben aparecer en el mismo mensaje	Asegúrate de que tu mensaje contenga tanto "defeat" como "wolf". Si escribiste "I beat the wolf", necesitarías cambiar la palabra clave a "beat" o añadir "beat" como alternativa

Yendo más allá: ampliando el sistema de misiones

Una vez que tengas los conceptos básicos, puedes construir sobre esta base.

Añadir más misiones

Añade una nueva variable booleana (quest_3_complete) y una variable de tipo string (quest_3_name) en la pestaña Variables, luego crea un comportamiento disparado por palabra clave correspondiente en la pestaña Behaviors. Por último, añade una línea al array quests en el Root Component:

tsx

const quests = [
  { name: quest1Name, done: quest1Done, reward: 30 },
  { name: quest2Name, done: quest2Done, reward: 50 },
  { name: quest3Name, done: quest3Done, reward: 100 },
];

Dejar que la IA asigne misiones

Puedes construir un flujo de "misión aceptada" — la IA describe una nueva misión en el diálogo, luego un comportamiento detecta una palabra clave específica y actualiza dinámicamente la variable del nombre de la misión:

Tipo de acción	Configuración
Modificar variable	Variable `quest_3_name`, operación `set`, valor `Escort the merchant to safety`
Mostrar notificación	Mensaje `New Quest: Escort the merchant to safety`, estilo `achievement`

Combinando con un sistema de tienda

El oro ganado por las misiones se puede gastar en una tienda. Mira la Receta #3 (Tienda y comercio) — usa la misma variable gold. El sistema de misiones añade oro, el sistema de tienda lo descuenta. Ambos sistemas comparten una única economía.

Cadenas de misiones

Puedes usar combinaciones de condiciones en los comportamientos para crear dependencias complejas de misiones. Por ejemplo, "solo puedes aceptar 'Save the Village' después de completar 'Find Herbs'":

Variable	Operador	Valor
`quest_1_complete`	igual (eq)	`true`
`quest_3_complete`	igual (eq)	`false`

Ambas condiciones deben satisfacerse para dispararse — asegura que la misión previa esté hecha y la misión actual no se haya completado todavía.

Referencia rápida

Qué quieres	Cómo hacerlo
Seguir la finalización de la misión	Crea una variable booleana, predeterminado `false`, categoría Flag
Detectar palabra clave para completar una misión	Tipo de disparador del comportamiento "Player said keyword" (`keyword`), ingresa palabras clave
Evitar disparos repetidos	Añade `quest_complete eq false` en las condiciones del comportamiento
Abrir un toast de logro al completar	Acción del comportamiento: mostrar notificación, estilo `achievement`
Otorgar oro al completar	Acción del comportamiento: modificar variable, `gold` add cantidad
Hacer saber a la IA que una misión se completó	Acción del comportamiento: Tell AI, escribe una frase explicando lo que pasó
Mostrar el panel de misiones	Lee variables en el Root Component, renderiza marcas de verificación/X y oro
Solo mostrar el panel en el último mensaje	Dentro de `<Chat renderBubble>`, comprueba `msg.messageIndex === msgs.length - 1`
Tachar las misiones completadas	Usa el estilo `textDecoration: "line-through"`
Mostrar progreso de finalización	Usa `quests.filter(q => q.done).length` para contar
Banner especial cuando se completan todas las misiones	Comprueba `completedCount === quests.length`

Pruébalo tú mismo — mundo demo importable

Descarga este JSON e impórtalo para experimentar el sistema completo de seguimiento de misiones:

recipe-6-demo.json

Cómo importar:

Ve a Yumina → My Worlds → Create New World
En el editor, haz clic en More Actions → Import Package
Selecciona el archivo .json descargado
Se crea un nuevo mundo con todas las variables, comportamientos y Root Component preconfigurados
Inicia una nueva sesión y pruébalo

Qué incluye:

5 variables (quest_1_complete y quest_2_complete para el estado de las misiones, gold para la moneda, quest_1_name y quest_2_name para los nombres de las misiones)
2 comportamientos (finalización de Find Herbs + finalización de Defeat the Forest Wolf, cada uno con comprobaciones de condición, modificaciones de variables, notificaciones y acciones tell-AI)
Un Root Component (panel rastreador de misiones: lista de misiones + distintivos de estado + contador de oro + progreso de finalización)

Esta es la Receta #6

Las recetas anteriores cubrieron el salto de escenas, los sistemas de combate, la tienda y el comercio, y la creación de personaje. Esta receta te enseña a construir un sistema de seguimiento de misiones usando variables booleanas + disparadores por palabra clave + comprobaciones de condición. El mismo patrón se extiende a sistemas de logros, seguimiento del progreso de la historia, árboles de misiones secundarias — cualquier cosa que necesite el bucle de "detectar evento → marcar estado → pagar recompensa → actualizar UI".

Rastreador de misiones ​

Lo que vas a construir ​

Cómo funciona ​

Paso a paso ​

Paso 1: Crea variables ​

Variable 1: Estado de finalización de la misión 1 ​

Variable 2: Estado de finalización de la misión 2 ​

Variable 3: Oro ​

Variable 4: Nombre de la misión 1 ​

Variable 5: Nombre de la misión 2 ​

Paso 2: Crea comportamientos ​

Comportamiento 1: Completar misión "Find Herbs" ​

Comportamiento 2: Completar misión "Defeat the Forest Wolf" ​

Paso 3: Añade el panel rastreador de misiones en el Root Component ​

Recorrido por el código ​

Configuración básica ​

Leyendo variables ​

Datos de la lista de misiones ​

Distintivo de estado ​

Contador de oro ​

Banner de todo completado ​

Paso 4: Guarda y prueba ​

Yendo más allá: ampliando el sistema de misiones ​

Añadir más misiones ​

Dejar que la IA asigne misiones ​

Combinando con un sistema de tienda ​

Cadenas de misiones ​

Referencia rápida ​

Pruébalo tú mismo — mundo demo importable ​