О чем этот пример

Импорт анимированных спрайтов из Aseprite в Phaser 3 — это быстрый способ перенести готовые анимации из популярного пиксель-арт редактора прямо в вашу игру. Вместо ручного описания каждого кадра в коде, вы загружаете файлы, созданные в Aseprite, и Phaser автоматически строит из них анимации. Это экономит часы работы и исключает ошибки в координатах кадров.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


class Demo extends Phaser.Scene {
	constructor() {
		super({})
	}

	preload() {
		
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.aseprite("player", "assets/tests/player.png", "assets/tests/player.json")
		this.load.image("player-sheet", "assets/tests/player.png")
	}

	create() {
		// Animated sprite from Aseprite
		this.anims.createFromAseprite("player")
		const player = new Phaser.GameObjects.Container(this)
		const sprite = this.add.sprite(20, 20, "player")
		player.add(sprite)
		this.add.existing(player)
		sprite.play({ key: "PLAYER_IDLE_D", repeat: -1 })

		// Basic sprite for comparison
		const spritesheet = new Phaser.GameObjects.Sprite(this, 80, 10, "player-sheet").setOrigin(0, 0)
		this.add.existing(spritesheet)
	}

	update() {}
}

const zoom = 3

var config = {
	type: Phaser.AUTO,
	parent: "game",
	backgroundColor: "#000000",
	width: 960 / zoom,
	height: 540 / zoom,
	pixelArt: true,
	scale: {
		parent: "phaser-example",
		zoom: zoom,
	},
	scene: Demo,
}

new Phaser.Game(config)

Подготовка файлов в Aseprite

Перед началом работы необходимо экспортировать из Aseprite два файла: изображение-спрайтшит (PNG) и файл с метаданными (JSON). В JSON содержится вся информация об анимациях: имена, последовательность кадров, их координаты на листе и длительность.

Убедитесь, что в Aseprite вы задали имена тегам (анимациям), например, PLAYER_IDLE_D. Именно по этим именам вы будете обращаться к анимациям в коде Phaser.

Загрузка ресурсов в Phaser

В методе preload сцены мы загружаем файлы, используя специальный загрузчик для Aseprite. Для сравнения также загружаем то же изображение как обычный статичный спрайт.

preload() {
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.aseprite("player", "assets/tests/player.png", "assets/tests/player.json");
    this.load.image("player-sheet", "assets/tests/player.png");
}

Метод this.load.aseprite принимает три аргумента: ключ ресурса (player), путь к PNG-спрайтшиту и путь к JSON-файлу с метаданными. Phaser связывает эти файлы в один ресурс, готовый для создания анимаций.

Создание анимаций и спрайтов

После загрузки в методе create мы извлекаем данные из JSON и создаём анимации, готовые к использованию.

create() {
    // 1. Создание анимаций из Aseprite-ресурса
    this.anims.createFromAseprite("player");

    // 2. Создание контейнера и анимированного спрайта
    const player = new Phaser.GameObjects.Container(this);
    const sprite = this.add.sprite(20, 20, "player");
    player.add(sprite);
    this.add.existing(player);

    // 3. Запуск конкретной анимации по её тегу из Aseprite
    sprite.play({ key: "PLAYER_IDLE_D", repeat: -1 });
}

Ключевой метод this.anims.createFromAseprite("player") парсит загруженный JSON и регистрирует в менеджере анимаций сцены все анимации, найденные в файле. Каждая анимация получает key, равный имени тега из Aseprite. После этого можно создать спрайт с ключом текстуры "player" и проигрывать на нём любую из зарегистрированных анимаций с помощью sprite.play.

Настройка отображения: pixelArt и zoom

Для корректного отображения пиксель-арт графики и анимаций важно правильно настроить конфигурацию игры.

const zoom = 3;

var config = {
    type: Phaser.AUTO,
    // ... другие настройки
    pixelArt: true,
    scale: {
        parent: "phaser-example",
        zoom: zoom,
    },
    scene: Demo,
};

Параметр pixelArt: true отключает сглаживание текстур, сохраняя чёткие пиксельные границы. Параметр zoom внутри scale масштабирует весь игровой канвас. В примере используется трёхкратный зум (zoom: 3), чтобы небольшие спрайты (созданные для низкого разрешения) были хорошо видны на современных экранах. Физические размеры холста (width и height) при этом делятся на зум, чтобы итоговое отображаемое изображение было увеличено, а не обрезано.

Что попробовать дальше

Использование createFromAseprite — это самый эффективный способ работы с анимациями в Phaser 3, если ваш художник использует Aseprite. Вы получаете готовые, именованные анимации без написания конфигов кадров вручную. Для экспериментов попробуйте: 1. Экспортировать из Aseprite спрайт с несколькими анимациями (idle, run, attack) и переключать их по нажатию клавиш. 2. Использовать контейнер (Phaser.GameObjects.Container) для группировки анимированного спрайта с другими объектами, например, с оружием или эффектами. 3. Настроить разные значения frameRate для анимации после её создания, чтобы ускорить или замедлить воспроизведение прямо в коде игры.