Lav dit f├©rste spil med Phaser 3

Velkommen til vores f├©rste tutorial om at lave et spil med Phaser 3. Her vil vi l├ªre hvordan man laver et lille spil med en figur, der kan l├©be og hoppe mellem platforme, samle stjerner op og undg├Ñ forhindringer. Undervejs i forl├©bet vil vi forklare nogle af de centrale egenskaber ved frameworket.

Hvad er Phaser?

Phaser er en HTML5-spilprogrammeringsplatform eller et framework, som skal g├©re det nemt og virkelig hurtigt for udviklere at lave robuste HTML5-spil til alle typer af browsere. Det er bygget specifikt til at g├©re brug af fordelene ved moderne browsere, b├Ñde p├Ñ computer og mobil. Det eneste krav til browserne er, at de underst├©tter canvas elementet.

N├©dvendige forberedelser

Download denne ZIP-fil som indeholder koden og grafikken til hvert trin i denne tutorial.

Du er n├©dt til at kende lidt til JavaScript, bare s├Ñdan helt grundl├ªggende.

S├©rg ogs├Ñ for at gennemg├Ñ guiden Kom i gang med Phaser 3. Den forklarer hvordan man downloader frameworket og opretter et lokalt udviklingsmilj├©, og den giver et glimt af strukturen og de centrale funktioner i et Phaser-projekt.

Hvis du har gennemgået guiden Kom i gang med Phaser, vil du have downloadet Phaser og fået sat alting op så du er klar til at programmere. Download filerne til denne tutorial og pak dem ud i roden af din lokale webserver.

├àbn siden part1.html i din foretrukne teksteditor og lad os se n├ªrmere p├Ñ koden. Efter en smule standard HTML, der indl├ªser Phaser, ser kode-strukturen s├Ñledes ud:

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload ()
{
}

function create ()
{
}

function update ()
{
}

Objektet config lader dig konfigurere dit Phaser-spil. Der findes masser af valgmuligheder for dette objekt, og efterh├Ñnden som du l├ªrer mere om Phaser vil du st├©de p├Ñ flere af dem. Men i denne tutorial indstiller vi blot en renderingsmaskine, spillets dimensioner og en standard Scene.

En instans af Phaser.Game klassen gemmes i den lokale variabel kaldet game, og konfigurationsobjektet medsendes som parameter. Det starter den process, der v├ªkker Phaser til live.

I Phaser 2 var game-objektet knudepunkt for n├ªsten alle interne systemer og blev ofte tilg├Ñet fra en global variabel. I Phaser 3 er dette ikke l├ªngerer tilf├ªldet, og det er ikke l├ªngere nyttigt at gemme game-objektet i en global variabel.

Egenskaben type kan s├ªttes til enten Phaser.CANVAS, Phaser.WEBGL eller Phaser.AUTO. Det er den renderingskontekst, som du ├©nsker at dit spil skal benytte. Den anbefalede v├ªrdi er Phaser.AUTO som automatisk pr├©ver at benytte WEBGL, men som falder tilbage p├Ñ Canvas hvis browseren eller devicet ikke underst├©tter WEBGL. Det canvas-element som Phaser skaber, bliver blot f├©jet til dokumentet d├®r hvor scriptet bliver kaldt, men man kan ogs├Ñ specificere navnet p├Ñ et omgivende html-element i konfigurationsobjektet, hvis man ├©nsker det.

Egenskaberne width og height bestemmer st├©rrelsen p├Ñ det canvas-element som Phaser skaber. I dette tilf├ªlde 800 x 600 pixels. Din spilverden kan have enhver t├ªnkelig st├©rrelse, men dette er den opl├©sning, som dit spil vil blive vist i.

Egenskaben scene i konfigurationsobjektet gennemg├Ñr vi i flere detaljer senere i denne tutorial.