О чем этот пример
TileSprite — мощный игровой объект в Phaser 3 для создания бесшовных фонов, анимированных текстур и эффектов прокрутки. В отличие от обычного спрайта, его текстура может "замостить" область любого размера, что экономит ресурсы и открывает простор для творчества. Эта статья разбирает официальный пример, наглядно демонстрирующий создание TileSprite и применение к нему ключевых трансформаций: изменение точки вращения (origin), масштабирование, прозрачность и режимы наложения. Вы научитесь контролировать отрисовку плиточных спрайтов с пиксельной точностью.
Версия 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('pic', 'assets/sprites/space-baddie.png');
}
create ()
{
this.add.image(0, 0, 'grid').setOrigin(0);
// Test 1
// Render object at given coordinates
this.test1 = this.add.tileSprite(400, 50, 192, 32, 'pic').setOrigin(0.5);
// Test 2
// Render object at given coordinates factoring in origin 1
this.test2 = this.add.tileSprite(400, 150, 192, 32, 'pic').setOrigin(1, 0.5);
// Test 3
// Render object at given coordinates factoring in origin 0
this.test3 = this.add.tileSprite(400, 150, 192, 32, 'pic').setOrigin(0, 0.5);
// Test 4
// Render object with scale
this.test4 = this.add.tileSprite(400, 250, 192, 32, 'pic').setOrigin(0.5).setScale(2);
// Test 5
// Render object with rotation
this.test5 = this.add.tileSprite(400, 350, 192, 32, 'pic').setOrigin(0.5);
// Test 6
// Render object with alpha
this.test6 = this.add.tileSprite(400, 450, 192, 32, 'pic').setOrigin(0.5).setAlpha(0.5);
// Test 7
// Render object with blend mode
this.test7 = this.add.tileSprite(400, 550, 192, 32, 'pic').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);
Что такое TileSprite и зачем он нужен?
Объект TileSprite (плиточный спрайт) создается с помощью метода this.add.tileSprite(x, y, width, height, textureKey). Его ключевая особенность — текстура, переданная в последнем аргументе, будет повторяться (замоститься) внутри заданной прямоугольной области ширины width и высоты height. Это идеально для создания больших фоновых слоев, бесконечно прокручивающихся в игре, без необходимости использовать огромные изображения.
В примере в качестве текстуры загружено небольшое изображение 'pic' (космический пришелец), которое затем используется для создания нескольких тестовых объектов шириной 192 пикселя и высотой 32 пикселя.
Точка отсчета: магия свойства Origin
Свойство origin определяет точку привязки спрайта внутри его собственной системы координат. По умолчанию оно равно (0.5, 0.5) — центр объекта. Все трансформации (позиционирование, вращение, масштабирование) происходят относительно этой точки.
В первых трех тестах показано, как origin влияет на позиционирование. Все спрайты создаются с одинаковой X-координатой 400, но визуально располагаются по-разному.
// Test 1: Origin = (0.5, 0.5) - центр
this.test1 = this.add.tileSprite(400, 50, 192, 32, 'pic').setOrigin(0.5);
// Test 2: Origin = (1, 0.5) - правый центр
this.test2 = this.add.tileSprite(400, 150, 192, 32, 'pic').setOrigin(1, 0.5);
// Test 3: Origin = (0, 0.5) - левый центр
this.test3 = this.add.tileSprite(400, 150, 192, 32, 'pic').setOrigin(0, 0.5);* **Test 1:** Центр спрайта (origin 0.5) помещен в точку (400, 50). Спрайт симметрично располагается вокруг этой точки.
* **Test 2:** Точка привязки смещена в правый центр спрайта (origin 1, 0.5). Поэтому правый край спрайта теперь находится в точке (400, 150).
* **Test 3:** Точка привязки в левом центре (origin 0, 0.5). Теперь левый край спрайта находится в точке (400, 150). Test 2 и Test 3 созданы на одной Y-координате, но из-за разного origin они не накладываются друг на друга.
Масштабирование, вращение и прозрачность
Как и любой игровой объект в Phaser, TileSprite поддерживает стандартные методы трансформации и визуальных эффектов, которые применяются ко всей плиточной области.
// Test 4: Масштабирование в 2 раза
this.test4 = this.add.tileSprite(400, 250, 192, 32, 'pic').setOrigin(0.5).setScale(2);
// Test 5: Вращение (анимируется в update)
this.test5 = this.add.tileSprite(400, 350, 192, 32, 'pic').setOrigin(0.5);
// Test 6: Полупрозрачность (alpha = 0.5)
this.test6 = this.add.tileSprite(400, 450, 192, 32, 'pic').setOrigin(0.5).setAlpha(0.5);* **Test 4:** Метод .setScale(2) увеличивает и ширину, и высоту спрайта в 2 раза относительно его origin (центра). Исходный размер 192x32 становится 384x64, и текстура внутри также масштабируется.
* **Test 5:** Вращение задается свойством rotation. В методе update() каждый кадр к нему прибавляется 0.01 радиана, создавая плавную анимацию вращения вокруг центра (origin = 0.5).
* **Test 6:** Метод .setAlpha(0.5) устанавливает прозрачность спрайта на 50%. Значение 0 — полностью прозрачный, 1 — полностью непрозрачный.
Эксперименты с режимами наложения (Blend Modes)
Режимы наложения (Blend Modes) определяют, как пиксели спрайта смешиваются с пикселями под ним. В Phaser они задаются числовыми константами.
// Test 7: Применение режима наложения (ADD)
this.test7 = this.add.tileSprite(400, 550, 192, 32, 'pic').setOrigin(0.5).setBlendMode(1);В данном примере используется режим `1, который соответствуетPhaser.BlendModes.ADD` (аддитивное наложение). Этот режим складывает значения цветов спрайта и фона, создавая эффект свечения или осветления. Это особенно полезно для создания эффектов огня, лазеров, света или энергетических полей на основе плиточных текстур.
Для других режимов можно использовать константы, например: Phaser.BlendModes.MULTIPLY, Phaser.BlendModes.SCREEN.
Что попробовать дальше
TileSprite в Phaser — это гибкий инструмент, выходящий за рамки простых фонов. Контроль над origin позволяет точно позиционировать и вращать объект, а стандартные методы вроде setScale, setAlpha и setBlendMode открывают путь к созданию сложных визуальных эффектов.
**Идеи для экспериментов:**
1. Анимируйте свойства tilePositionX и tilePositionY в update(), чтобы создать эффект бесконечно движущегося фона.
2. Скомбинируйте несколько TileSprite с разными режимами наложения (Blend Modes) для создания сложных слоевых эффектов.
3. Используйте очень узкий или широкий TileSprite с вращением для создания радиальных или спиральных узоров.