Phaser.js: всё об играх и разработке

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

Создание классической игры "Змейка" — отличный способ освоить основы Phaser. Эта статья проведет вас через первый шаг: настройку проекта, загрузку графики и подготовку игровой сцены. Вы поймете базовую структуру кода и принципы работы с загрузчиком, что станет фундаментом для любого игрового проекта на этом движке.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('food', 'assets/games/snake/food.png');
        this.load.image('body', 'assets/games/snake/body.png');
    }

    create ()
    {
    }

    update (time, delta)
    {
    }
}

const config = {
    type: Phaser.WEBGL,
    width: 640,
    height: 480,
    backgroundColor: '#bfcc00',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Структура класса сцены

В Phaser вся игровая логика организуется в сценах (Scenes). Класс сцены — это основа вашей игры.

class Example extends Phaser.Scene
{
    preload ()
    {
        // ... загрузка ресурсов
    }

    create ()
    {
        // ... инициализация объектов
    }

    update (time, delta)
    {
        // ... игровой цикл
    }
}

Класс наследуется от Phaser.Scene и содержит три ключевых метода: * preload(): вызывается один раз в самом начале для загрузки изображений, звуков и других ассетов. * create(): вызывается после preload для создания и настройки игровых объектов. * update(): вызывается непрерывно на каждом кадре игры (обычно 60 раз в секунду) для обновления состояния (движение, столкновения, логика).

Загрузка ресурсов в preload()

Перед тем как использовать изображения, их необходимо загрузить в кеш движка. Это делается в методе preload().

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('food', 'assets/games/snake/food.png');
    this.load.image('body', 'assets/games/snake/body.png');
}

* `this.load.setBaseURL()` устанавливает базовый URL для всех последующих загрузок. Это позволяет указывать только относительные пути к файлам.
* `this.load.image(key, url)` загружает изображение и присваивает ему строковый ключ. Позже по этому ключу (например, `'food'`) мы сможем создать спрайт. В нашем случае загружаются два спрайта: еда (`food`) и сегмент тела змейки (`body`).

Конфигурация и запуск игры

После описания сцены необходимо создать объект конфигурации и запустить саму игру.

const config = {
    type: Phaser.WEBGL,
    width: 640,
    height: 480,
    backgroundColor: '#bfcc00',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Объект config определяет основные параметры: * type: Рендерер. Phaser.WEBGL использует аппаратное ускорение, но можно указать Phaser.CANVAS. * width / height: Размер игрового поля в пикселях. * backgroundColor: Цвет фона в HEX-формате. * parent: ID HTML-элемента на странице, в который будет встроен canvas игры. Если элемент не найден, canvas добавится в document.body. * scene: Класс главной сцены, которая будет запущена сразу после инициализации игры.

Создание экземпляра new Phaser.Game(config) запускает весь жизненный цикл.

Что дальше? Подготовка к игровой логике

Сейчас наша сцена пуста. В следующих шагах в методах create() и update() мы добавим:

1. **В create():** Создание змейки из нескольких сегментов (body), появление первой еды (food) на поле, настройку управления с клавиатуры. 2. **В update():** Логику движения змейки по сетке, проверку на поедание еды (столкновение головы с food), рост змейки и проверку на столкновение со стенами или собственным телом.

Пока что убедитесь, что загрузка ресурсов работает корректно и в консоли браузера нет ошибок 404 ("Not Found") для файлов food.png и body.png.

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

Вы успешно создали каркас для игры "Змейка" на Phaser. Мы разобрали структуру сцены, загрузку ресурсов и конфигурацию игры. Для экспериментов попробуйте: изменить цвет фона (backgroundColor), размер игрового окна, загрузить свои изображения или добавить простой спрайт в метод create() с помощью this.add.image(x, y, 'food').