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:

image

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');
}

Hvis du tilføjede star-billedet først, ville det blive dækket af billedet af himlen.