Разместим спрайт героя на только что созданной платформе.
Создадим класс Hero.js:
import * as PIXI from "pixi.js";
import { App } from '../system/App';
export class Hero {
constructor() {
this.createSprite();
}
createSprite() {
}
}
Реализуйте метод createSprite:
createSprite() {
this.sprite = new PIXI.AnimatedSprite([
App.res("walk1"),
App.res("walk2")
]);
this.sprite.x = App.config.hero.position.x;
this.sprite.y = App.config.hero.position.y;
this.sprite.loop = true;
this.sprite.animationSpeed = 0.1;
this.sprite.play();
}
Герой состоит из двух изображений: walk1 и walk2. Из них создадим покадровую анимацию ходьбы через PIXI.AnimatedSprite. В его конструктор передаём массив текстур анимации. Метод App.res возвращает текстуру по ключу.
Зададим спрайту начальную позицию в глобальной конфигурации игры Config.js:
// ...
export const Config = {
// ...
hero: {
position: {
x: 350,
y: 595
}
},
// ...
};
Установите loop в true, чтобы зациклить анимацию, и задайте нужную скорость воспроизведения:
this.sprite.loop = true;
this.sprite.animationSpeed = 0.1;
Вызовите play, чтобы запустить анимацию.
this.sprite.play();
Класс героя готов, и теперь можно создать объект героя на сцене в GameScene.js:
export class GameScene extends Scene {
create() {
// ...
this.createHero();
}
createHero() {
this.hero = new Hero();
this.container.addChild(this.hero.sprite);
}
}