Cocos Creator

← Inhalte ins Spiel einbauen

Cocos Creator 3.8 LTS · TypeScript

Beginne mit einem sichtbaren Satz. Dieses kleine Beispiel liest direkt den echten Harbour-Export; es ist kein vollständiger Dialogplayer. Anschließend verbindest du die Daten mit deiner Spieloberfläche.

1 · Dateien und Szene vorbereiten

Hier geht es um Cocos Creator 3.8, nicht Cocos2d-x. Lege story.json unter assets/resources/story/story.json ab. Erstelle unter einem Canvas ein Label. Hänge FirstText.ts an einen Knoten und ziehe das Label in das Feld dialogue. Starte die Vorschau.

story.json · Exportdateien erklärt

2 · Den ersten Text anzeigen

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'; }
    });
  }
}

Erwartet: „Welcome to the harbour. I am Mira.“ Mit locale = "de" beziehungsweise dem Sprachparameter de: „Willkommen im Hafen. Ich bin Mira.“ Fehlt die Sprache, wird der Quelltext verwendet. Das Beispiel unterstützt Textsegmente; Platzhalter werden absichtlich nicht stillschweigend übersprungen.

3 · Von einem Satz zum Gespräch

Die feste Text-ID oben dient dem ersten Test. Im Spiel wählst du flowRef/entryRef aus story-index.json, liest execution.entries[entryRef].nodeRef und dann execution.nodes[nodeRef]. Der aktuelle Dialog liefert text.textRef und speakerRef. Fortsetzungen hängen vom Knotentyp ab.

Name/Dialog: Label.string. Antworten: Button-Ereignisse oder Node.EventType.TOUCH_END; Options-ID speichern. Ende: den Dialog-Elternknoten über node.active = false ausblenden. Eine Sprachänderung löst die Texte erneut auf; die aktuelle Knoten-ID bleibt gleich.

1. Weiter und Ende: Verbindungen verfolgen, Textbox schließen
2. Choices: Antwort-ID, Reihenfolge und ausgewählter Ausgang
3. Conditions und Variablen: zehn oder zwei Goldstücke
4. Sprache: dieselben IDs, neu aufgelöste Inhalte
5. Command: Gegenstand geben oder einen Shop öffnen
6. Call/Return: Untergeschichte aufrufen und zurückkehren

// 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 · Eigene Bilder zuordnen

Dieses Ergänzungsstück setzt einen aktuellen dialogue-Knoten namens node und die im Kommentar genannten UI-Elemente voraus. Bei C++ und MonoGame ist speakerRef bereits als SpeakerId beziehungsweise speakerId ausgelesen. Der Schlüssel ist Miras tatsächliche Charakter-ID; der Bildname und sein Ablageort gehören deinem Spiel. Füge die Zeilen an den angegebenen Stellen ein.

// 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.

Sprechernamen über content.characters[speakerRef].nameTextRef genauso wie Dialogtexte auflösen. Eine fehlende Zuordnung soll das alte Porträt ausblenden oder ein Ersatzbild zeigen. Bilder werden nicht nach Sprache gewählt.

Bildverweise aus dem vollständigen Export verwenden

5 · Dateien mit dem Spiel ausliefern

resources.load verwendet den Pfad unter resources ohne Dateiendung. Auf den Callback warten. Referenzierte SpriteFrames oder Bilder unter resources mitliefern; Pfade und Groß-/Kleinschreibung auch im gebauten Spiel prüfen.

Dein Ergebnis prüfen

1. Der englische und deutsche Begrüßungstext erscheinen korrekt; eine nicht vorhandene Sprache fällt auf Englisch zurück.
2. Beim Ergänzen des Ablaufs: beide Antworten, Gold 10/2, Rückkehr aus der Untergeschichte und Ende ausprobieren.
3. Den gebauten Spielordner außerhalb deines Projekts starten. JSON, Schriften und Porträts müssen dort ebenfalls vorhanden sein.

Offizielle Dokumentation

API- und Einrichtungsreferenzen für diesen Weg:

• Asset loading / SpriteFrame paths
• JsonAsset API
• Label