VNLEWIKITwórz historie. Łącz światy.
Polski
Podręcznik VNLE

GDevelop

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

GDevelop 5 · Zdarzenie JavaScript

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

Dodaj story.json do zasobów projektu jako zasób JSON o nazwie story.json. Utwórz obiekt Text o nazwie DialogueText i umieść go w scenie. Dodaj zdarzenie At the beginning of the scene, a pod nim poniższe zdarzenie JavaScript. Funkcja zwrotna po wczytaniu uzupełnia tekst na ekranie.

story.json · Opis plików eksportu

2 · Pokaż pierwszy tekst

// JavaScript event under "At the beginning of the scene".
// Register story.json as a JSON resource named story.json first.
const label = runtimeScene.getObjects('DialogueText')[0];
const manager = runtimeScene.getGame().getJsonManager();
manager.loadJson('story.json', (error, story) => {
  if (error || !story) { label.setString('Cannot load story.json'); return; }
  try {
    const locale = 'en';
    const id = 'fd7b61a3-8233-4ba7-8f77-b88b119a91bf';
    const content = story.content;
    const translation = content.translations[locale]?.[id];
    const message = translation ? translation.message : content.texts[id].sourceMessage;
    const line = message.segments.map(segment => {
      if (segment.kind !== 'text') throw new Error('Text-only example');
      return segment.text;
    }).join('');
    label.setString(line);
  } catch (error) { label.setString('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.

Obiekt tekstowy: setString(). Zdarzenia przycisków odpowiedzi przechowują ID opcji; JavaScript może odczytywać te same obiekty JSON. Przy zakończeniu ukryj obiekty dialogu przez hide(true) i uzależnij ich zdarzenia wejściowe od zmiennej sceny.

  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
Sprawdź odpowiedzi i warunek ilości złota w tym języku programowania

Odczyt danych wyboru

Wstaw ten fragment tam, gdzie po wczytaniu dostępny jest obiekt story (w RPG Maker: const story = $gameTemp.vnleExample.story;). Wypisuje on ID do sprawdzenia. Zastąp wypisywanie przyciskami odpowiedzi. Kod obsługuje dwie odpowiedzi ze sceny Harbour i następujący po nich warunek ilości złota; nie jest uniwersalnym interpreterem.

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

Przy 10 sztukach złota next wskazuje „Pay five gold”, a przy 2 — „Not enough gold”. W grze sprawdzaj warunek dopiero wtedy, gdy wybrana ścieżka dotrze do tego węzła. Każda odpowiedź wskazuje własną dalszą ścieżkę.

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 the image to a Portrait Sprite animation named Mira in the editor.
const animations = {'807b2957-7bab-4a28-83a4-1f3d1589bbc2': 'Mira'};
const portrait = runtimeScene.getObjects('Portrait')[0];
const animation = animations[node.speakerRef];
portrait.hide(!animation);
if (animation) portrait.setAnimationName(animation);

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

Zarejestruj plik jako zasób projektu i zachowaj go przy eksporcie; nie wpisuj na stałe lokalnej ścieżki dyskowej. Funkcja zwrotna działa asynchronicznie: kolejne zdarzenia muszą poczekać na pomyślne wczytanie, zanim użyją danych.

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: