Phaser

Wikipediasta
Siirry navigaatioon Siirry hakuun

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:lää 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, jotka auttavat uusia kehittäjiä pääsemään nopeasti alkuun ja ymmärtämään kehyksen tärkeimmät ominaisuudet, kuten animaatiot, fysiikka, objektit, simulointi, musiikki ja äänet.

Phaser tarjoaa mahdollisuuden laajentaa sitä omilla kirjastoilla ja komponenteilla, jolloin voit räätälöidä pelisi tarpeidesi mukaisesti tai käyttää yhteisön luomia laajennuksia.

Historia[muokkaa | muokkaa wikitekstiä]

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 14 erikoistehostetta, huomattavasti parannetun mobiilirenderöinnin suorituskyvyn, upouuden aikajanasekvensserin, monia uusia peliobjekteja, tilaäänen tuen, päivitetyn ”Matter” fysiikanmoottorin ja paljon muuta. Tämä ominaisuuksiltaan monipuolinen päivitys tarjoaa erinomaiset työkalut luoville projekteille.[1]

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

Arkkitehtuuri ja toiminnallisuudet[muokkaa | muokkaa wikitekstiä]

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[muokkaa | muokkaa wikitekstiä]

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

Web-ensin[muokkaa | muokkaa wikitekstiä]

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[2]lähde tarkemmin?.

Viimeisimmät päivitykset[muokkaa | muokkaa wikitekstiä]

12. huhtikuuta 2023 julkaistu Phaser 3.60 "Miku" merkitsee tärkeää askelta eteenpäin pelikehityksen maailmassa. Päivitys nostaa pelin monipuolisuuden uudelle tasolle tuomalla mukanaan 14 erikoistehostetta, jotka rikastuttavat pelien visuaalista ilmettä. Erityisesti mobiilirenderöinnin suorituskyky on saanut merkittävän parannuksen, tehostaen pelien sulavuutta ja responsiivisuutta mobiililaitteilla.

Yksi päivityksen kiehtovimmista lisäyksistä on upouusi aikajanasekvensseri, tarjoten kehittäjille tehokkaan välineen animaatioiden ja tapahtumien hallintaan pelissä. Aikajanasekvensseri mahdollistaa tarkan ajastuksen ja synkronoinnin, mikä on olennainen tekijä monimutkaisten pelimekaniikoiden toteuttamisessa.

Lisäksi päivitys tuo mukanaan joukon uusia peliobjekteja, laajentaen näin kehittäjien luovia mahdollisuuksia. Päivitetty "Matter" fysiikanmoottori tarjoaa entistä tarkempaa ja realistisempaa fysiikkakäsittelyä, erityisesti hyödyllistä pelien simulaatioissa.

Phaserin avoimen lähdekoodin luonne ja aktiivinen kehitysyhteisö tekevät siitä jatkuvasti päivittyvän ja kehittyvän pelikehyksen, joka pysyy ajan tasalla pelikehittäjien tarpeiden kanssa. Näiden parannusten myötä Phaser vahvistaa asemaansa yhtenä johtavista HTML5-pelikehyksistä, tarjoten kehittäjille voimakkaan ja joustavan työkalun luovien peliprojektien toteuttamiseen.

On huomionarvoista, että Phaser 3.60:n julkaisu korostaa edelleen yhteisön roolia pelikehyksen kehittämisessä. Käyttäjien palautteen ja ehdotusten perusteella tehdyt parannukset osoittavat, että Phaserin kehitys ei ole vain tekninen edistysaskel, vaan myös vastaus aktiivisen ja omistautuneen yhteisön tarpeisiin.

Näiden innovaatioiden myötä Phaser ei ainoastaan ylläpidä vahvaa asemaansa pelikehityksen kentällä, vaan se myös asettaa standardin siitä, mitä odottaa HTML5-pelikehykseltä tulevaisuudelta. Tällä hetkellä ei kuitenkaan ole tiedossa merkittäviä päivityksiä Phaseriin "Mikun" julkaisun jälkeen.

etu[muokkaa | muokkaa wikitekstiä]

1. Erittäin helppo ympäristön asennus: Toisin kuin Unity3D, Cocos2D tai Egret, joilla on runsaasti IDE- ja työkalupaketteja, Phaserin kehitysympäristön asennus on erittäin yksinkertaista. Sinun tarvitsee vain tuoda yksi js-tiedosto ja sijoittaa peliprojekti palvelinympäristöön, niin voit suorittaa sen.


2. Monipuoliset ominaisuudet: Phaser tarjoaa erittäin kattavat ominaisuudet. Sisäänrakennettuna on kolme fysiikka moottoria: ARCADE, P2 ja Ninja. Phaser tukee myös tiilikarttoja, ajastimia, gradientti animaatiota, frame animaatiota, vieritystaustoja, objektivarastoja, kameraa, hiukkassysteemejä, kuva piirtämistä, bittikarttoja, pikselikarttoja, kuvakokoelmia, lataus hallintaa, monipiste kosketusta, ääni- ja videotoistoja ja lähes kaikkia muita perustoimintoja, joita tarvitaan pelien tekemiseen. Se on tällä hetkellä markkinoiden monipuolisin 2D H5-pelimoottori.


3. Erinomainen räätälöitävyys: Ensinnäkin Phaserin lisäosajärjestelmä. Phaser mahdollistaa kehittäjien tuoda muita tehokkaita ominaisuuksia lisäosien avulla, kuten Box2D-fysiikka moottorin, Spine-luurankoanimaation ja luettelosäätimen. Tämä antaa Phaserille rajattomat mahdollisuudet. Toiseksi, Phaserin modulaarinen kääntäminen. Koska Phaser on avoimen lähdekoodin ohjelmisto, voimme ladata lähdekoodin GitHubista ja kääntää siitä oman Phaserimme.

Kehittäjätuki[muokkaa | muokkaa wikitekstiä]

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

Dokumentaatio ja esimerkit[muokkaa | muokkaa wikitekstiä]

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.[3] On myös olemassa Phaserin nettisivun sisäinen, samat tiedot sisältävä kokonaisuus erilaisella ulkonäöllä, joka on beta-kehitysvaiheessa.[4] Molemmat sisältävät kaikki ohjelmistokehyksen nimiavaruudet, luokat ja tapahtumat kertoen, miten niitä käytetään.[5] Tämän lisäksi tarjolla on 1772 esimerkkiä[5] 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.[6]

Ohjeet ja muu tuki[muokkaa | muokkaa wikitekstiä]

Ensimmäisen pelin tekeminen on tehty helpoksi kattavan oppaan avulla, jolla saa luotua yksinkertaisen tasohyppelypelin.[7] Aloitteleville pelinkehittäjille yhteisö on luonut yli 941 opasta.[5] 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.[4]

Scene-luokka[muokkaa | muokkaa wikitekstiä]

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ä Phaser Scenejä ja toimintoja järkevästi, kehittäjät voivat luoda monimutkaisia, vuorovaikutteisia pelitasoja, saavuttaen saumattoman pelikokemuksen.

Scene-luokan funktiot/metodit[muokkaa | muokkaa wikitekstiä]

preload()[muokkaa | muokkaa wikitekstiä]

Preload suoritetaan "Scene" -luokan elinkaaren alussa. Sen vastuulla ovat kaikkien vaadittujen tiedostojen (kuten kuvat, äänet, JSON, HTML, ...) lataaminen laitteen muistiin. Se ajetaan ennen Crete-funktiota, jotta kaikki tarvittavat tiedot ovat sourittamista varten saatavilla.

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()[muokkaa | muokkaa wikitekstiä]

Kun kaikki tarvittavat tiedot on ladattu laitteen muistiin, alkaa Scene:n 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 luot pelaajan, viholliset, tasot, äänet, napit ja muut käyttäjälle näkyvät objektit.

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)[muokkaa | muokkaa wikitekstiä]

"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 scene:n suoritusta valmistelevana elinkaaren vaiheena.

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()[muokkaa | muokkaa wikitekstiä]

"Update"-funktio phaserissa on osa pelin elinkaarta, joka toistuu useaan otteeseen. . Se kutsutaan "create"-funktion jälkeen ja sen jälkeen jokaisen pelin frame:n 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.

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()[muokkaa | muokkaa wikitekstiä]

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

Katso myös[muokkaa | muokkaa wikitekstiä]

Lähteet[muokkaa | muokkaa wikitekstiä]

  1. Changelog - Phaser 3 API Documentation (beta) newdocs.phaser.io. Viitattu 31.7.2023.
  2. Phaser sivusto phaser.io. Viitattu 15.10.2022.
  3. Phaser 3 API Documentation - Index photonstorm.github.io. Viitattu 20.10.2022.
  4. a b Phaser 3 API Documentation (beta) - Index newdocs.phaser.io. Viitattu 20.10.2022.
  5. a b c Photon Storm- photonstorm.com: Tutorials, Videos, Docs and more - Learn - Phaser phaser.io. Viitattu 20.10.2022. (englanniksi)
  6. Richard Davey: Phaser 3 Examples github.com. 20.10.2022. Viitattu 20.10.2022.
  7. Photon Storm- photonstorm.com: Making your first Phaser 3 game: Part 1 - Introduction - Learn - Phaser phaser.io. Viitattu 20.10.2022. (englanniksi)