В этом туторе я хочу тебе рассказать, дорогой Хабраюзер, о использовании спрайтов во фреймворке BabylonJS.


Если ты хочешь на своей сцене использовать спрайты, то необходимо инициализировать “менеджер спрайтов” для оптимальной работы GPU-ресурсов путём их группирования (спрайтов) в одном месте. Этот менеджер является обязательным, даже если ты хочешь разместить всего один спрайт. Для его инициализации, просто надо добавить в свой код следующую строчку:

var spriteManagerTrees = new BABYLON.SpriteManager(“treesManager”, “images/trees.png, 2000, 800, scene);

Где:

• tressManager — имя инициализированного менеджера
• images/trees.png — адрес 2D-изображения
• 2000 — максимальное количество экземпляров в этом менеджере
• 800 — размер ячейки
• scene — текущая сцена

Давай рассмотрим следующее изображение:

Каждое изображение спрайта не должен превышать размер более чем 64x64 пикселя.

var spriteManagerPlayer = new BABYLON.SpriteManager(“playerManager”, “images/player.png, 2, 64, scene);

На этот раз мы указали менеджеру что будет 2 экземпляра с размером ячейки 64.

Теперь, когда у нас есть менеджер, мы можем создавать экземпляры нашего спрайта, связанного с этим менеджером. Создать экземпляр очень просто:

var player = new BABYLON.Sprite(“player”, spriteManagerPlayer);

Вауля! Наш спрайт отображается!
Мы можем им манипулировать, как и любым другим объектом сцены:

player.position.y = -0.3;
player.angle = Math.PI/4;
player.invertU = -1;
player.width = 0.3;
player.height = 0.4;

Анимация

Ты должен загрузить один большой файл образа, который будет содержать все изображения спрайта рядом друг с другом.
Твой образ должен выглядеть таким образом:


Если ты хочешь начать анимацию, то вызови функцию playAnimation:

var spriteManagerPlayer = new BABYLON.SpriteManager(“playerManager”, “images/player.png, 2, 64, scene);
player.playAnimation(0, 43, true, 100);

Где:

• 0, 43 — стартовый и конечный спрайт в анимации
• true — включение анимации
• 100 — задержка между кадрами

Если хочешь перейти к определённому изображению, то после вызова экземпляра вставь:

player.cellIndex = 44;

Вот и всё. До встречи!