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

При разработке игр часто возникает необходимость работать с цветом на уровне отдельных пикселей: для проверки столкновений на основе цвета, реализации механик 'закрашивания' или анализа текстур. Метод `this.textures.getPixel()` в Phaser 3 предоставляет простой способ получить данные о цвете в любой точке загруженного изображения. В этой статье мы разберем, как использовать этот API на практическом примере, и объясним, какие данные он возвращает.

Версия 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('wheel', 'assets/pics/color-wheel.png');
    }

    create ()
    {
        //  white
        let color = this.textures.getPixel(0, 0, 'wheel');

        console.log(color);

        //  140x170 = #f7901e - rgb(247, 144, 30)
        color = this.textures.getPixel(140, 170, 'wheel');

        console.log(color);

        //  412x300 = #43bed8 rgb(67, 190, 216)
        color = this.textures.getPixel(412, 300, 'wheel');

        console.log(color);

        //  100x420 = #b21e3b rgb(178, 30, 59)
        color = this.textures.getPixel(100, 420, 'wheel');

        console.log(color);

        //  520x260 = #0e9553 rgb(14, 149, 83)
        color = this.textures.getPixel(520, 260, 'wheel');

        console.log(color);
    }
}

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Загрузка текстуры

Перед тем как получить цвет пикселя, необходимо загрузить изображение как текстуру в память игры. Это делается в методе preload() сцены. В примере используется метод this.load.image(), где первый параметр — это ключ текстуры, а второй — URL изображения. Базовый URL задается через this.load.setBaseURL() для удобства.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('wheel', 'assets/pics/color-wheel.png');
}

После выполнения этого кода текстура с ключом 'wheel' будет доступна для работы в методах сцены, таких как create() или update().

Использование метода `getPixel()`

Метод this.textures.getPixel(x, y, key) вызывается для получения цвета пикселя в указанных координатах текстуры. Параметры: - `xиy` — координаты пикселя на текстуре (в пикселях, отсчет от верхнего левого угла). - key — строковый ключ текстуры, загруженной ранее.

let color = this.textures.getPixel(0, 0, 'wheel');
console.log(color);

В примере первый вывоз получает цвет в точке (0,0), которая соответствует белому фону изображения. Результат выводится в консоль для проверки.

Анализ возвращаемых данных

Метод getPixel() возвращает объект типа Phaser.Types.Textures.ColorObject. Этот объект содержит три свойства: - `r` — значение красного канала (от 0 до 255). - `g` — значение зеленого канала (от 0 до 255). - `b` — значение синего канала (от 0 до 255). - `a` — значение альфа-канала (прозрачность, от 0 до 255).

color = this.textures.getPixel(140, 170, 'wheel');
// Результат: { r: 247, g: 144, b: 30, a: 255 }

В примере для координат (140,170) возвращается объект, соответствующий оранжевому цвету (#f7901e). Эти данные можно использовать для сравнения цветов или преобразования в другие форматы (например, в HEX).

Практическое применение

Получение цвета пикселя открывает несколько сценариев для разработки игр: - **Проверка столкновений на основе цвета**: например, если игрок касается области определенного цвета, запускается событие. - **Динамическое изменение текстур**: анализ цвета может использоваться для применения фильтров или модификаций. - **Игры с механикой рисования**: можно проверять, закрашена ли область нужным цветом.

// Пример: проверка, является ли пиксель красным
color = this.textures.getPixel(100, 420, 'wheel');
if (color.r > 150 && color.g < 50 && color.b < 50) {
    console.log('Найден красный пиксель!');
}

Важно помнить, что координаты отсчитываются от верхнего левого угла текстуры, а не от области отображения на экране.

Ограничения и особенности

При использовании getPixel() учитывайте следующие моменты: - Метод работает только с текстурами, загруженными в память Phaser. Если текстура не загружена, вызов приведет к ошибке. - Координаты должны быть в пределах размеров текстуры. Выход за границы вернет null или некорректные данные. - Для производительности: частые вызовы getPixel() (например, в цикле update()) могут замедлить игру, особенно на мобильных устройствах. Используйте их экономно.

// Неправильно: выход за границы текстуры (предположим, размер 600x600)
color = this.textures.getPixel(1000, 1000, 'wheel'); // Может вернуть null

Всегда проверяйте размеры текстуры через this.textures.get(key).getSourceImage() перед вызовом метода.

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

Метод this.textures.getPixel() — это мощный инструмент для работы с цветами на уровне пикселей в Phaser. Он прост в использовании, но открывает возможности для сложных механик, связанных с анализом изображений. Для экспериментов попробуйте создать мини-игру, где игрок должен кликать на области определенного цвета, или реализовать систему 'волшебной кисти', изменяющей текстуры динамически. Не забывайте тестировать производительность при активном использовании метода в реальном времени.