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:

image

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.