Lav dit f├©rste spil med Phaser 3

Under k├©lerhjelmen skaber this.add.image et nyt spilobjekt af typen Image, alts├Ñ et billede, og f├©jer det til den nuv├ªrende Scenes displayliste. Det er den liste der holder styr p├Ñ alle dine spilobjekter. Du kan positionere billedet hvorsomhelst uden at det er et problem for Phaser. Men hvis det er udenfor omr├Ñdet 0x0 til 800x600, vil du selvf├©lgelig ikke kunne se billedet visuelt, fordi det er uden for sk├ªrmen. Det vil dog stadig eksistere inden for Scenen.

Scenen selv har ingen fast st├©rrelse, men str├ªkker sig uendeligt i alle retninger. Kamerasystemet kontrollerer dit kig ind i Scenen, og man kan bev├ªge og zoome med det aktive kamera som p├Ñkr├ªvet. Man kan ogs├Ñ skabe flere kameraer for at f├Ñ flere forskellige perspektiver p├Ñ Scenen. Det emne ligger dog uden for denne specifikke tutorials omr├Ñde, s├Ñ lad det blot v├ªre sagt her at Phaser 3's kamerasystem er betydeligt bedre end i version 2. Man kan nu g├©re ting med det, der f├©rhen bogstaveligt talt var umulige.

Lad os for nuv├ªrende opbygge Scenen ved at tilf├©je et baggrundsbillede og nogle platforme. Her er den opdaterede create-funktion:

var platforms;

function create ()
{
    this.add.image(400, 300, 'sky');

    platforms = this.physics.add.staticGroup();

    platforms.create(400, 568, 'ground').setScale(2).refreshBody();

    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');
}

Et hurtigt blik p├Ñ koden viser et kald til this.physics. Det betyder at vi bruger systemet Arcade Physics (fysiksystem til arkadespil), men f├©r vi kan g├©re det, er vi n├©dt til at fort├ªlle Phaser at vores spil benytter det, ved at f├©je det til vores spilkonfigurationsobjekt. S├Ñ lad os opdatere dette til at inkludere underst├©ttelse af fysik. Her er det reviderede konfigurationsobjekt:

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

Den nye tilf├©jelse er egenskaben physics. Med den stump kode p├Ñ plads, som i part4.html fra tutorial ZIP-filen, vil du kunne afvikle og opleve en meget mere spil-agtig scene:

Vi har en baggrund og nogle platforme, men præcist hvordan virker de platforme?