Image: статичные изображения

Phaser — это мощная библиотека для создания 2D-игр на JavaScript, которая предоставляет обширные возможности для работы с графикой. Одним из ключевых элементов визуального оформления являются статичные изображения, которые могут служить фоном, объектами интерфейса или декоративными элементами сцены.

Подключение и загрузка изображений

Для использования изображений в Phaser необходимо сначала их загрузить в сцену с помощью метода preload(). Основной инструмент — это объект this.load, предоставляющий методы для работы с различными типами ресурсов.

preload() {
    this.load.image('background', 'assets/background.png');
    this.load.image('player', 'assets/player.png');
}
  • 'background' и 'player' — это ключи, по которым изображения будут доступны в сцене.
  • 'assets/background.png' — путь к файлу изображения. Phaser поддерживает PNG, JPEG и другие форматы.

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

Добавление изображений на сцену

Метод this.add.image(x, y, key) создаёт объект изображения и добавляет его на сцену.

create() {
    this.add.image(400, 300, 'background'); // Центр экрана
    this.add.image(100, 200, 'player');     // Произвольная позиция
}

Параметры метода image:

  • x и y — координаты центра изображения на сцене.
  • key — ключ загруженного ресурса.

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

Настройка размеров и масштабирования

Phaser позволяет изменять размеры изображения с помощью масштабирования (setScale) и изменения размеров с использованием displayWidth и displayHeight.

let player = this.add.image(100, 200, 'player');

// Масштабирование в 2 раза
player.setScale(2);

// Установка точных размеров
player.displayWidth = 50;
player.displayHeight = 100;

Использование setScale сохраняет пропорции изображения, тогда как прямое изменение displayWidth и displayHeight позволяет задавать произвольные размеры, что может привести к искажению.

Управление глубиной (z-index)

В Phaser порядок отображения объектов на сцене определяется глубиной (depth). Объекты с большим значением depth отображаются поверх объектов с меньшим значением.

let background = this.add.image(400, 300, 'background');
let player = this.add.image(100, 200, 'player');

background.setDepth(0);
player.setDepth(1);

Глубина особенно важна при добавлении нескольких слоев графики, чтобы правильно организовать визуальную иерархию.

Применение прозрачности и альфа-канала

Изображения поддерживают установку прозрачности через свойство alpha. Значение 1 соответствует полной непрозрачности, 0 — полной прозрачности.

let ghost = this.add.image(200, 300, 'player');
ghost.setAlpha(0.5); // Полупрозрачное изображение

Также возможна динамическая анимация прозрачности для создания эффектов появления и исчезновения.

Привязка изображений к камере

Phaser поддерживает фиксированные изображения, которые остаются на месте при перемещении камеры, что удобно для интерфейсов и фонов.

let hud = this.add.image(50, 50, 'player').setScrollFactor(0);

setScrollFactor(0) отключает смещение изображения при движении камеры, закрепляя его на экране.

Использование спрайтов для статичных объектов

Хотя спрайты чаще используются для анимаций, статичные спрайты могут быть полезны для объектов с потенциальными взаимодействиями.

let platform = this.add.sprite(400, 500, 'platform');
platform.setInteractive();
platform.on('pointerdown', () => {
    console.log('Платформа нажата');
});

Метод setInteractive() позволяет реагировать на события мыши или касаний, превращая обычное изображение в интерактивный элемент.

Оптимизация работы со статичными изображениями

  1. Группировка ресурсов: загружать изображения в атласах (spritesheet) или текстурных атласах (texture atlas) для снижения количества HTTP-запросов.
  2. Кеширование: Phaser автоматически кэширует изображения, что ускоряет повторное использование.
  3. Использование правильного формата: PNG для прозрачных изображений, JPEG для фонов без прозрачности для экономии памяти.

Примеры комбинирования изображений

Часто на сцене требуется наложение нескольких изображений для создания сложной композиции:

let bg = this.add.image(400, 300, 'background');
let tree = this.add.image(300, 400, 'tree');
let character = this.add.image(400, 450, 'player');

bg.setDepth(0);
tree.setDepth(1);
character.setDepth(2);

Такой подход позволяет строить сцены с несколькими слоями и эффектами перспективы без использования анимации.

Взаимодействие с физикой и коллизиями

Статичные изображения могут быть интегрированы с физическими объектами Phaser:

this.physics.add.staticImage(400, 500, 'platform');

staticImage создаёт объект, который участвует в столкновениях, но не подвержен воздействию силы или гравитации, идеально подходит для платформ и стен.

Эти возможности делают работу со статичными изображениями в Phaser гибкой и удобной, позволяя создавать визуально насыщенные сцены с оптимизированным управлением ресурсами и интерактивностью.

Оглавление