Cocos Creator

← Integra el contenido en tu juego

Cocos Creator 3.8 LTS · TypeScript

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

Este ejemplo utiliza Cocos Creator 3.8, no Cocos2d-x. Coloca story.json en assets/resources/story/story.json. Crea un Label dentro de un Canvas. Añade FirstText.ts a un nodo y asigna el Label al campo dialogue. Ejecuta Preview.

story.json · Explicación de los archivos exportados

2 · Mostrar el primer texto

import { _decorator, Component, JsonAsset, Label, resources } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('FirstText')
export class FirstText extends Component {
  @property(Label) dialogue: Label | null = null;

  start() {
    resources.load('story/story', JsonAsset, (error, asset) => {
      if (!this.dialogue) return;
      if (error || !asset) { this.dialogue.string = 'Cannot load story.json'; return; }
      try {
        // A data-only sample: validate the complete contract in your integration.
        const story = asset.json as any;
        const locale = 'en';
        const id = 'fd7b61a3-8233-4ba7-8f77-b88b119a91bf';
        const translation = story.content.translations[locale]?.[id];
        const message = translation ? translation.message : story.content.texts[id].sourceMessage;
        this.dialogue.string = message.segments.map((segment: any) => {
          if (segment.kind !== 'text') throw new Error('Text-only example');
          return segment.text;
        }).join('');
      } catch (error) { this.dialogue.string = 'Cannot read this story text'; }
    });
  }
}

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: Label.string. Respuestas: eventos de Button o Node.EventType.TOUCH_END, conservando el identificador de la opción. End: establece node.active = false en el nodo padre del diálogo. Al cambiar de idioma, vuelve a resolver el texto sin cambiar el identificador del nodo actual.

1. Continue y End: seguir las conexiones y cerrar la caja de texto
2. Opciones: ID de respuesta, orden y continuación seleccionada
3. Condiciones y variables: diez o dos monedas de oro
4. Idioma: los mismos IDs, contenido recién resuelto
5. Command: dar un objeto o abrir una tienda
6. Call/Return: entrar en una subhistoria y regresar

// 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);

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.

// Add Sprite and SpriteFrame to the imports from cc.
// Import mira.png at assets/resources/portraits/mira.png as a sprite-frame image.
const portraits: Record<string, string> = {'807b2957-7bab-4a28-83a4-1f3d1589bbc2': 'portraits/mira/spriteFrame'};
const path = portraits[node.speakerRef];
// portrait is the Sprite component assigned by your game.
portrait.spriteFrame = null;
if (path) resources.load(path, SpriteFrame, (error, frame) => {
  if (!error) portrait.spriteFrame = frame;
});
// If the dialogue can advance during loading, discard callbacks from older lines.

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

resources.load utiliza la ruta relativa a resources, sin extensión. Espera a su función de respuesta. Incluye los SpriteFrames referenciados o las imágenes dentro de resources; comprueba las rutas y las mayúsculas y minúsculas también en el juego compilado.

Comprueba el resultado

1. Los saludos en inglés y alemán se muestran correctamente; si el idioma no está disponible, se usa el inglés.
2. Al añadir el flujo, prueba ambas respuestas, 10 y 2 monedas de oro, el regreso de la subhistoria y End.
3. 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:

• Carga de recursos y rutas de SpriteFrame
• API de JsonAsset
• Label