Lav dit f├©rste spil med Phaser 3 - Del 2 - Indl├ªsning af filer

Lad os indl├ªse de filer, som vi har brug for til vores spil. Det g├©res ved at l├ªgge kald til Phasers Loader ind i Scene-objektets preload-funktion. Phaser leder automatisk efter denne funktion ved opstart, og indl├ªser s├Ñ alt der defineres i den.

Lige nu er preload-funktionen tom. ├åndr det til:

function preload ()
{
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
    this.load.image('bomb', 'assets/bomb.png');
    this.load.spritesheet('dude', 
        'assets/dude.png',
        { frameWidth: 32, frameHeight: 48 }
    );
}

Det vil indl├ªse 5 filer: Fire billedefiler og et sprite sheet. Det virker m├Ñske indlysende for nogle, men jeg vil gerne fremh├ªve det f├©rste parameter i kaldene, ogs├Ñ kendt som 'asset key', filens n├©gleord (fx 'sky', 'bomb'). Denne tekststreng er et link til den indl├ªste fil, og det bruges senere, n├Ñr der skal skabes Game Objects, alts├Ñ objekter til brug i spillet. Man kan frit bruge enhver gyldig JavaScript-tekststreng som n├©gle.

Vis et billede

For at vise en af de indl├ªste billeder p├Ñ sk├ªrmen, s├Ñ s├ªt den f├©lgende kode ind i create-funktionen:

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

Du kan se det i part3.html. Hvis du ├Ñbner den fil i en browser, vil du kunne se en spilsk├ªrm med en bl├Ñ himmel som baggrund:

V├ªrdierne 400 og 300 er billedets x og y-koordinater. Hvorfor 400 og 300? Det er fordi alle spilobjekter i Phaser positioneres ud fra deres centerpunkt. Baggrundsbilledet er 800 x 600 pixels i st├©rrelse, s├Ñ hvis vi placerede det centreret p├Ñ 0 x 0, ville vi kun se det nederste h├©jre hj├©rne af det. Men hvis vi placerer det p├Ñ 400 x 300, kan vi se hele billedet.

Hint: Du kan bruge setOrigin for at ├ªndre dette. Eksempelvis ville koden this.add.image(0, 0,'sky').setOrigin(0, 0) ├ªndre billedets positionering til dets ├©verste venstre hj├©rne. I Phaser 2 brugte man egenskaben anchor til dette, men i Phaser 3 sker det via egenskaberne originX og originY i stedet.

Spilobjekterne vises i den r├ªkkef├©lge som du skaber dem i. S├Ñ hvis du fx ├©nsker at placere et billede af en stjerne ovenp├Ñ baggrunden, skal du sikre at det tilf├©jes som det n├ªste billede, efter billedet af himlen:

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