Phaser

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

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[2].

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.[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

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]

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

Lähteet
  1. Phaser - JavaScripting www.javascripting.com. Viitattu 20.10.2022.
  2. Phaser sivusto phaser.io. Viitattu 15.10.2022.
  3. Phaser 3 API Documentation - Index photonstorm.github.io. Viitattu 20.10.2022.
  4. Phaser 3 API Documentation (beta) - Index newdocs.phaser.io. Viitattu 20.10.2022.
  5. 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)
    This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.