Lav dit f├©rste spil med Phaser 3

Vi har nogle flotte og indbydende platforme, men ingen til at l├©be rundt p├Ñ dem. Det m├Ñ der rettes op p├Ñ.

Lav en ny variabel der hedder player og f├©j den f├©lgende kodestump til create-funktionen. Du kan se dette udf├©rt i part5.html:

player = this.physics.add.sprite(100, 450, 'dude');

player.setBounce(0.2);
player.setCollideWorldBounds(true);

this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

this.anims.create({
    key: 'turn',
    frames: [ { key: 'dude', frame: 4 } ],
    frameRate: 20
});

this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
});

Der foregår to forskellige ting her: Skabelsen af en Physics Sprite og skabelsen af nogle animationer, som den kan benytte sig af.

Physics Sprite

Den f├©rste del af koden opretter selve vores sprite:

player = this.physics.add.sprite(100, 450, 'dude');

player.setBounce(0.2);
player.setCollideWorldBounds(true);

Det skaber en ny sprite kaldeT player, der placeres 100 x 450 pixels fra bunden af spillet. Spriten skabes via en s├Ñkaldt Game Object Factory, der er indbygget i Physics-objektet, og det betyder at spriten automatisk f├Ñr et dynamisk fysiklegeme.

Efter vi har skabt spriten f├Ñr den en bounce v├ªrdi p├Ñ 0.2. Det betyder at n├Ñr den lander efter et hop, vil den hoppe en lille smule op igen. Spriten s├ªttes s├Ñ til at kunne kollidere med spilverdnens kanter. Spilverdens kanter ligger per automatik lige rundt om spillet. Eftersom vi satte spillets st├©rrelse til 800 x 600, vil spilleren ikke v├ªre i stand til at bev├ªge sig uden for dette omr├Ñde. Det forhindrer ham i at l├©be ud over sk├ªrmens kanter eller at hoppe op over den ├©verste kant.

Animationer

Hvis du kigger p├Ñ preload-funktionen igen, vil du se at 'dude' blev indl├ªst som et sprite sheet, ikke som et billede. Det er fordi den indeholder animationsrammer. S├Ñdan her ser hele sprite sheet'et ud:

Der er 9 animationsrammer i alt, 4 til at l├©be til venstre, 1 til at kigge mod kameraet, og 4 til at l├©be til h├©jre. Bem├ªrk: Phaser underst├©tter at man kan spejlvende en sprite for at spare p├Ñ antallet af unikke animationsrammer, men i denne tutorial holder vi det lige lidt old school.

Vi definerer to animationer kaldet 'left' og 'right', venstre og h├©jre. Her er venstre-animationen:

this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

Den bruger rammerne 0, 1, 2 og 3 og afspilles med 10 rammer i sekundet. At 'repeat' sættes til -1 betyder at animationen skal loope, altså begynde forfra når den er færdig, så længe den afspilles.

Det er vores standard l├©be-animation, og vi gentager den for at l├©be den anden vej, med en 'key' der hedder 'right.' Og s├Ñ er der en sidste animation, der hedder 'turn.'

Bonusinfo: I Phaser 3 er Animation Manager et globalt system. Animationer der skabes via denne, er derefter globalt tilg├ªngelige for alle spilobjekter. De deles om den grundl├ªggende animationsdata, men styrer deres egne tidslinjer. Det tillader os at definere en animation kun ├®n gang og s├Ñ f├©je den til s├Ñ mange spilobjekter som vi ├©nsker. Dette er anderledes end i Phaser 2 hvor animationerne specifikt tilh├©rte det spilobjekt, som de blev skabt p├Ñ.