Vytvorenie tvojej prvej hry v programe Phaser 3

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:

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.