Cocos Creator

← Połącz treść ze swoją grą

Cocos Creator 3.8 LTS · TypeScript

Zacznij od jednego widocznego zdania. Ten krótki przykład odczytuje bezpośrednio rzeczywisty eksport The Harbour Key; nie jest kompletnym systemem odtwarzania dialogów. Następnie połącz dane z interfejsem swojej gry.

1 · Przygotowanie plików i sceny

Instrukcja dotyczy Cocos Creator 3.8, a nie Cocos2d-x. Umieść story.json w assets/resources/story/story.json. Utwórz Label pod Canvas. Dodaj FirstText.ts do węzła i przypisz Label do pola dialogue. Uruchom Preview.

story.json · Opis plików eksportu

2 · Pokaż pierwszy tekst

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

Oczekiwany wynik: „Welcome to the harbour. I am Mira.” Przy locale = "de" lub parametrze języka de: „Willkommen im Hafen. Ich bin Mira.” Jeśli język jest niedostępny, zostanie użyty tekst źródłowy. Przykład obsługuje segmenty tekstowe; celowo nie pomija po cichu znaczników podstawianych wartości.

3 · Od jednego zdania do rozmowy

Stały identyfikator tekstu powyżej służy do pierwszego testu. W grze wybierz flowRef/entryRef z story-index.json, odczytaj execution.entries[entryRef].nodeRef, a następnie execution.nodes[nodeRef]. Bieżący dialog udostępnia text.textRef i speakerRef. Dalszy przebieg zależy od typu węzła.

Imię i dialog: Label.string. Odpowiedzi: zdarzenia Button lub Node.EventType.TOUCH_END z zachowaniem ID opcji. Zakończenie: ustaw node.active = false dla węzła nadrzędnego dialogu. Zmiana języka ponownie odczytuje tekst bez zmiany ID bieżącego węzła.

1. Continue i End: przechodzenie po połączeniach i zamykanie okna tekstu
2. Wybory: ID odpowiedzi, kolejność i dalsza ścieżka
3. Warunki i zmienne: dziesięć lub dwie sztuki złota
4. Język: te same ID, treść odczytana w innym języku
5. Polecenie: wydanie przedmiotu lub otwarcie sklepu
6. Call/Return: wywołanie pobocznej sekwencji i powrót

// 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 · Przypisz własne obrazy

Ten dodatkowy fragment zakłada dostępność bieżącego obiektu dialogu o nazwie node i elementów interfejsu wymienionych w komentarzach. W C++ i MonoGame speakerRef został już odczytany jako SpeakerId lub speakerId. Klucz to rzeczywisty identyfikator postaci Mira; nazwę i lokalizację obrazu ustalasz w swojej grze. Wstaw linie we wskazanych miejscach.

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

Odczytuj imiona przez content.characters[speakerRef].nameTextRef tak samo jak tekst dialogu. Jeśli brakuje przypisanego obrazu, ukryj poprzedni portret lub pokaż obraz zastępczy. Wybór obrazu nie zależy od języka.

Użyj odwołań do obrazów z pełnego eksportu

5 · Dołącz pliki do gry

resources.load używa ścieżki względem resources, bez rozszerzenia. Poczekaj na wywołanie funkcji zwrotnej. Umieść potrzebne SpriteFrames lub obrazy w resources; sprawdź ścieżki i wielkość liter również w zbudowanej grze.

Sprawdź wynik

1. Powitania po angielsku i niemiecku wyświetlają się poprawnie; dla niedostępnego języka pojawia się tekst angielski.
2. Po dodaniu obsługi przebiegu sprawdź obie odpowiedzi, 10 i 2 sztuki złota, powrót z pobocznej sekwencji oraz End.
3. Uruchom zbudowaną grę poza folderem projektu. Pliki JSON, czcionki i portrety muszą być dostępne także tam.

Oficjalna dokumentacja

Dokumentacja API i konfiguracji użytych w tej instrukcji:

• Wczytywanie zasobów i ścieżki SpriteFrame
• JsonAsset API
• Label