Navigation

Del 8 - Stjernestøv

Published on 20th February 2018

Det er på tide at give vores lille spil et mål. Lad os drysse en håndfuld stjerner ned over scenen og give spilleren evnen til at indsamle dem. For at opnå dette skaber vi en gruppe kaldet 'stars' og fylder den med nogle objekter. I vores create-funktion tilføjer vi den følgende kodestump (dette kan ses i part8.html):

stars = this.physics.add.group({
    key: 'star',
    repeat: 11,
    setXY: { x: 12, y: 0, stepX: 70 }
});

stars.children.iterate(function (child) {

    child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));

});

Fremgangsmåden er den samme som da vi skabte platformsgruppen. Men da stjernerne skal kunne bevæge sig, skaber vi en dynamisk fysikgruppe i stedet for en statisk.

Group-objekter kan modtage konfigurationsobjekter til at hjælpe med deres opsætning. I dette tilfælde har gruppens konfigurationsobjekt tre dele: Først sættes teksturen til at være billedet af en stjerne. Det betyder at alle objekter, der skabes via konfigurationsobjektet automatisk vil få stjernen som tekstur. Så sættes værdien af 'repeat' til 11. Fordi der automatisk skabes 1 medlemsobjekt af gruppen, betyder de 11 gentagelser at vi får 12 i alt, hvilket er præcis hvad vi behøver til spillet.

Den sidste del er setXY - dette bruges til at sætte positionen af de 12 medlemmer som gruppen skaber. Hvert medlem placeres begyndende ved x: 12, y: 0 og med et skridt på 70 pixels i x-retningen imellem sig. Det betyder at det første medlem vil blive placeret på 12 x 0, den næste er 70 pixels fra denne på 82 x 0, den tredje er på 152 x 0, osv. Værdierne for 'step' er en virkelig nem måde at sprede medlemmerne i en gruppe fra hinanden, imens de bliver skabt. Værdien på 70 er valgt her fordi alle 12 medlemmer så bliver jævnt fordelt på skærmen.

Den næste kodestump gennemløber alle medlemmer af gruppen og giver dem en tilfældig værdi mellem 0.4 og 0.8 for Y bounce. Bounce kan være imellem 0, hvilket betyder ingen deflektion, og 1, fuld deflektion. Da alle stjernerne skabes på position 0 ad y-aksen, vil tyngdekraften trække dem ned indtil de kolliderer med platformene eller jorden. Bounce-værdierne betyder at de hopper lidt vilkårligt op og ned igen, indtil de står helt stille.

Hvis vi kører koden som den står nu, vil stjernerne falde igennem bunden af spillet og ud af syne. For at standse dem må vi checke for kollisioner med platformene. Det kan vi gøre med et nyt Collider-objekt:

this.physics.add.collider(stars, platforms);

Derudover skal vi også checke om spilleren overlapper med en stjerne eller ej:

this.physics.add.overlap(player, stars, collectStar, null, this);

Det beder Phaser om at checke for overlap mellem spilleren og alle stjernerne i gruppen 'stars'. Hvis der opstår et overlap, medsendes den pågældende stjerne til funktionen 'collectStar':

function collectStar (player, star)
{
    star.disableBody(true, true);
}

På simpel vis bliver stjernens fysiklegeme deaktiveret og dets spilobjektet gøres inaktivt og usynligt, hvilket fjerner det fra skærmen. Hvis vi nu kører spillet, har vi en spiller der kan springe fra platform til platform og opsamle stjernerne, der falder ned fra oven. Ikke dårligt for nogle få linjers kode, som forhåbentligt mestendels er temmelig letlæselig :)

image