О чем этот пример
Работа с игровыми объектами — основа любого проекта на Phaser. Часто начинающие разработчики сталкиваются с неожиданным поведением спрайтов при попытке их повернуть, масштабировать или изменить точку привязки. Этот пример наглядно демонстрирует ключевые методы класса `Phaser.GameObjects.Image`, которые позволяют полностью контролировать отображение графики в сцене. Понимание этих принципов критически важно для корректного позиционирования элементов интерфейса, анимации персонажей и создания визуальных эффектов.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
test7;
test6;
test5;
test4;
test3;
test2;
test1;
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('grid', 'assets/pics/debug-grid-1920x1920.png');
this.load.image('logo', 'assets/sprites/phaser3-logo-small.png');
}
create ()
{
this.add.image(0, 0, 'grid').setOrigin(0);
// Test 1
// Render object at given coordinates
this.test1 = this.add.image(400, 50, 'logo').setOrigin(0.5);
// Test 2
// Render object at given coordinates factoring in origin 1
this.test2 = this.add.image(400, 150, 'logo').setOrigin(1, 0.5);
// Test 3
// Render object at given coordinates factoring in origin 0
this.test3 = this.add.image(400, 150, 'logo').setOrigin(0, 0.5);
// Test 4
// Render object with scale
this.test4 = this.add.image(400, 250, 'logo').setOrigin(0.5).setScale(2);
// Test 5
// Render object with rotation
this.test5 = this.add.image(400, 350, 'logo').setOrigin(0.5);
// Test 6
// Render object with alpha
this.test6 = this.add.image(400, 450, 'logo').setOrigin(0.5).setAlpha(0.5);
// Test 7
// Render object with blend mode
this.test7 = this.add.image(400, 550, 'logo').setOrigin(0.5).setBlendMode(1);
}
update ()
{
this.test5.rotation += 0.01;
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example
};
const game = new Phaser.Game(config);
Базовое создание и позиционирование
В методе create() сцены создается несколько объектов Image. Фундаментальный метод this.add.image(x, y, textureKey) создает новый объект-изображение. Первые два аргумента — это координаты на холсте.
Однако, куда именно на изображении "приходятся" эти координаты, определяет свойство Origin (точка привязки). По умолчанию значение Origin равно 0.5, что означает центр изображения. В первом тесте мы явно устанавливаем setOrigin(0.5), хотя это значение и так стоит по умолчанию. Объект test1 будет нарисован так, что его центр совпадет с точкой (400, 50).
this.test1 = this.add.image(400, 50, 'logo').setOrigin(0.5);Второй и третий тесты показывают, как Origin влияет на позицию. При setOrigin(1, 0.5) точка привязки смещается к правому краю изображения по горизонтали и остается по центру по вертикали. Таким образом, координаты (400, 150) будут указывать на правую границу спрайта.
// Координата X (400) указывает на ПРАВЫЙ край спрайта
this.test2 = this.add.image(400, 150, 'logo').setOrigin(1, 0.5);
// Координата X (400) указывает на ЛЕВЫЙ край спрайта
this.test3 = this.add.image(400, 150, 'logo').setOrigin(0, 0.5);Масштабирование и вращение
Метод setScale(factor) позволяет увеличить или уменьшить объект относительно его текущего размера. В четвертом тесте изображение масштабируется в 2 раза. Важно помнить, что масштабирование происходит относительно точки привязки (Origin). Так как мы установили Origin в 0.5 (центр), спрайт равномерно увеличится во все стороны от своего центра.
this.test4 = this.add.image(400, 250, 'logo').setOrigin(0.5).setScale(2);Пятый тест демонстрирует вращение. В методе create() мы просто создаем объект. Вращение происходит в методе update(), который вызывается на каждом кадре игры. Свойство rotation увеличивается на 0.01 радиана за кадр, создавая плавную анимацию поворота. Вращение, как и масштабирование, происходит вокруг точки привязки объекта.
// В create()
this.test5 = this.add.image(400, 350, 'logo').setOrigin(0.5);
// В update()
this.test5.rotation += 0.01;Прозрачность и режимы наложения
Метод setAlpha(value) управляет прозрачностью объекта, где 1 — полностью непрозрачный, а 0 — полностью прозрачный. В шестом тесте значение 0.5 делает логотип полупрозрачным.
this.test6 = this.add.image(400, 450, 'logo').setOrigin(0.5).setAlpha(0.5);Седьмой тест использует setBlendMode(index). Blend Mode (режим наложения) определяет, как цвет пикселей объекта комбинируется с цветами пикселей под ним. Значение 1 соответствует константе Phaser.BlendModes.ADD. Этот режим добавляет значения цветов объекта и фона, создавая эффект "свечения". Это мощный инструмент для создания визуальных эффектов без дополнительных текстур.
this.test7 = this.add.image(400, 550, 'logo').setOrigin(0.5).setBlendMode(1);Важность точки Origin
Как видно из примеров, точка привязки (Origin) — это центральное свойство, влияющее на все трансформации объекта: позицию, масштаб, вращение. Ее понимание избавляет от типичных проблем, когда объект вращается не вокруг своего центра или масштабируется "уплывая" в сторону.
- Origin (0, 0) — левый верхний угол. Координаты объекта указывают на его верхний левый угол. - Origin (0.5, 0.5) — центр (значение по умолчанию). Координаты объекта указывают на его центр. - Origin (1, 1) — правый нижний угол.
Все методы трансформации (setScale, setRotation) используют эту точку как опорную.
// Поворот вокруг левого верхнего угла
const spriteA = this.add.image(100, 100, 'logo').setOrigin(0, 0);
spriteA.rotation += 0.01;
// Поворот вокруг центра (более естественно)
const spriteB = this.add.image(100, 200, 'logo').setOrigin(0.5, 0.5);
spriteB.rotation += 0.01;Что попробовать дальше
Управление объектами Image в Phaser сводится к комбинации методов setOrigin, setScale, setRotation и setAlpha. Ключевой вывод: всегда явно задавайте точку привязки (Origin), соответствующую вашей задаче, прежде чем применять трансформации. Для экспериментов попробуйте: анимировать масштаб объекта (scale) для эффекта пульсации, комбинировать несколько режимов наложения (blendMode) на одном объекте, используя setBlendMode, или вращать объект вокруг точки за его пределами, установив Origin больше 1 (например, setOrigin(1.5, 0.5)).