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.

Al volver, el editor reabre el diálogo que estabas editando. Un enlace desde otro editor siempre le gana a esa memoria (es alguien diciendo «llévame a éste») y la memoria sólo aplica cuando nadie pidió nada en particular. Un enlace que apunta a un diálogo que ya no existe te deja en el estado vacío sin tocar lo que tenías recordado. Se lleva por proyecto.

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.

Crear un diálogo#

New… pregunta primero ¿Con quién se habla? y lista tus personajes. Elige uno y el editor propone un nombre para el diálogo a partir del id del personaje (con _2 si ya tiene uno); igual puedes escribir el tuyo, en minúsculas y sin espacios. La primera vez que haces Save to Game, Talk to sobre ese personaje empieza a abrir este diálogo: no hace falta pasar por el Reactions Editor para enlazarlos. Si el personaje ya abre otro diálogo, el formulario te dice cuál antes de crearlo; ese diálogo no se borra, sólo deja de ser el que abre Talk to.

Elige (nadie, lo abro desde una reacción) para un diálogo que vas a arrancar de otra forma, desde una reacción o una cutscene.

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 guardado, 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 aquí 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 cinemáticas), 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 cinemática. 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; te pide el id del nodo, con uno sugerido ya escrito, así que basta con Enter), 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). El + Add Node del panel de árbol hace ese mismo paso de nombrado y sólo aparece en ✎ Avanzado; en Visual la puerta es la paleta.
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. Dos gestos más sobre el nodo: ⌫ borra el nodo seleccionado (con confirmación, y no hace nada mientras escribes en una burbuja; en Windows la tecla Delete también sirve), y arrastrar el borde derecho de una card la ensancha, entre 150 y 560 px, que es como le das aire a una línea larga. Tu distribución (posiciones, anchos y encuadre) 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 Guardar en Juego 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; ↺ Restart reinicia la conversación a su nodo de inicio. El preview corre siempre en la locale de autoría del proyecto: el texto de diálogo se escribe monolingüe, y todo lo de traducción vive en el editor de Traducciones, que tiene su propia sección DIÁLOGOS y su chip de filtro. 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.

Sandbox de estilo#

▶ Sandbox, junto a ↺ Reiniciar en la pestaña PREVIEW, abre un panel flotante que corre el diálogo cargado con el render del propio juego, sobre una de tus salas y con el NPC que habla parado en ella. Ahí decides cómo se ven las conversaciones; la pestaña PREVIEW sigue siendo el lugar para revisar la lógica del árbol.

Juégalo como en el juego. Haz clic en una opción, o presiona de 1 a 9, para elegirla. Un clic (o un número) mientras la línea del NPC se sigue escribiendo la completa, y las opciones aparecen cuando termina. ⟲ Línea vuelve a escribir la línea actual; ↺ Reiniciar regresa al primer nodo con todos los flags apagados.
Los Flags son chips: haz clic en uno para prenderlo o apagarlo y ve cómo aparecen y desaparecen las opciones con showIf/hideIf. El SETFLAG, CLEARFLAG y TOGGLEFLAG de una opción elegida cambian esos chips; cualquier otro token que dispare se lista en Efectos, sin ejecutarse. Estos flags viven sólo en el sandbox y nunca tocan una partida guardada.
Sala e Idioma eligen el fondo y el idioma del texto. La sala arranca en la del propio hablante. El hablante es el personaje para el que Talk to abre este diálogo (o, si no hay, el que tiene el id del diálogo); si no hay ninguno, la línea va arriba al centro, como en el juego, y el panel te lo dice.
Idioma arranca en el idioma del editor cuando el proyecto lo tiene, y si no, en el idioma fuente, que la lista marca como (autorado). En cualquier otro idioma, el panel te avisa cuántas líneas del nodo abierto no tienen traducción y salen como se autoraron; esas se completan en el Editor de Traducción.
Estilo (cada cambio se ve en el siguiente cuadro):
- Preset: tres puntos de partida: Clásico Ignitor (el look de siempre del motor), Estilo SCUMM (texto suelto, sin números, con glow) y Ámbar Ignitor. Toca cualquier control y el preset pasa a Personalizado.
- Opciones: Numerar las opciones, Caja por opción y los colores: el texto de la opción en reposo y bajo el mouse, el número, y el relleno y el borde de la fila con sus variantes de hover (esos cuatro sólo cuentan con la caja prendida).
- Hover: Instantáneo cambia el color de golpe; Glow suma un halo suave del color de hover que aparece y se desvanece.
- Aparición del texto: Instantáneo o Máquina de escribir, con un fader de Velocidad en caracteres por segundo (de 5 a 200).
- El jugador dice la opción elegida: antes de que el diálogo siga, el jugador dice la opción que elegiste en su propio globo, y un clic o una tecla de número lo apuran. Los proyectos nuevos lo traen prendido; apágalo si ya escribes esa línea tú con un SAY. El sandbox no tiene jugador que la diga, así que el efecto se ve en el juego.
Guardar escribe el estilo en project.json para todo el proyecto; Restaurar default pregunta y luego lo quita, y el proyecto vuelve al look del motor. Sólo se guarda lo que difiere del default, así que un color que nunca tocaste sigue al motor. Cerrar el panel con cambios sin guardar pregunta antes. Volver a hacer clic en ▶ Sandbox conserva el estilo sin guardar y sólo reinicia el diálogo, y salir del editor o cerrar la ventana también pregunta por él, como con cualquier otro cambio sin guardar.

El estilo es del proyecto, y la máquina de escribir alcanza todo lo hablado. No se guarda en el diálogo: lo usan todos los diálogos del proyecto. La aparición del texto también aplica fuera de los diálogos: SAY, NPCSAY, las líneas de cinemática y el narrador se escriben a la misma velocidad. Una línea que se escribe queda en pantalla su tiempo de tecleo más el tiempo de lectura de siempre, y una con voz dura lo que su clip pero nunca menos que eso. En el juego, un clic mientras una línea se escribe primero la completa, igual que aquí; en la sala ese mismo clic igual camina o usa como siempre. Un proyecto sin estilo guardado se ve exactamente como siempre.

Flujo de trabajo#

New…, elige el personaje para el que es (o nadie) y confirma el nombre; 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.
Abre ▶ Sandbox para verlo con el render del juego y afinar cómo se ven las conversaciones; ese estilo se guarda para todo el proyecto.
Guardar en Juego para escribir dialogs.json. Si un nodo o una opción que borraste todavía tenía traducciones guardadas (incluida una que creaste y quitaste en la misma sesión, o una que quedó de otra anterior), el guardado te muestra esas filas y te pregunta si borrarlas o dejarlas guardadas; las guardadas se vuelven a ofrecer en el siguiente guardado.

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; aquí 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.