Sprite: позиция, размер, видимость

В Babylon.js спрайт представляет собой 2D-объект, который можно отображать в 3D-сцене. Спрайты используются для создания частиц, иконок, игровых элементов и других объектов, не требующих полноценной геометрии. Работа со спрайтами осуществляется через SpriteManager, который управляет коллекцией спрайтов, их текстурами и рендерингом.

Создание SpriteManager

const spriteManager = new BABYLON.SpriteManager(
    "spriteManager",           // имя менеджера
    "textures/sprites.png",    // путь к текстуре
    2000,                      // максимальное количество спрайтов
    { width: 64, height: 64 },// размеры одного спрайта
    scene                       // сцена Babylon.js
);

Ключевые моменты:

  • textures/sprites.png — текстура, содержащая все спрайты. Обычно используется spritesheet, где каждый спрайт занимает определённую область.
  • width/height — задают ширину и высоту одного спрайта в пикселях.
  • maxSprites — максимальное количество спрайтов, управляемое менеджером.

Создание спрайта

const sprite = new BABYLON.Sprite("mySprite", spriteManager);

После создания спрайт автоматически добавляется в менеджер. Основные свойства спрайта для управления позицией, размером и видимостью:

  • sprite.position — вектор BABYLON.Vector3, определяющий позицию спрайта в 3D-пространстве.
  • sprite.size — число, задающее масштаб спрайта. Размер спрайта пропорционален указанной величине.
  • sprite.isVisible — булево значение. Если false, спрайт не рендерится, но остаётся частью менеджера.

Управление позицией

sprite.position = new BABYLON.Vector3(5, 1, -3);
  • Координаты X, Y и Z определяют положение спрайта в пространстве сцены.
  • Можно изменять координаты по отдельности:
sprite.position.x += 1;
sprite.position.y = 2;
  • Для анимаций или движения удобно использовать scene.registerBeforeRender:
scene.registerBeforeRender(() => {
    sprite.position.z += 0.1;
});

Изменение размера спрайта

  • Размер задаётся через свойство size. По умолчанию равен 1:
sprite.size = 2; // спрайт увеличен в 2 раза
sprite.size = 0.5; // спрайт уменьшен вдвое
  • Можно комбинировать с масштабированием через sprite.scaleX и sprite.scaleY для независимого изменения по осям:
sprite.scaleX = 1.5;
sprite.scaleY = 0.8;
  • Масштабирование влияет на визуальное отображение, не меняя физическую позицию спрайта в сцене.

Управление видимостью

  • sprite.isVisible определяет, будет ли спрайт рендериться:
sprite.isVisible = false; // спрайт скрыт
sprite.isVisible = true;  // спрайт видим
  • Это полезно для динамического включения/выключения объектов без их удаления из менеджера.
  • Для оптимизации производительности можно временно скрывать спрайты, которые находятся вне поля зрения камеры.

Использование отдельных кадров из спрайтшита

  • Если текстура содержит несколько спрайтов, можно выбрать конкретный кадр через cellIndex:
sprite.cellIndex = 3; // отображается четвёртый кадр (индексация с 0)
  • Можно анимировать спрайт, изменяя cellIndex в цикле:
let frame = 0;
scene.registerBeforeRender(() => {
    frame = (frame + 1) % 4;
    sprite.cellIndex = frame;
});

Дополнительные настройки спрайтов

  • sprite.angle — вращение спрайта вокруг оси Z (в радианах).
  • sprite.color — цветовой фильтр в формате BABYLON.Color4. Позволяет изменять оттенок спрайта без изменения текстуры.
  • sprite.invertU / sprite.invertV — отражение по горизонтали и вертикали.

Организация большого количества спрайтов

  • SpriteManager позволяет управлять тысячами спрайтов эффективно.
  • Для динамических сцен важно контролировать isVisible и размеры спрайтов, чтобы минимизировать нагрузку на GPU.
  • Рекомендуется группировать спрайты по текстурам, чтобы уменьшить количество вызовов рендера.

Практическая схема работы

  1. Создать SpriteManager с текстурой и параметрами размеров.
  2. Создать спрайты через конструктор BABYLON.Sprite.
  3. Задать позицию (position), размер (size/scaleX/scaleY) и видимость (isVisible).
  4. При необходимости анимировать с помощью cellIndex или вращения.
  5. Использовать scene.registerBeforeRender для динамических изменений.

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

Оглавление