Dodaj teraz zasoby potrzebne do stworzenia naszej gry. Zrobisz to poprzez umieszczanie wywołań do Phaser loader wewnątrz funkcji preload należącej do obiektu sceny. Phaser automatycznie wykona kod zawarty w tej funkcji podczas uruchamiania i tym samym załaduje wszystkie niezbędne pliki.

W tej chwili funkcja preload jest pusta. Dodajmy do niej:

function preload ()
{
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
    this.load.image('bomb', 'assets/bomb.png');
    this.load.spritesheet('dude', 
        'assets/dude.png',
        { frameWidth: 32, frameHeight: 48 }
    );
}

Ten kawałek kodu załaduje 5 plików: 4 obrazki i arkusz sprite'ów. Niektórym może się to wydawać oczywiste ale pierwszy parametr, zwany także kluczem zasobu (np. 'sky', 'bomb'), jest identyfikatorem, dzięki któremu można łatwo odwołać się do zasobu w innych miejscach. Klucze mogą być dowolne ale muszą być poprawnymi ciągami języka JavaScript.

Wyświetlanie obrazków

Aby wyświetlić jeden z załadowanych wcześniej obrazów użyj następującego kodu wewnątrz funkcji create:

this.add.image(400, 300, 'sky');

Ten fragment możesz znaleźć w pliku part3.html. Jeżeli załadujesz go w przeglądarce powinieneś zobaczyć ekran gry z niebem w tle:

Wartości 400 i 300 reprezentują koordynaty x i y, w których zostanie umiejscowiony obrazek na scenie. Dlaczego akurat 400 i 300? Ponieważ w Phaserze 3 wszystkie obiekty są standardowo pozycjonowane w oparciu o ich punkt centralny. Obrazek tła ma rozmiar 800 na 600 pikseli, więc jeżeli wypozycjonowałbyś go w punkcie 0 x 0 zobaczyłbyś jedynie jego dolną prawą część. Jeżeli umieścisz go w punkcie 400 x 300, zobaczysz go od razu w pełnej okazałości.

Podpowiedź: Możesz użyć funkcji setOrigin aby zmienić koordynaty już po umieszczeniu obiektu na scenie. Przykładowo kod: this.add.image(0, 0, 'sky').setOrigin(0, 0) zresetowałby pozycję obrazka na górny lewy róg. W Phaserze 2 takkie samo zachowanie można było uzyskać za pomocą właściwości anchor. W Phaserze 3 analogiczne właściwości sprite'a nazywają się originX i originY.

Kolejność rysowania obiektów na scenie zależna jest od kolejności ich dodawania w grze. Jeżeli chciałbyś aby sprite z gwiazdą znajdował się nad tłem musisz umieścić jego dodanie jako następne po niebie:

function create ()
{
    this.add.image(400, 300, 'sky');
    this.add.image(400, 300, 'star');
}

Jeżeli umieścisz grafikę star jako pierwszą w powyższym kodzie, zostanie ona całkowicie przykryta przez obraz z niebem.