Podręcznik VNLE

Phaser

Phaser 3.90 · 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

Utwórz index.html, first-text.js i story/story.json w jednym projekcie WWW. Dodaj Phaser 3.90 przed first-text.js za pomocą znaczników script. Możesz użyć istniejącego pliku examples/phaser/phaser.min.js. Otwórz projekt przez lokalny serwer WWW, a nie przez dwukrotne kliknięcie pliku HTML.

story.json · Opis plików eksportu

2 · Pokaż pierwszy tekst

<!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 · Licencja 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});

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: Text.setText(). Odpowiedzi: Text.setInteractive() i pointerdown, każdy z ID swojej opcji. Przy zakończeniu ukryj obiekty dialogu przez setVisible(false) i wyłącz ich obsługę wejścia; scena gry nadal działa.

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.

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

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

Zachowaj JSON i obrazy w publikowanym folderze WWW. Ścieżki są względne wobec strony HTML, chyba że skonfigurujesz ścieżkę loadera. Korzystaj z danych w create; preload kolejkuje żądania wczytania. Sprawdzaj błędy ładowania.

Sprawdź wynik

Powitania po angielsku i niemiecku wyświetlają się poprawnie; dla niedostępnego języka pojawia się tekst angielski.
Po dodaniu obsługi przebiegu sprawdź obie odpowiedzi, 10 i 2 sztuki złota, powrót z pobocznej sekwencji oraz End.
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: