Имаме няколко великолепни и изкушителни платформи, но няма кой да тича по тях. Нека да поправим това.

Създайте нова променлива на име player и добавете следния код към функцията create. Можете да видите това в part5.html:

player = this.physics.add.sprite(100, 450, 'dude');

player.setBounce(0.2);
player.setCollideWorldBounds(true);

this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

this.anims.create({
    key: 'turn',
    frames: [ { key: 'dude', frame: 4 } ],
    frameRate: 20
});

this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
});

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

Физичен спрайт

Първа част на кода създава спрайта (думата идва от английската дума sprite, което е стар термин в компютърната графика):

player = this.physics.add.sprite(100, 450, 'dude');

player.setBounce(0.2);
player.setCollideWorldBounds(true);

Това създава нов спрайт на име player, разположен на координати (100; 450), което е близо до долния край на играта. Спрайтът се създава чрез фабриката за физични обекти на играта (this.physics.add), което означава, че той по подразбиране ще има физично тяло.

След като създадем спрайтът, му даваме малка стойност на отскок - 0,2. Това означава, че след като се приземи от скок, ще отскочи съвсем малко. След това позволяваме на спрайтът да се отблъсква от границите на света, които по подразбиране са същите като размера на играта. Понеже играта ни е 800x600 пиксела, играчът няма да може да падне от страните или да скочи над света.

Анимации

Ако отново погледнете функцията preload, ще видите, че dude беше заредено не като единично изображение, а като такова с няколко анимационни кадъра. Ето как изглежда цялото изображение:

Има общо 9 кадъра - 4 за тичане наляво, 1 за гледане към камерата и още 4 за тичане надясно. Имайте предвид, че Phaser може да обръща спрайтове, с което бихте могли да си спестите анимационни кадри, но за сега ще го правим по по-простия начин.

Ще направим две анимации на име left и right. Ето анимацията left за ходене наляво:

this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

Анимацията left използва кадри 0, 1, 2 и 3, като показва 10 кадъра в секунда. Стойността repeat (буквално значещо "повторение") е -1, което кара анимацията да се повтаря вечно.

Това е стандартна анимация за тичане, която ще повторим за обратната посока с ключ right, както и още една с ключ turn.

Допълнителна информация: Във Phaser 3, администраторът на анимациите (който ще намерите в кода под името Animation Manager) е глобална система. Анимациите, създадени с него, са достъпни за всички обекти на играта. Всеки ще използва едни и същи данни, но с различна времева линия. Това Ви позволява да създадете дадена анимация веднъж и да я приложите към колкото си искате обекти на играта. Това е различно от Phaser 2, където анимациите принадлежаха само на обекта на играта, за който са създадени.