Jako první nahrajeme assety potřebné pro naši hru. To provedeme voláním metod objektu Phaser Loader uvnitř funkce preload, která patří objektu Scene. Phaser automaticky vyhledá tuto funkci při startu a nahraje vše, co je v ní určeno.

Dosud byla funkce preload prázdná. Upravte ji 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 }
    );
}

Toto nahraje 5 assetů: 4 obrázky a sprite sheet (sprite sheet je obrázek obsahující více jednotlivých snímků se stejnými rozměry rovnoměrně rozmístěných do pomyslné mřížky). Všimněte si prvního parametru ('sky', 'bomb') - přesto, že někomu to může být zřejmé, chtěl bych zdůraznit, že se jedná o klíč k assetu. Tento klíč představuje přístup k nahranému assetu a budete ho používat při vytváření herních objektů (Game Objects). Jako klíč je možné použít jakýkoli platný JavaScriptový řetězec.

Zobrazení obrázku

Abychom zobrazili jeden z obrázků, které jsme nahráli, přidejte následující kód do vnitřku funkce create:

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

Naleznete to v souboru part3.html. Pokud ho nahrajete do prohlížeče, měli byste vidět modrou oblohou na pozadí přes celou herní obrazovku:

Hodnoty 400 a 300 jsou x a y souřadnice obrázku. Proč zrovna 400 a 300? To je proto, že všechny herní objekty jsou ve výchozím stavu vycentrovány. Obrázek s pozadím má rozměry 800 x 600 pixelů, takže pokud bychom ho zobrazili vycentrovaný na pozici 0 x 0, viděli bychom jenom jeho pravý dolní roh. Pokud ho zobrazíme na pozici 400 x 300, uvidíme ho celý.

Tip: Ke změně můžete použít setOrigin. Například, kód: this.add.image(0, 0, 'sky').setOrigin(0, 0) nastaví vykreslovací pozici obrázku na jeho levý horní roh. Ve Phaseru 2 se toho dosahovalo použitím vlastnosti anchor, ale ve Phaseru 3 se místo toho používají vlastnosti originX a originY.

Pořadí, ve kterém jsou herní objekty zobrazené odpovídá pořadí, ve kterém jste je vytvořili. Takže pokud chcete umístit sprite s hvězdou přes pozadí, musíte se ujistit, že byl přidán až jako druhý po obrázku s oblohou:

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

Pokud umístíte obrázek star jako první, bude zakrytý obrázkem oblohy.