Editor de Diálogos#

El Editor de Diálogos arma árboles de conversación — las líneas de NPC y las opciones del jugador que disparan una interacción TALK. Un diálogo es un conjunto de nodos, cada uno con una línea de NPC y una lista de opciones; elegir una opción puede saltar a otro nodo, terminar la conversación, condicionarse a un flag, o disparar tokens de efecto. Guarda en el dialogs.json del proyecto, indexado por el id propio del diálogo.

Llegas a él desde el Hub (con el dev server corriendo). El panel TREE de la izquierda lista cada nodo del diálogo cargado; el panel central abre por defecto en el grafo ◇ Visual de todo el árbol y alterna al formulario ✎ Advanced de un solo nodo; el panel derecho tiene VALIDATE y PREVIEW.

La pantalla del Editor de Diálogos — un árbol de conversación con sus nodos y opciones. — Editor de Diálogos — árbol de conversación con nodos y opciones.

Anatomía de un nodo#

Node ID — la clave del nodo dentro del árbol, mostrada como título de la sección. Es lo que referencian los goto, así que renombrar un nodo (con la acción de renombrar del panel de árbol) reescribe cada opción que apunte a él — el editor mantiene eso sincronizado por ti. Renombrar un nodo (o reescribir un Choice ID) también arrastra las traducciones guardadas de su línea y de cada opción que cuelga de él a la dirección nueva. Si esa dirección ya tiene traducciones —normalmente una huérfana que dejó algo borrado— el editor te muestra el texto aparcado, idioma por idioma, y te pregunta si usarlo (tu redacción del idioma fuente sigue mandando) o descartarlo; cancelar no cambia nada. Hay un caso que no se detiene a preguntar: una opción que todavía lleva su id placeholder se sluggea sola mientras escribes su texto, así que la mudanza pasa a mitad de frase. Ahí el editor conserva lo que escribiste y te avisa que la dirección vieja se quedó con sus traducciones, en vez de interrumpirte una edición que estabas haciendo.
NPC line — la línea que dice el NPC cuando este nodo está activo. Se autora monolingüe en el defaultLocale del proyecto (content i18n): la escribes una vez, en un idioma, y las traducciones se completan después en el Editor de Traducción, no acá inline.
Start node — un nodo por diálogo es el punto de entrada (tree.start); el panel de árbol lo marca con una insignia, y cualquier nodo puede promoverse con la acción ★.

Opciones#

Cada nodo tiene una lista ordenada de tarjetas de opción, reordenables con ↑ / ↓:

Choice ID — una clave estable para la opción, auto-generada como slug de su texto la primera vez que escribes (edítala directamente para sobrescribirla). Es lo que usa el seguimiento de once y la verificación de duplicados del validador.
Text — la línea que ve el jugador, misma regla de autoría monolingüe que la línea de NPC.
Goto — el nodo al que lleva esta opción, o END para cerrar la conversación. Dejarlo vacío solo es válido en una opción equivalente a END — el validador marca un goto que apunta a un nodo que ya no existe.
showIf / hideIf — nombres de flag que condicionan la visibilidad de la opción en preview/runtime: showIf exige que el flag esté activo, hideIf la oculta una vez que el flag se activa. El autocompletado ofrece tres fuentes a la vez: cada flag que el proyecto ya usa en cualquier parte (el mismo barrido del servidor que leen los pickers de flag del editor de efectos), los flags tipeados en este diálogo y todavía sin guardar, y los flags reservados del motor — nombres que el motor mantiene solo, como el tamaño vivo del grupo, que ningún barrido del proyecto puede encontrar y que si no habría que saber de memoria. Sigue siendo texto libre a propósito: un flag se crea al escribirlo, así que un nombre que nadie usó todavía tiene que poder tipearse.
once — oculta la opción de nuevo después de elegirla la primera vez (por diálogo, rastreado internamente como un flag de "ya visto").
Effects — el widget compartido de tokens de efecto (el mismo que se usa en reglas y cutscenes), con cada argumento que porta un ID (room, item, flag, hotspot…) como un picker tipado en vez de texto libre. Estos corren por applyEffects() al elegir la opción, así que SETFLAG, GIVEITEM:<item>|<char>, SAY y cualquier otro token se comportan exactamente igual que en una regla o cutscene. Cada token lleva un asa ⠿ a la izquierda: arrástrala para reordenar la cadena, y suéltala dentro o fuera de un if-block — un token puede pasar de la lista principal a una rama THEN, o volver, sin reescribirlo. (Las asas están en la vista ✎ Advanced; la vista Visual muestra el grafo, no el formulario del nodo.)

Vista Visual (la de por defecto)#

El panel central abre en ◇ Visual, un mapa interactivo de toda la conversación, y alterna al formulario clásico de un solo nodo con ✎ Advanced. Visual es donde vas a trabajar la mayoría del tiempo: cada nodo es una card, cada opción un cable al nodo al que lleva, así ves la forma de un diálogo — sus ramas, callejones sin salida y bucles — y la editas en el mismo lugar.

El mapa se lee por color y línea:

El nodo de inicio es verde (el único punto de entrada de la conversación) y el sumidero END es rojo (donde aterriza cada opción de cierre). Los nodos ordinarios son neutros, cada uno etiquetado con su id, su línea de NPC y cuántas opciones tiene.
Una opción condicional — condicionada por showIf o hideIf — dibuja su cable ámbar punteado en vez de una línea sólida, así las ramas que solo se abren con el flag correcto resaltan frente a las que siempre están disponibles.
Una opción once lleva el prefijo 1× en su etiqueta; una opción que apunta de vuelta a su propio nodo (un bucle) se lista como anotación ↩ bajo el nodo en vez de un cable que se curva sobre sí mismo.

Es una superficie de trabajo, no solo una imagen:

Una paleta arriba agrega piezas en el orden en que se arma un diálogo — START (marca el nodo seleccionado como punto de entrada), NODE (una línea de NPC nueva), CHOICE y END (agregan una opción, o una opción que cierra la conversación, al nodo seleccionado), y ADV. (salta al formulario Avanzado).
La línea de NPC de cada card es editable in situ — haz clic en la burbuja de diálogo y escribe, sin modal.
Arrastra el puerto de conexión ○ de una card hasta otro nodo para cablear el goto de una opción a mano.
Doble clic en una card, o clic en su ✎, abre el formulario completo del nodo en un modal — el mismo editor que monta la vista Avanzado, así que cada campo (texto de opción, showIf/hideIf, once, efectos) está ahí sin salir del grafo.

La navegación es el manejo de grafo habitual: scroll para zoom, arrastra el fondo para hacer pan, arrastra un nodo para reubicarlo; tu distribución se recuerda por diálogo, y ⊡ Reset view limpia esos ajustes y vuelve a correr el layout automático de arriba hacia abajo.

Pestaña VALIDATE#

Corre en cada edición y bloquea ⚡ Save to Game mientras queden errores. Verifica: que el árbol tenga un id y un nodo de inicio, que el nodo de inicio exista, que cada nodo sea alcanzable desde el inicio (un recorrido del grafo por los goto), que cada opción tenga un id único no vacío y texto no vacío, y que cada goto apunte a un nodo real o a END. También avisa (sin bloquear) cuando un flag se activa con SETFLAG/CLEARFLAG en algún lugar del árbol pero nunca se lee con ningún showIf/hideIf — normalmente señal de que el flag se piensa leer en otro lado (una regla de cuarto, otro diálogo) y no un error.

Pestaña PREVIEW#

Corre el runtime real de diálogo (core/dialog.js — openDialog/visibleChoices/choose) contra un estado de juego de prueba, dentro del propio editor, así que lo que clickeas se comporta exactamente como lo hará en el juego: el filtrado por showIf/hideIf, el seguimiento de once, y las transiciones de nodo pasan por las mismas funciones que llama el motor final. La fila de flags te deja activar cualquier flag que referencie el árbol (o agregar uno arbitrario) para recorrer distintas ramas; ES/EN cambia el idioma en que renderiza el preview; ↺ Restart reinicia la conversación a su nodo de inicio. El ENGINE EFFECTS LOG de abajo lista cada token de efecto que disparó una opción elegida, en orden — no los ejecuta (no hay un cuarto real al que afectar), pero es la forma más rápida de confirmar que una opción dispara los tokens esperados antes de conectarla al juego.

Flujo de trabajo#

New… y dale al diálogo un id estable; se crea un nodo root como inicio.
Escribe la NPC line, luego + Add Choice por cada respuesta del jugador.
Fija el text, goto (o END) y cualquier condición showIf/hideIf de cada opción.
Agrega effects con el widget compartido para todo lo que la opción deba hacer más allá de avanzar la conversación.
Agrega más nodos desde el panel de árbol y enlázalos con goto; revisa que VALIDATE se mantenga limpio a medida que avanzas.
Recorre el árbol en PREVIEW, activando flags para ejercitar cada rama.
⚡ Save to Game para escribir dialogs.json.

El texto de diálogo es monolingüe; las traducciones viven en el Editor de Traducción. La línea de NPC y el texto de cada opción se autoran una sola vez, en el defaultLocale del proyecto — acá no hay un par ES/EN que llenar. Cada línea recibe un lid estable por detrás (dialogVoiceLid/dialogChoiceLid) en cuanto guardas, y esa es la fila que la sección Diálogos del Editor de Traducción completa para cada otro locale configurado. No autores a mano un objeto {es, en} en el texto de una opción — el editor ya escribe el literal monolingüe más el slot de lid por ti.

Borrar un nodo o una opción ahora ofrece llevarse sus filas. La pregunta llega al apretar Guardar, no al apretar la ✕ — hasta ahí el nodo sólo desapareció de la pantalla. Un nodo borrado se lleva las filas de sus opciones en la misma pregunta, porque a esas tampoco llega ya nada. El diálogo muestra el texto de cada fila en todos los idiomas que tenga, y cerrarlo significa conservar: una fila guardada es lo que permite que un nodo recreado adopte sus traducciones viejas, y el Doctor del Proyecto puede barrerla después si nunca vuelve.