@lazarow/phaser3-builder

Phaser3 Builder

Autor: Arkadiusz Nowakowski

Repozytorium ma na celu uproszczenie zajęć z zakresu tworzenia gier z wykorzystaniem silnika Phaser3.

Jak używać niniejszego kodu?

W swoim projekcie gry należy zainstalować niniejszą bibliotekę za pomocą standardowej komendy npm-a:

npm i @lazarow/phaser3-builder

Dodatkowo, aby VS Code podpowiadał prawidłowo metody Phaser-a należy doinstalować samą bibliotekę:

npm i phaser

Następnie należy przygotować podstawowe pliki gry: domyślną scenę gry oraz konfigurację. Biblioteka oparta jest o narzędzie gulp, które automatyzuje proces budowania gry za pomocą następujących kroków:

• kopiowanie plików HTML wymaganych do uruchomienia gry, w tym pliki: index.html oraz favicon.ico;
• kopiowanie zasobów gry umieszczonych w wyznaczonym folderze;
• zbudowanie skryptu gry wraz z transpilacją za pomocą Babel-a (konwersja z nowych standardów JS-a do obsługiwanej przez przeglądarki wersji).

Gra wpiera skalowanie gry przez możliwość wczytania zasobów z przyrostkiem @X, gdzie X to aktualny współczynnik skalowania (np. 2 oznacza dwa razy więcej pikseli od rozmiaru bazowego). Pliki można importować przy pomocy dodatkowej metody getScaleSuffix(), dodanej do obiektu gry, np.:

this.load.atlas(
    'sprites',
    'images/' + this.game.getScaleSuffix('spritesheet.png'),
    'images/' + this.game.getScaleSuffix('spritesheet.json')
);

Przykładowo, w przypadku gdy współczynnik skalowania wynosi 2 (dostępny przez własność this.game.scaleFactor) wówczas wczytane pliki to images/[e-mail] oraz images/[e-mail].

Przez scenę mam na myśli klasę rozszerzającą klasę Phaser.Scene, np.:

export default class GameScene extends Phaser.Scene
{
    constructor ()
    {
        super("GameScene");
    }
    create ()
    {
        ...
    }
}

Konfiguracja powinna być umieszczona w pliku package.json pod kluczem config: { phaser3Builder: { ... }, tj.:

{
  "version": "1.0.0",
  "dependencies": {
    ...
  },
  "config": {
    "phaser3Builder": {
      "title": "Phaser3 Game",
      ...
    }
  }
}

Konfiguracja

Klucz	Opis
title	Domyślnie Phaser3 Game. Tytuł gry dodawany w znacznikach <title> w pliku index.html (o ile nie podmieniono tego pliku).
gameWidth	Szerokość gry w pikselach, domyślnie 960.
gameHeight	Wysokość gry w pikselach, domyślnie 540.
gameMinScaleFactor	Minimalny współczynnik skalowania, domyślnie 1.
gameMaxScaleFactor	Maksymalny współczynnik skalowania, domyślnie 4.
distDirName	Domyślnie dist. Nazwa katalogu, w którym znajdą się pliki zbudowanej gry.
htmlDirName	Domyślnie src/html. Nazwa katalogu, w którym znajdują się pliki HTML niezbędne do uruchomienia gry. Niemniej podstawowy katalog jest również kopiowany przez co można podmienić tylko część plików, np. wyłącznie favicon.ico.
assetsDirName	Domyślnie src/assets. Katalog zawierający zasoby gry.
mainFileName	Ścieżka do pliku wejściowego dla skryptu gry. Może nie być definiowany wówczas wymagane jest zdefiniowanie scen.
scenes	Obiekt zawierający deklarację scen gry. Zobacz opis poniżej.
startScene	Klucz pierwszej sceny gry, domyślnie GameScene.

Obiekt deklarujący sceny

Obiekt składa się w klucza sceny i ścieżki do pliku js eksportującego scenę gry. Domyślna wartość tego pola to:

scenes: {
    GameScene: "src/scenes/GameScene.js"
}

Uruchomienie

Biblioteka posiada dwa tryby uruchomienia:

• deweloperski (dodatkowo licznik FPS-ów oraz mapy dla skryptów do identyfikacji błędów w kodzie);
• produkcyjny.

Obecny tryb można odczytać w kodzie przy pomocy własności this.game.ENV, która przyjmuje odpowiednio wartości dev i prod.

Uruchamiamy:

npx gulp --gulpfile "node_modules\@lazarow\phaser3-builder\gulpfile.js"
npx gulp --gulpfile "node_modules\@lazarow\phaser3-builder\gulpfile.js" --production

Dziennik zmian

[1.0.5] - 10.01.2022

• Dodanie informacji o doinstalowaniu Phaser-a.

[1.0.4] - 10.01.2022

• Zamiana biblioteki gulp-rimraf na gulp-clean ze względu na błędy.

[1.0.3] - 10.01.2022

• Poprawienie ścieżki do głównego pliku gry main.js.

[1.0.2] - 10.01.2022

• Aktualizacja pliku package.json.

[1.0.1] - 10.01.2022

• Poprawienie opisu.
• Dodanie opisu uruchomienia.

[1.0.0] - 10.01.2022

• Stworzenie repozytorium na podstawie poprzednich wprawek programistycznych z biblioteką Phaser3.