Manual de VNLE

Phaser

Phaser 3.90 · JavaScript

Empieza mostrando una frase. Este pequeño ejemplo lee directamente la exportación real del puerto; no es un reproductor completo de diálogos. Después, conecta los datos a la interfaz de tu juego.

1 · Preparar archivos y escena

Crea index.html, first-text.js y story/story.json en el mismo proyecto web. Incluye Phaser 3.90 antes de first-text.js mediante etiquetas script. Puedes usar el archivo existente examples/phaser/phaser.min.js. Abre el proyecto mediante un servidor web local, no haciendo doble clic en el HTML.

story.json · Explicación de los archivos exportados

2 · Mostrar el primer texto

<!doctype html>
<html lang="en"><meta charset="utf-8"><title>First VNLE text</title>
<script src="phaser.min.js"></script>
<script src="first-text.js"></script></html>

Phaser 3.90 · Licencia de Phaser

class FirstText extends Phaser.Scene {
  preload() {
    this.load.json('story', 'story/story.json');
    this.load.on('loaderror', file => console.error('Cannot load', file.src));
  }
  create() {
    const story = this.cache.json.get('story');
    if (!story) { this.add.text(24, 24, 'Cannot load story.json'); return; }
    const locale = 'en';
    const id = 'fd7b61a3-8233-4ba7-8f77-b88b119a91bf';
    const record = story.content.texts[id];
    const translation = story.content.translations[locale]?.[id];
    const message = translation ? translation.message : record.sourceMessage;
    const text = message.segments.map(segment => {
      if (segment.kind !== 'text') throw new Error('Text-only example');
      return segment.text;
    }).join('');
    this.add.text(24, 24, text, {fontSize: '24px', wordWrap: {width: 720}});
  }
}
new Phaser.Game({type: Phaser.AUTO, width: 800, height: 300, scene: FirstText});

Resultado esperado: «Welcome to the harbour. I am Mira.». Con locale = "de" o el parámetro de idioma de: «Willkommen im Hafen. Ich bin Mira.». Si falta un idioma, se usa el texto original. Este ejemplo admite segmentos de texto; no descarta silenciosamente los marcadores de posición.

3 · De una frase a una conversación

El identificador de texto fijo anterior sirve para la primera prueba. En tu juego, elige flowRef/entryRef en story-index.json, lee execution.entries[entryRef].nodeRef y después execution.nodes[nodeRef]. El diálogo actual proporciona text.textRef y speakerRef. La continuación depende del tipo de nodo.

Nombre y diálogo: Text.setText(). Respuestas: Text.setInteractive() y pointerdown, conservando el identificador de cada opción. End: oculta los objetos de diálogo con setVisible(false) y desactiva su entrada; mantén la escena del juego en ejecución.

Examina las respuestas y la comprobación del oro en este lenguaje

Leer los datos de una decisión

Inserta este fragmento donde story esté disponible tras la carga (en RPG Maker: const story = $gameTemp.vnleExample.story;). Muestra los identificadores para examinarlos. Sustituye esa salida por tus botones de respuesta. Cubre las dos respuestas del puerto y la comprobación de oro posterior; no es un intérprete general.

// story is already loaded. Keep each optionId on its answer button.
const choice = story.execution.nodes['42edfff8-b8fe-46bf-ae0d-9e2347b6e726'];
for (const optionId of choice.optionOrder) {
  const option = choice.options[optionId];
  console.log(optionId, option.text.textRef); // Resolve text, then create your button.
}
// Inspect the actual purchase check. This particular node is Gold >= 5.
const branch = story.execution.nodes['c1c3c372-0a73-4cd0-851d-ede59d5709bb'];
const gold = 10; // Repeat with 2, using your current game value.
const next = gold >= branch.condition.right.value.value ? branch.whenTrue : branch.whenFalse;
console.log(next.nodeRef);

Con 10 monedas de oro, next apunta a «Pay five gold»; con 2, a «Not enough gold». En el juego, ejecuta la comprobación solo cuando el recorrido elegido alcance este nodo. Cada respuesta seleccionada aporta su propia continuación.

4 · Asocia tus propias imágenes

Este fragmento adicional espera un objeto de diálogo actual llamado node y los elementos de interfaz indicados en sus comentarios. Para C++ y MonoGame, speakerRef ya se ha leído como SpeakerId o speakerId. La clave es el identificador real del personaje Mira; el nombre y la ubicación de la imagen pertenecen a tu juego. Inserta las líneas en los lugares indicados.

// preload(): the key is a real VNLE character ID; the file is yours.
this.load.image('807b2957-7bab-4a28-83a4-1f3d1589bbc2', 'assets/portraits/mira.png');
// create(): keep one image for the dialogue bar.
this.portrait = this.add.image(100, 180, '807b2957-7bab-4a28-83a4-1f3d1589bbc2').setVisible(false);
// When showing a dialogue; node is your current dialogue object:
const key = node.speakerRef;
this.portrait.setVisible(Boolean(key && this.textures.exists(key)));
if (key && this.textures.exists(key)) this.portrait.setTexture(key);

Resuelve los nombres de los personajes mediante content.characters[speakerRef].nameTextRef, igual que el texto del diálogo. Si falta una asociación de imagen, oculta el retrato anterior o muestra una imagen de sustitución. Las imágenes no se seleccionan según el idioma.

Usar las referencias de imagen de la exportación completa

5 · Incluye los archivos en el juego

Conserva el JSON y las imágenes en la carpeta web publicada. Las rutas son relativas a la página HTML, salvo que se configure una ruta de carga. Usa los datos en create; preload pone las solicitudes en cola. Comprueba los errores de carga.

Comprueba el resultado

Los saludos en inglés y alemán se muestran correctamente; si el idioma no está disponible, se usa el inglés.
Al añadir el flujo, prueba ambas respuestas, 10 y 2 monedas de oro, el regreso de la subhistoria y End.
Ejecuta el juego compilado fuera de la carpeta del proyecto. El JSON, las fuentes y los retratos también deben estar disponibles allí.

Documentación oficial

Referencias de API y configuración para este enfoque: