Нека да заредим ресурсите, които ще ни бъдат необходими за играта. Това се прави чрез използване на класа Loader във функция на сцената на име preload. Phaser автоматично ще я намери и ще зареди всичко, което е поставено вътре.

В момента функцията preload е празна. Променете я на:

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

Този код ще зареди 5 изображения, като последното съдържа няколко кадъра от анимация - такива изображения се наричат sprite sheet. Може да изглежда очевидно за някои, но е добре да отбележим първия параметър на функцията, познат като ключ на ресурса (тоест 'sky', 'bomb' и т.н.). Този низ е връзката със заредения ресурс и е това, което ще използвате в кода си, когато създавате обекти в играта. Ключът може да бъде всякакъв валиден низ.

Показване на изображение

За да покажем едно от изображенията, които заредихме, ще сложим следния код във функцията create:

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

Можете да намерите това в part3.html. Ако го отворите в браузър, вече ще видите игралния екран, покрит със син небесен фон:

Стойностите 400 и 300 са координатите на изображението по оста X и по оста Y. Защо 400 и 300? Защото във Phaser 3, всеки обект от играта по подразбиране се позиционира спрямо своя център. Изображението за фона е с размер 800x600 пиксела и ако го поставим на координати (0; 0) спрямо центъра му, само долният му десен край щеше да се вижда. Като го поставим на (400; 300), се вижда цялото.

Съвет: Можете да промените това с метода setOrigin (терминът origin означава център на координатна система). Например, с кода this.add.image(0, 0, 'sky').setOrigin(0, 0), координатите на изображението ще бъдат спрямо горния му ляв край. Във Phaser 2, свойството anchor съдържаше тази настройка, но Phaser 3 използва originX и originY.

Редът, в който се показват обектите на играта, съвпада с реда, в който те са създадени. Тоест, ако искате да сложите звезда над фона, трябва да се уверите, че е добавена като изображение на второ място, след изображението с небето:

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

Ако сложите изображението star на първо място, то би било закрито от фона, който покрива цялата площ на играта.