ðØðÁð║ð░ ð┤ð░ ðÀð░ÐÇðÁð┤ð©ð╝ ÐÇðÁÐüÐâÐÇÐüð©ÐéðÁ, ð║ð¥ð©Ðéð¥ ÐëðÁ ð¢ð© ð▒Ðèð┤ð░Ðé ð¢ðÁð¥ð▒Ðàð¥ð┤ð©ð╝ð© ðÀð░ ð©ð│ÐÇð░Ðéð░. ðóð¥ð▓ð░ ÐüðÁ ð┐ÐÇð░ð▓ð© ÐçÐÇðÁðÀ ð©ðÀð┐ð¥ð╗ðÀð▓ð░ð¢ðÁ ð¢ð░ ð║ð╗ð░Ðüð░ 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. ðÉð║ð¥ ð│ð¥ ð¥Ðéð▓ð¥ÐÇð©ÐéðÁ ð▓ ð▒ÐÇð░ÐâðÀÐèÐÇ, ð▓ðÁÐçðÁ ÐëðÁ ð▓ð©ð┤ð©ÐéðÁ ð©ð│ÐÇð░ð╗ð¢ð©ÐÅ ðÁð║ÐÇð░ð¢, ð┐ð¥ð║ÐÇð©Ðé ÐüÐèÐü Ðüð©ð¢ ð¢ðÁð▒ðÁÐüðÁð¢ Ðäð¥ð¢:

image

ðíÐéð¥ð╣ð¢ð¥ÐüÐéð©ÐéðÁ 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 ð¢ð░ ð┐ÐèÐÇð▓ð¥ ð╝ÐÅÐüÐéð¥, Ðéð¥ ð▒ð© ð▒ð©ð╗ð¥ ðÀð░ð║ÐÇð©Ðéð¥ ð¥Ðé Ðäð¥ð¢ð░, ð║ð¥ð╣Ðéð¥ ð┐ð¥ð║ÐÇð©ð▓ð░ ÐåÐÅð╗ð░Ðéð░ ð┐ð╗ð¥Ðë ð¢ð░ ð©ð│ÐÇð░Ðéð░.