Kuvien lataaminen peliin

Phaser peliin voi myös ladata omatekemiä kuvia, jotta peli näyttäisi hienommalta. Kuvat kannattaa tallentaa .png-muodossa, jotta ne olisivat mahdollisimman kevyitä, mutta esimerkiksi läpinäkyvyys toimisi oikein.

Tässä osiossa käytetään ensimmäistä kertaa lataus-aliohjejlmaa koodista.

Aloitetaan luomalla uusi kansio kuvat samaan kansioon, missä javascript tiedostot ja index.html-tiedosto ovat.

Tallenna seuraava kuva koneellesi kuvat-kansioon. Voit myös luoda itse kuvan, jonka koko on 64x64 pikseliä.

Kun kuva on laitettu kuvat-kansioon, voidaan se ladata koodin puolella käyttäen Phaserin omaa latausta. Koodissa oletetaan, että kuvan nimi on Pallo.png.

Laita lataus-aliohjelmaan seuraavanlainen rivi:

game.load.image('pallo','kuvat/Pallo.png');

Tämä rivi lataa kuvan Phaserin käyttöön, jonka jälkeen Phaserissa voidaan sanoa olion kuvaksi 'pallo', ja kuvan pitäisi latautua. Phaserin olioiden koko määräytyy hyvin paljolti kuvien mukaan, joten on helpompaa pitää kuva saman kokoisena kuin valmiiksi luotu pallo oli.

Vaihda ´luonti´-aliohjelmassa pallon luonti rivi ja poista sieltä pallon kuvan luominen

function luonti() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
	game.stage.backgroundColor = "#000000";
    salliKuuntelu();
	
	var kuva = luoPallonKuva(32,"#FFFFFF");
	pallo = luoOlio(leveys/2, korkeus/2, kuva);
	...

seuraavalla tavalla

function luonti() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
	game.stage.backgroundColor = "#000000";
    salliKuuntelu();
	
	pallo = luoOlio(leveys/2, korkeus/2, 'pallo');

\(\large{\Leftarrow \textrm{Vaihe 6-sivulle}}\) \(\large{\textrm{Seuraava lisäosa}\Large\Rightarrow}\)

luonti ja lataaminen-aliohjelmien koodi lopuksi pitäisi näyttää jotakuinkin seuraavalta:

function lataus() {
    game.load.image('pallo','kuvat/Pallo.png');
}

function luonti() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.stage.backgroundColor = "#000000";
    salliKuuntelu();
    
    var kuva = luoPallonKuva(32,"#FFFFFF");
    pallo = luoOlio(leveys/2, korkeus/2, 'pallo');
    pallo.body.bounce.set(1.1);
    pallo.body.velocity = new Phaser.Point(250, 0);
    pallo.body.onWorldBounds = new Phaser.Signal();
    pallo.body.onWorldBounds.add(tormasiSeinaan);
    pallo.body.setCircle(32);
    
    var mailanKuva = luoKuva(32, 128, "#FFFFFF");
    maila1 = luoOlio(leveys - 32, korkeus/2, mailanKuva);
    maila1.body.immovable = true;
    
    maila2 = luoOlio(0 + 32, korkeus/2, mailanKuva);
    maila2.body.immovable = true;
    
    p1Pistenaytto = luoTeksti(leveys * 0.8, korkeus * 0.15, "0");
    p2Pistenaytto = luoTeksti(leveys * 0.2, korkeus * 0.15, "0");
}