Phaser

Phaser on ohjelmistokehys (eng. framework), jota käytetään HTML5 pelien luomiseen tietokoneille ja mobiililaitteille. 

Phaser kehys toimii kaikilla selaimilla joilla on canvas-elementti tuki.

Kehyksen julkaisijana on Photon Storm Ltd ja se on ilmaisohjelmisto joka toimii MIT-lisenssin alaisena.

Historia 
Ensimmäinen Phaser julkaisusta tiedotettiin Richard Daveyn blogissa huhtikuussa 2013, jonka jälkeen saman vuoden syyskuussa Phaser versio 1.0 julkaistiin.

Phaser 2 julkaistiin kuusi kuukautta ensimmäisen jälkeen maaliskuussa 2014, joka lisäsi liudan parannuksia alkuperäiseen Phaseriin verrattuna, kuten multifysiikka moottori tuen. Phaser 2 tuki kesti vuoteen 2016 saakka joiloin viimeinen 2.6.2 version siitä julkaistaisiin.

Phaser 3 julkaistiin helmikuussa 2018.

Ohjelmistokehyksen neljäs versio on kehityksessä, mutta sen tarkoituksena on refaktoroida Phaser 3 skriptit TypeScript-ohjelmointi kielelle

Arkkitehtuuri ja toiminnallisuudet 
Phaser toimii käyttämällä HTML5 tuomaa canvas-elementtiä ja WebGL renderoijaa, jotka antaa kehittäjän luoda dynaamisia grafiikoita. 

Pelien luonti tapahtuu lataamalla kehys web-palvelimelle, jossa kehitys tehdään käyttämällä JavaScript- tai TypeScript-ohjelmointikieliä.

Kehyksen toiminnallisuudet 
Phaser tarjoaa kehityksen tueksi useita toiminnallisuuksia, kuten valmiit pelifyysikat, sprite-grafiikoiden käsittely, ajastimet, pelaajan vuorovaikutuksen hoitaminen, äänien käsittely.

Web-ensin 
Photon Storm LTD sanoo nettisivullaan että Phaser-kehystä kehitetään toimimaan uusien selaimien kanssa ja sen toiminnallisuutta muokataan keskittyen mobiiliselaimien toiminnallisuuteen.

Heidän netti sivulla sanotaan ettei kehyksen ytimeen lisätä mitään mikä hidastaisi sen toimintoja.

Kehittäjätuki 
Pelikehityksestä on pyritty tekemään mahdollisimman lähestyttävää ja esteetöntä.

Dokumentaatio ja esimerkit 
Photon Storm Ltd. tarjoaa kattavan dokumentaation Phaser 3:n ominaisuuksista pelintekijöille. Tämä on toteutettu nettisivun muodossa, jonka kehittäjä voi ladata itselleen ja käyttää lokaalisti. On myös olemassa Phaserin nettisivun sisäinen, samat tiedot sisältävä kokonaisuus erilaisella ulkonäöllä, joka on beta-kehitysvaiheessa. Molemmat sisältävät kaikki ohjelmistokehyksen nimiavaruudet, luokat ja tapahtumat kertoen, miten niitä käytetään. Tämän lisäksi tarjolla on 1772 esimerkkiä kaikista pelin ominasuuksita ja tavoista, kuinka hyödyntää niitä omassa pelissä. Nämäkin voi tallentaa lokaaliin käyttöön. Esimerkkien lähdekoodi on MIT-lisenssin alaisena, mutta kuvat ja muut resurssit eivät ole.

Ohjeet ja muu tuki 
Ensimmäisen pelin tekeminen on tehty helpoksi kattavan oppaan avulla, jolla saa luotua yksinkertaisen tasohyppelypelin. Aloitteleville pelinkehittäjille yhteisö on luonut yli 941 opasta. Nettisivulla on myös keskustelufoorumi, jossa voi esittää kysymyksiä kokeneemmille jäsenille.

Phaser on yksi eniten tähditetyistä peliohjelmistokehyksistä GitHubissa nopean tuen ja kehittäjäystävällisen API:n vuoksi.

Luokkien sisäisiä funktioita

preload() 
preload(){
    // Käytetään kuvien tai muun median tallettamiseen muistiin pelin käyttöä varten
    // Esimerkiksi kuvan lataaminen
    this.load.image(nimi, polku);
}

create(){
    // Kuvan lisääminen peliin
    this.add.image(x, y, nimi);
}

create() 
create(){
    // Käytetään objektien lisäämiseen
    //Esimerkiksi 'Hello, World!' -tekstin lisääminen määriteltyihin x- ja y-koordinaatteihin
    this.add.text(x,y,'Hello, World!');
    // Esimerkiksi suorakulmion lisääminen määriteltyihin x- ja y-koordinaatteihin, määritetyllä leveydellä ja korkeudella sekä värillä
    this.add.rectangle(x, y, width, height, 0x000000);
}

init(data) 
class Foo extends Phaser.Scene{
    constructor(){
        super('foo');
    }
    
    create(){
        // Scenen vaihtaminen ja data lähettäminen
        this.scene.start('bar', {string: 'Hello, World!'});
    }
}

class Bar extends Phaser.Scene{
    string = '';
    
    constructor(){
        super('bar');
    }
    
    // Scenen aloituksen mukana lähetetyn datan lukeminen
    init(data){
        this.string = data.string;
    }
    
    create(){
        this.add.text(x,y,`${this.string}`)
    }
}

preUpdate() 
preUpdate(){
    // Käytetään kun halutaan jotain tapahtuvan ennen seuraavaa update() kutsua
    super.preUpdate();
}

update() 
update(){
    // Käytetään kun halutaan jotain tapahtuvan jokaisen framen aikana
    // Esimerkiksi onko vasenta nuolinäppäintä painettu
    if(this.cursors.left.isDown){
        console.log('Vasen nuolinäppäin on painettuna');
    }
}

Katso myös 
 Ohjelmointi
 Pelinkehitys
 Pelimoottorit
 Videopeli

Lähteet 

Ohjelmakehykset