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:

image

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.