Phaser (ohjelmistokehys)

**Phaser** on 2D-peli-ohjelmistokehys HTML5-pelien luomiseen. Se on suunniteltu tarjoamaan kehittäjille tehokas ja joustava työkalu, joka toimii tietokoneilla ja mobiililaitteilla. Phaser on HTML5-pohjainen pelikehys, joka käyttää HTML5:n canvas-elementtiä sekä JavaScript-ohjelmointirajapintaa WebGL:ää grafiikan piirtämiseen ja renderöintiin. Kirjastona grafiikoiden luontiin Phaser käyttää pixi.js-kirjastoa. 

Phaserin  julkaisija on Photon Storm Ltd. Phaser on avoimen lähdekoodin ohjelmisto ja käytettävissä MIT-lisenssin alaisena. Tämä tarkoittaa, että se on ilmaiseksi saatavilla, ja kehittäjillä on laaja vapaus käyttää ja muokata kehystä omiin tarpeisiinsa.

Phaser mahdollistaa käyttäjilleen monipuolisen alustan, missä luoda pelejä käyttäen joko JavaScriptiä tai TypeScriptiä. Phaserin omat kirjastot ja työkalut mahdollistavat käyttäjien nopean integroitumisen ja oppimisen alustan saloista. 

Photon Storm Ltd, Phaserin julkaisija, tarjoaa oppimateriaalia ja tutoriaaleja Phaserin käyttöön. Phaser tarjoaa mahdollisuuden laajentaa sitä omilla kirjastoilla ja komponenteilla.

## Historia
Phaserin ensimmäinen versio julkaistiin Richard Daveyn blogissa huhtikuussa 2013, ja seuraava virallinen julkaisu, Phaser 1.0, näki päivänvalon jo syyskuussa 2013. Tämä oli kehyksen alkuaikaa, ja se tarjosi perusominaisuuksia HTML-5 pelikehitykseen.

Kuusi kuukautta 1.0 version jälkeen, maaliskuussa 2014, julkaistiin Phaser 2. Tämä versio toi monia parannuksia ja lisäyksiä alkuperäiseen Phaseriin, mukaan lukien multifysiikkamoottorin tuki. Phaser 2 sai päivityksiä ja tukea vuoteen 2016 saakka, jolloin viimeinen 2.6.2 -versio julkaistiin.

Phaser 3 julkaistiin helmikuussa 2018 ja oli niin massiivinen päivitys Phaserin 2. versioon verrattuna, että tekijät näkivät muutosten listaamisen turhana nettisivuillaan.

Phaserin uusin version, 3.60 ”Miku”, julkaistu 12 hutikuuta 2023, toi mukanaan muun muassa 14 erikoistehostetta, huomattavasti parannetun mobiilirenderöinnin suorituskyvyn, uuden aikajanasekvensserin, monia uusia peliobjekteja, tilaäänen tuen ja päivitetyn ”Matter”-fysiikanmoottorin.

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

## Arkkitehtuuri ja toiminnallisuudet
Phaser toimii käyttämällä HTML5:n canvas-elementtiä ja WebGL-renderöijää, jotka mahdollistaa luoda dynaamisten grafiikkojen luomisen. 

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:n mukaan Phaser-kehystä kehitetään toimimaan uusien selaimien kanssa ja sen toiminnallisuutta muokataan keskittyen mobiiliselaimien toiminnallisuuteen.

Yhtiön mukaan kehyksen ytimeen ei lisätä mitään, mikä hidastaisi sen toimintoja.

## Viimeisimmät päivitykset
12. huhtikuuta 2023 julkaistu Phaser 3.60 "Miku" sisältää 14 erikoistehostetta, jotka rikastuttavat pelien visuaalista ilmettä. Erityisesti mobiilirenderöinnin suorituskykyä on parannettu.

Päivitykseen kuuluu uusi aikajanasekvensseri, joka mahdollistaa animaatioiden ja tapahtumien hallinaan pelissä. Aikajanasekvensseri mahdollistaa tarkan ajastuksen ja synkronoinnin, joka on olennainen tekijä monimutkaisten pelimekaniikoiden toteuttamisessa.

Lisäksi päivitys tuo mukanaan joukon uusia peliobjekteja. Päivitetty ”Matter”-fysiikanmoottori tarjoaa entistä tarkempaa ja realistisempaa fysiikkakäsittelyä.

## Kehittäjätuki

### Dokumentaatio ja esimerkit
Photon Storm Ltd. tarjoaa kattavan dokumentaation Phaser 3:n ominaisuuksista pelintekijöille. Tämä on toteutettu internetsivun 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.

## Scene-luokka
Phaser 3:n toiminnallisuuden selkärankana toimii Scene-luokka. Scene-luokat toimivat jokaisen Phaser-pelin ytimenä, jossa ne luovat erilaiset pelin tasot tai osiot. Jokainen Scene sisältää erilaisia pelin tiloja: lataa tiedostoja, luo peliobjekteja, päivittää pelimekaniikkoja ja paljon muuta. Nämä vaiheet jaetaan Scene-luokan metodien tai erillisten funktioiden vastuulle. Tärkeimmät näistä ovat ”preload”, ”create” ja ”update”. Funktiot ja metodit mahdollistavat modulaarisen, järjestelmällisen koodin, jotka ovat vastuussa omista tehtävistään, kuten pelaajan liikeestä, vihollisen tekoälystä tai pisteytyksestä. Käyttämällä Phaserin Scenejä ja toimintoja voidaan luoda monimutkaisia, vuorovaikutteisia pelitasoja. 

### Scene-luokan funktiot/metodit

#### preload()
Preload suoritetaan Scene-luokan elinkaaren alussa. Sen vastuulla ovat kaikkien vaadittujen tiedostojen (kuten kuvat, äänet, JSON, HTML) lataaminen laitteen muistiin. Se ajetaan ennen Create-funktiota, jotta kaikki tarvittavat tiedot ovat sourittamista varten saatavilla.
```javascript
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()
Kun kaikki tarvittavat tiedot on ladattu laitteen muistiin, alkaa Scenen elinkaaren suraava vaihe. Create-funktion vastuulla on pelin objektien luominen, fysiikan (kuten painovoiman ja törmäysten käsittely) määrittely sekä uuden pelikentän tilan luominen. Tässä funktiossa luodaan pelaaja, viholliset, tasot, äänet, napit ja muut käyttäjälle näkyvät objektit. 
```javascript
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)
Init-funktio on Scene-luokan elinkaaren ensimmäinen vaihe. Se suoritetaan ennen preload-funktiota, jolloin sitä käytetään lähinnä muuttujien alustukseen sekä tiedonsiirtoot scene:jen välillä. Init toimii siis Scenen suoritusta valmistelevana elinkaaren vaiheena.
```javascript
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}`)
    }
}
```


#### update()
Update-funktio on osa pelin elinkaarta, ja se toistuu useaan otteeseen. Se kutsutaan create-funktion jälkeen ja sen jälkeen jokaisen pelin framen jälkeen, mikä tekee siitä paikan, jossa pelin reaaliaikainen logiikka toteutetaan. Tätä funktiota käytetään yleensä syötteen tarkistamiseen, objektien liikuttamiseen, törmäyksen havaitsemiseen tai muihin vuorovaikutteisiin pelimekaniikkoihin, jotka on päivitettävä jatkuvasti. 
```javascript
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');
    }
}
```


### preUpdate()

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


## Katso myös
* Ohjelmointi
* Pelinkehitys
* Pelimoottorit
* Videopeli

## Lähteet