Plane: деформируемая плоскость

В библиотеке Phaser 3 плоскость (Plane) используется для представления двухмерной поверхности, которую можно визуализировать и деформировать с помощью вершинной сетки. Она является основой для создания динамических эффектов, таких как волны, изгибы, анимация текстур или растяжение спрайтов по кривым.

В Phaser Plane реализуется через Phaser.GameObjects.Plane или с использованием Mesh и DynamicTexture, что позволяет работать с отдельными точками сетки для изменения формы плоскости в реальном времени.

Создание плоскости

Создание плоскости включает определение размеров и положения:

const plane = this.add.plane(x, y, width, height, textureKey);
  • x, y – координаты центра плоскости.
  • width, height – размеры плоскости.
  • textureKey – ключ текстуры, загруженной через this.load.image.

Плоскость автоматически получает сетку из 4 вершин, но для сложных деформаций необходимо использовать Mesh.

Использование Mesh для деформации

Для динамических изменений формы применяется Phaser.GameObjects.Mesh. Mesh создаётся с указанием сетки по ширине и высоте:

const mesh = this.add.mesh(x, y, textureKey, null, widthSegments, heightSegments);
  • widthSegments, heightSegments – количество сегментов по горизонтали и вертикали. Чем больше сегментов, тем плавнее деформация.
  • После создания можно получить доступ к массиву вершин через mesh.vertices.

Пример изменения вершин

mesh.vertices.forEach((vertex, index) => {
    vertex.x += Math.sin(index + this.time.now / 1000) * 5;
    vertex.y += Math.cos(index + this.time.now / 1000) * 5;
});
mesh.updateVertices();
  • vertex.x / vertex.y – координаты вершины относительно центра плоскости.
  • updateVertices() – обязательный метод для применения изменений к визуализации.

Анимация текстур на плоскости

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

mesh.vertices.forEach((vertex, index) => {
    vertex.u += 0.01; // смещение текстурной координаты по X
    vertex.v += 0.01; // смещение текстурной координаты по Y
});
mesh.updateVertices();

Использование UV-координат совместно с tileSprite позволяет делать бесконечные текстурные анимации.

Физическая деформация плоскости

Для имитации физических эффектов, таких как волны или изгибы, вершины плоскости можно менять на основе математических функций:

mesh.vertices.forEach((vertex, index) => {
    const wave = Math.sin((vertex.x + this.time.now / 200) * 0.1) * 20;
    vertex.y += wave;
});
mesh.updateVertices();
  • Math.sin и Math.cos создают волнообразные деформации.
  • Можно комбинировать несколько функций для сложных анимационных эффектов.

Интерактивность и пользовательское управление

Плоскость можно сделать интерактивной. Например, деформация по движению мыши:

this.input.on('pointermove', pointer => {
    mesh.vertices.forEach(vertex => {
        const dx = pointer.x - vertex.x;
        const dy = pointer.y - vertex.y;
        const dist = Math.sqrt(dx*dx + dy*dy);
        if(dist < 50) {
            vertex.y += (50 - dist) * 0.1;
        }
    });
    mesh.updateVertices();
});
  • Это позволяет создавать эффект «нажатия» на плоскость.
  • Чувствительность можно регулировать, изменяя радиус и коэффициент силы воздействия.

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

Работа с большим числом сегментов может быть ресурсоёмкой. Рекомендации:

  • Ограничивать количество сегментов для мобильных устройств.
  • Использовать Mesh.setDirty() вместо полного обновления всех вершин, если изменяется только часть плоскости.
  • Минимизировать сложные математические операции внутри update цикла.

Применение плоскости

Плоскость и Mesh находят применение в следующих сценариях:

  • Волны на воде или тканевых объектах.
  • Деформация UI-элементов.
  • Анимация текстур в играх с эффектом параллакса.
  • Имитация физики для объектов без полноценного физического движка.

Использование Phaser Mesh для деформируемой плоскости открывает широкие возможности визуальных эффектов, обеспечивая гибкость и высокую производительность.

Оглавление