Спрайты

Спрайт в Two.js представляет собой графический объект, который обычно используется для отображения изображений или текстур в 2D-сцене. Спрайты удобны для анимации, интерактивных элементов и визуализации сложных сцен с большим количеством однотипных объектов, где использование обычных векторных фигур менее эффективно.

Инициализация спрайта

Для создания спрайта используется метод Two.Sprite, который принимает объект текстуры, набор кадров и опции анимации:

const texture = new Image();
texture.src = 'sprite.png';

const sprite = new Two.Sprite(texture, 64, 64, 4); // ширина, высота, количество кадров
two.add(sprite);

Параметры:

  • texture — объект изображения или CanvasTexture.
  • width и height — размеры отдельного кадра.
  • frames — количество кадров в спрайте (для анимации).

Настройка анимации

Two.js поддерживает анимацию спрайтов через изменение текущего кадра. Основные свойства:

  • sprite.frame — индекс текущего кадра.
  • sprite.loop — флаг цикличности анимации.
  • sprite.fps — скорость анимации в кадрах в секунду.

Пример простой анимации:

sprite.loop = true;
sprite.fps = 12;

two.bind('upd ate', function(frameCount) {
  sprite.frame = (frameCount % sprite.frames);
}).play();

Важно: sprite.frame начинается с нуля и не может превышать frames - 1.

Управление положением и масштабом

Спрайты наследуют свойства Two.Vector:

  • sprite.translation.se t(x, y) — перемещение по сцене.
  • sprite.scale = 2 — масштабирование спрайта.
  • sprite.rotation = Math.PI / 4 — поворот на 45°.

Можно комбинировать эти свойства для создания динамичных эффектов:

sprite.translation.set(200, 150);
sprite.scale = 1.5;
sprite.rotation = Math.PI / 6;

Интерактивность спрайтов

Two.js не предоставляет встроенные события мыши для спрайтов, но их можно реализовать через проверку координат при клике:

canvas.addEventListener('click', function(event) {
  const x = event.offsetX;
  const y = event.offsetY;
  
  if (x >= sprite.translation.x - sprite.width / 2 &&
      x <= sprite.translation.x + sprite.width / 2 &&
      y >= sprite.translation.y - sprite.height / 2 &&
      y <= sprite.translation.y + sprite.height / 2) {
    console.log('Спрайт кликнут');
  }
});

Использование спрайт-листов

Спрайт-листы позволяют объединять несколько кадров в одном изображении. В Two.js важно правильно указывать размеры каждого кадра и количество кадров:

const spriteSheet = new Image();
spriteSheet.src = 'spritesheet.png';

const sprite = new Two.Sprite(spriteSheet, 64, 64, 8); // 8 кадров в одном ряду
sprite.fps = 10;
two.add(sprite);

Можно реализовать цикличные анимации, переключая кадры по горизонтали или вертикали в спрайт-листе.

Комбинирование с векторными объектами

Спрайты могут быть частью группы Two.Group, что позволяет управлять их положением, масштабом и прозрачностью коллективно:

const group = two.makeGroup(sprite);
group.translation.set(300, 200);
group.scale = 1.2;

Оптимизация производительности

При работе с большим количеством спрайтов стоит учитывать следующие моменты:

  • Использовать спрайт-листы вместо отдельных изображений для уменьшения количества текстур.
  • Ограничивать частоту обновления кадров с помощью свойства fps.
  • Использовать Two.Group для пакетной трансформации объектов, чтобы сократить вычисления сцены.

Альтернативные методы анимации

Для более сложных эффектов можно комбинировать спрайты с:

  • Масками и градиентами (Two.Path, Two.Gradient) для динамической визуализации.
  • Событиями update и requestAnimationFrame для синхронизации движения с анимацией кадров.
  • Tween-анимацией через сторонние библиотеки, управляя свойствами translation, scale и rotation.

Итоговые рекомендации

Спрайты в Two.js являются мощным инструментом для визуализации анимаций и интерактивных элементов. Они обеспечивают гибкость за счет управления кадрами, позицией и масштабом, а также легко интегрируются с другими объектами библиотеки, создавая сложные сцены с минимальными затратами на производительность.

Оглавление