Kosketuksen kuuntelu/hiirellä pelaaminen

Tässä lisäosassa peliin lisätään kosketusnäytön kuuntelu tai vaihtoehtoisesti hiirellä pallon liikuttaminen.

Phaserissa on jo valmiina oletuksena asetettu 5 "pointteria", joista ensimmäinen on hiirelle ja muut kosketukselle. Tarvittaessa näitä voisi lisätä vielä enemmänkin peliin. Esimerkiksi hiiren tietoihin pääsee käsiksi game.input.mousePointer-tyylisesti.

Luo aluksi runko aliohjelmalle tarkistaOsoitin ja muuta se seuraavan näköiseksi:

function tarkistaOsoitin(osoitin, xRaja, yRaja, ekaLiikutettava, tokaLiikutettava, nopeus){

}

Tähän aliohjelmaan toteutetaan kosketuksen ja hiiren tarkkailu, jotta niitä kaikkia pystytään käsittelemään samalla tavoin. Lisää parametriksi aliohjelmaan tarkistaOsoitin osoitin. Osoittimen tilaa ja tietoja voidaan tarkkailla tämän parametrin avulla. Aloitetaan tarkistamalla, onko kosketus tai hiiri painettuna alas. Tämä onnistuu komennolla osoitin.isDown. Tämä kertoo, jos osoitin on painettuna alas, jolloinka voidaan liikuttaa hahmoa. Muotoile tarkistus ehtolauseeksi seuraavan näköisesti:

if(osoitin.isDown){
}

Lisää aliohjelmaan parametrit xRaja ja yRaja. Näiden parametrien tarkoitus on kertoa rajat, milloinka mailaa liikutetaan mihinkin suuntaan.

yRaja kertoo, mistä kohdasta ylöspäin kuuluu mailaa siirtää ylöspäin ja mistä alaspäin. xRaja taas kertoo, mistä kohtaa näyttöä vasen pelaaja liikuttaa mailaa ja mistä oikea.

Aliohjelman tulisi näyttää nyt seuraavalta:

function tarkistaOsoitin(osoitin, xRaja, yRaja){
    if(osoitin.isDown){

    }
}

Lisätään vielä muutama uutta parametria, niin kaikkia tarvittavia komponentteja pystytään käsittelemään aliohjelmassa kerralla. Lisää parametriksi ekaLiikutettava ja tokaLiikutettava, jotka tässä pelissä ovat pelin mailat. Lisää myös viimeiseksi parametriksi nopeus, jotta mailat saadaan liikkumaan samalla nopeudella nuolista kuin ne liikkuvat hiirellä tai kosketuksella.

Nyt voidaan ruveta määrittelemään tarkistusta hiiren liikuttamiselle. Lisää muuttuja suunta aliohjelma sisälle seuraavalla tavalla:

function tarkistaOsoitin(osoitin, xRaja, yRaja, ekaLiikutettava, tokaLiikutettava, nopeus){
    if (osoitin.isDown){
        var suunta = 0.0;
    }
}

Kaikki ohjelmakoodi on siis tarkoitus kirjoittaa osoitin.isDown-ehtolauseen sisälle. Suunnan tarkoitus on määrittää, mihin suuntaan maila liikkuu näppäinpainalluksesta. Tehdään ehtolause, mikä tarkastelee osoittimen paikkaa suhteessa yRajaan.

Mikäli paikka on suurempi kuin raja eli osoitin on alareunassa, siirretään mailaa myös alaspäin. Vastaavasti, mikäli osoitin on kentän yläreunassa, siirretään mailaa ylöspäin. Phaserissa alas on ylöspäin ja ylös on alaspäin y-koordinaatistossa, mikä vaikeuttaa koordinaattien ajattelua välillä huomattavasti! Tällä ei kuitenkaan ole suuremmin merkitystä tässä tilanteessa, sillä asian voi myös ajatella seuraavasti: Mikäli osoitin on positiivisesti suhteessa rajaan, on liikesuunta myös positiivista.

Lisää seuraavanlainen ehtolause aliohjelmaan:

if (osoitin.position.y > yRaja){
}

Kyseessä on siis tilanne, että y on suurempi kuin raja, liikutamme siis mailaa myös positiiviseen suuntaan. Lisää ehdon sisälle seuraava lause suunta = 1.0;

else-rakenteella voidaan hoitaa toiseen suuntaan liikuttaminen. Lisää vielä seuraavanlainen else:

else{
    suunta = -1.0;
}

Ehtojen pitäisi näyttää siis jotakuinkin seuraavanlaiselta aliohjelman sisällä:

var suunta = 0.0;
if (osoitin.position.y > yRaja){
    suunta = 1.0;
}
else{
    suunta = -1.0;
}

Vielä pitää lisätä itse mailojen liikuttaminen ja siihen liittyen tarkistus, kumman mailaa kuuluu liikuttaa. Toteutamme sen xRajan avulla, jolloinka oikea puoli liikuttaa oikeanpuoleista mailaa ja vasen puoli vasemmanpuoleista. Sovitaan, että osoittimen ollessa oikealla puolella näyttöä, liikutetaan ekaLiikutettava-oliota.

Seuraavaksi tee ehtolause, jossa tarkastellaan osoittimen paikkaa suhteessa xRaja-muuttujaan seuraavalla tyylillä:

if(osoitin.position.x > xRaja){
}

Lisää vielä tämän ehtolauseen sisälle rivi, jolla liikutetaan oliota:

ekaLiikutettava.body.velocity.y = suunta * nopeus;

Rivillä siis asetetaan ekaLiikutettava-olion nopeudeksi y-akselilla äskön määritelty suunta ja kerrotaan sitä annetulla nopeudella.

Jotta toista mailaakin pystytään liikuttamaan, pitää lisätä vielä else-lohko, jossa se tapahtuu:

else{
	tokaLiikutettava.body.velocity.y = suunta * nopeus;
}

Aliohjelman pitäisi näyttää nyt seuraavanlaiselta:

function tarkistaOsoitin(osoitin, xRaja, yRaja, ekaLiikutettava, tokaLiikutettava, nopeus){
    if(osoitin.isDown){
        var suunta = 0.0;
        if (osoitin.position.y > yRaja){
            suunta = 1.0;
        }
        else{
            suunta = -1.0;
        }
        if(osoitin.position.x > xRaja){
            ekaLiikutettava.body.velocity.y = suunta * nopeus;
        }
        else{
            tokaLiikutettava.body.velocity.y = suunta * nopeus;
        }
    }
}

Aliohjelmaa pitää vielä kutsua jostakin, jotta liike tapahtuisi. Lisää paivitys-aliohjelmaan seuraavanlaiset kolme kutsua:

tarkistaOsoitin(game.input.mousePointer, leveys/2, korkeus/2, maila1, maila2, nopeus);
tarkistaOsoitin(game.input.pointer1, leveys/2, korkeus/2, maila1, maila2, nopeus);
tarkistaOsoitin(game.input.pointer2, leveys/2, korkeus/2, maila1, maila2, nopeus);

Jokainen riveistä tarkastelee eri Phaserin osoitinta. Ensimmäinen tarkastelee hiirtä ja toiset kaksi kahta kosketusta. Kosketuksia voisi sallia vielä useampia, mutta yleensä kaksi kosketusta riittää, jos molemmata pelaajat pelaavat yhdellä sormella. Osoittimien lisäksi kutsuissa annetaan kentän leveys puolitettuna. Tämä määrittää, mistä kohtaa kumpaakin pelaajaa liikutetaan. Korkeus taas kertoo kohdan, minkä jälkeen liikutetaan alas ja minkä jälkeen ylös. Mailat 1 ja 2 annetaan myös parametreina aiemmin sovitun järjestyksen mukaan ja viimeisenä parametrina annetaan nopeus, jotta mailat liikkuisivat yhtä nopeasti.

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

Koko koodi:

var leveys = 800;
var korkeus = 600;
var nopeus = 200;
var p1Pisteet = 0;
var p2Pisteet = 0;
var game = new Phaser.Game(leveys, korkeus, Phaser.CANVAS, 'pong', { preload: lataus, create: luonti, update: paivitys });
var tekstinTyyli = { font: "bold 32px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };

function lataus() {
}

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);
    pallo.body.bounce.set(1);
    pallo.body.velocity = new Phaser.Point(150, 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");
}


function luoTeksti(x, y, teksti){
    var text = game.add.text(x, y, teksti, tekstinTyyli);
    
    return text;
}


function tormasiSeinaan(tormaaja, ylos, alas, vasen, oikea){
    if(vasen){
        tormaaja.body.position = new Phaser.Point(leveys/2, korkeus/2);
        p1Pisteet++;
        p1Pistenaytto.text = ""+p1Pisteet;
    }
    if(oikea){
        tormaaja.body.position = new Phaser.Point(leveys/2, korkeus/2);
        p2Pisteet++;
        p2Pistenaytto.text = ""+p2Pisteet;
    }
}


function salliKuuntelu(){
    cursors = game.input.keyboard.createCursorKeys();
    wButton = game.input.keyboard.addKey(Phaser.Keyboard.W);
    sButton = game.input.keyboard.addKey(Phaser.Keyboard.S);
}


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 tarkistaLiike(maila, ylos, alas){
    if (ylos.isDown)
    {
        maila.body.velocity.y = -nopeus;
    } else if (alas.isDown){
        maila.body.velocity.y = nopeus;
    }
    else{
        maila.body.velocity.y = 0;
    }
}

function tarkistaOsoitin(osoitin, xRaja, yRaja, ekaLiikutettava, tokaLiikutettava, nopeus){
    if(osoitin.isDown){
        var suunta = 0.0;
        if (osoitin.position.y > yRaja)
        	suunta = 1.0;
        else
        	suunta = -1.0;
        
        if(osoitin.position.x > xRaja){
        	ekaLiikutettava.body.velocity.y = suunta * nopeus;
        }
        else{
        	tokaLiikutettava.body.velocity.y = suunta * nopeus;
        }
    }
}



function paivitys() {
    game.physics.arcade.collide(pallo, maila1);
    game.physics.arcade.collide(pallo, maila2);
    
    
    tarkistaLiike(maila1, cursors.up, cursors.down);
    tarkistaLiike(maila2, wButton, sButton);
    
    tarkistaOsoitin(game.input.mousePointer, leveys/2, korkeus/2, maila1, maila2, nopeus);
    tarkistaOsoitin(game.input.pointer1, leveys/2, korkeus/2, maila1, maila2, nopeus);
    tarkistaOsoitin(game.input.pointer2, leveys/2, korkeus/2, maila1, maila2, nopeus);
	


}