← На главную
Серия руководств

Шаг 3. Создание героя

Создание платформера с PixiJS • Шаг 3 из 15

Разместим спрайт героя на только что созданной платформе.

Создадим класс 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);
    }
}