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