О чем этот пример
Работая с 2D-графикой в играх, часто возникает задача заполнить большую область фона или объекта одной повторяющейся текстурой. Обычный спрайт (`Sprite`) для этого не подходит — он лишь отобразит одну копию изображения. Решение — объект `TileSprite` (плиточный спрайт). Он позволяет создать прямоугольную область, которая автоматически заполняется выбранной текстурой, подобно плитке, и которую можно вращать и масштабировать как единое целое. Эта статья разбирает простой пример создания `TileSprite`, объясняет его ключевые свойства и показывает, как легко управлять им для создания бесшовных фонов или крупных составных объектов.
Версия 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('mushroom', 'assets/sprites/mushroom-32x32.png');
}
create ()
{
const test = this.add.tileSprite(400, 300, 32 * 14, 32 * 8, 'mushroom');
test.setAngle(20).setScale(0.5);
console.log(test);
}
}
const config = {
type: Phaser.CANVAS,
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example
};
const game = new Phaser.Game(config);
Что такое TileSprite?
TileSprite — это игровой объект Phaser, представляющий собой прямоугольную область, заполненную текстурой. Текстура повторяется (тайлится) по горизонтали и вертикали, чтобы покрыть всю заданную область. В отличие от простого растягивания, тайлинг сохраняет детализацию исходного изображения.
Главное преимущество — вы работаете с одной текстурой в памяти, но визуально получаете большую поверхность. Это эффективно для создания фонов, платформ, стен или водных поверхностей.
В примере используется текстура гриба размером 32x32 пикселя, которая будет многократно повторена внутри спрайта.
Создание и конфигурация TileSprite
Объект создается с помощью метода this.add.tileSprite(x, y, width, height, textureKey). Давайте разберем параметры на примере из кода:
const test = this.add.tileSprite(400, 300, 32 * 14, 32 * 8, 'mushroom');* 400, 300: Координаты центра спрайта на игровом холсте.
* 32 * 14, 32 * 8: Ширина и высота области, которую нужно заполнить. В данном случае это 448x256 пикселей (14 и 8 тайлов по 32 пикселя каждый). Phaser автоматически рассчитает, сколько копий текстуры нужно для заполнения.
* 'mushroom': Ключ текстуры, загруженной в preload.
Сразу после создания с объектом можно работать. В примере он поворачивается и масштабируется цепочкой вызовов:
test.setAngle(20).setScale(0.5);* setAngle(20): Поворачивает весь TileSprite на 20 градусов.
* setScale(0.5): Уменьшает весь спрайт (включая его область тайлинга) в два раза. Обратите внимание, что при масштабировании меняется видимая область, но логический размер (заданный при создании) остается прежним.
Практический вывод и отладка
Метод console.log(test); в конце функции create очень полезен для отладки. Он выведет в консоль браузера полную структуру созданного объекта TileSprite. Там вы найдете все его свойства: width, height, tilePositionX, tileScaleY и многие другие. Это прямой путь к пониманию внутреннего состояния объекта.
Ключевое отличие от Sprite — свойства tilePosition и tileScale. Они управляют не положением самого спрайта на сцене, а положением и масштабом *внутренней текстуры* внутри его области. Например, изменяя tilePositionX, вы можете прокручивать текстуру, создавая эффект движущегося фона, при этом сам спрайт остается на месте.
// Прокрутка текстуры вправо на каждом кадре
function update() {
test.tilePositionX += 1;
}Когда использовать TileSprite?
Используйте TileSprite в следующих сценариях:
1. **Фоны:** Для создания больших, бесшовных задних планов (трава, небо, вода).
2. **Крупные объекты:** Для рисования длинных дорог, стен или платформ из небольшой текстуры сегмента.
3. **Прокручиваемые элементы:** Благодаря отдельному управлению tilePosition легко анимировать текстуру для эффекта течения воды или движения облаков.
Избегайте его, если вам нужен одиночный, уникальный спрайт без повторения текстуры — для этого есть обычный Sprite.
Что попробовать дальше
TileSprite — это мощный и производительный инструмент для работы с повторяющимися текстурами в Phaser. Он позволяет создавать большие визуальные области из маленьких изображений, экономя ресурсы и упрощая анимацию фонов.
**Идеи для экспериментов:**
1. Измените tileScaleX и tileScaleY, чтобы растянуть или сжать саму текстуру внутри спрайта, независимо от его общего масштаба.
2. Создайте бесконечно прокручивающийся фон в методе update(), изменяя tilePosition.
3. Попробуйте использовать setOrigin() для смещения точки вращения и масштабирования тайлспрайта.