Pallon liikuttaminen

Fysiikan salliminen olioille

Phaserissa pitää kytkeä erikseen päälle fysiikat olioille ja peliin. Tässä on se hyvä puoli, että joissain peleissä fysiikoita ei tarvita ollenkaan. Lisää luonti-aliohjelmaan seuraavanlainen rivi taustavärin vaihdon jälkeen:

game.physics.startSystem(Phaser.Physics.ARCADE);

Tämä aloittaa pelin fysiikan tarkastelun, mikä sallii esimerkiksi törmäysten tapahtumisen.

Fysiikat pitää vielä laittaa päälle myös yksittäisille peliolioille. Voimme tehdä tämän luoOlio-aliohjelmassa, jotta siihen liittyvä koodi täytyy tehdä vain kerran.

Lisää luoOlio-aliohjelmaan ankkurien asetuksen ja return rivin välille uusi rivi:

game.physics.enable(olio, Phaser.Physics.ARCADE);

Rivi sallii käsitellä jatkossa luodun olion body-ominaisuutta, jonka avulla sitä voi esimerkiksi liikuttaa ja sallia törmäykset.

Pallon tönäiseminen

Nyt voimme laittaa pallon liikkelle pelissä. Lisää luonti-aliohjelman loppuun seuraavanlainen rivi

pallo.body.velocity = new Phaser.Point(150, 0);

Rivillä muutetaan pallon fysiikkakehon nopeutta ja asetetaan uusi Point-tyyppinen olio. Phaserissa vektorien esittämiseen käytetään kyseistä Point-oliota ja se luodaan kertomalla vektorin tai pisteen x ja y parametreissa.

Tallenna tiedosto ja päivitä selaimessa. Pallon pitäisi lähteä liikkeelle hitaasti oikealle.

Seinät maailmaan

Tällä hetkellä pallo jatkaa suoraan pelimaailman reunojen ulkopuolelle. Tämä saadaan estettyä lisäämällä luoOlio-aliohjelmaan seuraava rivi

olio.body.collideWorldBounds = true;

Laita uusi rivi ennen return olio; riviä.

Nyt pallo pysähtyy seinään, eikä kimpoa siitä enää takaisin samalla voimalla. Voimme korjata tämän lisäämällä pallolle kimmoisuuden. Tätä ominaisuutta ei välttämättä haluta kaikilla olioille, joten lisätään se luonti-aliohjelman sisälle pallon luomisrivin jälkeen. Lisää siis seuraava rivi pallon luomisen jälkeen

pallo.body.bounce.set(1);

Nyt pallon pitäisi jäädä pomppimaan reunojen välille.

\(\large{\Leftarrow \textrm{Edellinen vaihe}}\) \(\large{\textrm{Seuraava vaihe}\Large\Rightarrow}\)

Koodin pitäisi näyttää seuraavalta:

var leveys = 800;
var korkeus = 600;
var game = new Phaser.Game(leveys, korkeus, Phaser.CANVAS, 'pong', { preload: lataus, create: luonti, update: paivitys });

function lataus() {
}

function luonti() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.stage.backgroundColor = "#000000";
    
    var kuva = luoPallonKuva(32,"#FFFFFF");
    var pallo = luoOlio(leveys/2, korkeus/2, kuva);
    pallo.body.bounce.set(1);
    pallo.body.velocity = new Phaser.Point(150, 0);
}


function luoOlio(x, y, kuva){
    var olio = game.add.sprite(x,y, kuva);
    olio.anchor.x = 0.5;
    olio.anchor.y = 0.5;
    game.physics.enable(olio, Phaser.Physics.ARCADE);
    olio.body.collideWorldBounds = true;
    return olio;
}



function paivitys() {
}