Nahrajme si najskôr assety potrebné pre našu hru. Urobíme to tak, že zavoláme metódy objektu Phaser Loader vo vnútri funkcie preload, ktorá patrí objektu Scene. Phaser automaticky vyhľadá túto funkciu pri štarte a nahrá všetko, čo je v nej určené.

Prázdnu funkciu preload zmeníme takto:

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

Takto si nahráme 5 assetov: 4 obrázky a sprite sheet. Všimni si prvý parameter ('sky', 'bomb') - ide o assetový kľúč. Vďaka tomuto kľúču môžeš pristupovať k nahranému assetu a budeš ho používať pri vytváraní herných objektov. Výber mena pre kľúč je na tebe, môžeš použiť ľubovolný platný JavaScriptový reťazec.

Zobrazenie obrázkov

Ak chceme zobraziť jeden z nahraných obrázkov, musíme pridať nasledujúci kód do funkcie create:

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

Ten nájdeš až v súbore part3.html. Ak si tento súbor otvoríš v prehliadači, tak uvidíš na celej hernej obrazovke pozadie - modrú oblohu:

image

Hodnoty 400 a 300 predstavujú x-ovú a y-ovú súradnicu obrázka. Kde sa však vzali čísla 400 a 300? Tieto čísla sme použili preto, že vo Phasere sa defaultne na udané súradnice umiestňuje vždy stred herného objektu. Obrázok s pozadím má rozmery 800 x 600 pixelov, takže keby sme použili hodnoty 0 a 0, tak na tento bod v ľavom hornom rohu plátna by sa umiestnil stred nášho pozadia a tak by sme uvideli iba jeho pravý dolný roh. Ak však stred pozadia umiestnime na pozíciu 400 x 300, uvidíme ho celé.

Tip: Ak ti tento spôsob umiestňovania nevyhovuje, tak ho zmeň pomocou setOrigin. Napríklad, kód: this.add.image(0, 0, 'sky').setOrigin(0, 0) nastaví vykreslovaciu pozíciu obrázka na jeho ľavý horný roh. Vo Phasere 2 sme to dosiahli použitím vlastnosti anchor, ale Phaser 3 využíva vlastnosti originX a originY.

Poradie, v akom sa herné objekty zobrazujú na plátne, zodpovedá poradiu, v akom si ich vytvoril. Ak chceš umiestniť sprite s hviezdou na pozadie, musíš ho pridať až po obrázku s oblohou:

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

Ak pridáš obrázok star v kóde pred obrázkom star, tak obloha zakryje hviezdu.