Параметры текстуры: wrap mode, scale mode

Библиотека PixiJS предоставляет гибкую систему работы с текстурами, позволяющую настраивать их поведение при масштабировании и повторении. Два ключевых свойства текстуры, влияющих на визуальный результат, — wrapMode и scaleMode. Их понимание необходимо для создания оптимизированной графики и корректного отображения изображений в сцене.

wrapMode: режим повторения текстуры

Свойство wrapMode определяет, каким образом текстура заполняет область, превышающую её исходный размер. В PixiJS используются следующие основные режимы:

  1. CLAMP (по умолчанию) Текстура растягивается до границ, не повторяясь. Пиксели на краях копируются для заполнения пространства. Применяется при необходимости избежать повторяющихся паттернов.

  2. REPEAT Текстура повторяется многократно по горизонтали и вертикали. Это оптимально для фонов, плиток и узоров, где требуется seamless-повторение.

  3. MIRRORED_REPEAT Текстура повторяется с зеркальным отражением при каждом повторе. Такой режим уменьшает видимость швов при повторении и создаёт эффект непрерывного узора.

Пример установки режима повторения для текстуры:

import * as PIXI from 'pixi.js';

const texture = PIXI.Texture.from('tiles.png');
texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;

const tilingSprite = new PIXI.TilingSprite(
    texture,
    512, // ширина спрайта
    512  // высота спрайта
);

app.stage.addChild(tilingSprite);

Здесь PIXI.TilingSprite позволяет эффективно использовать повторяющуюся текстуру на большой поверхности без создания большого изображения.

scaleMode: режим масштабирования текстуры

Свойство scaleMode управляет тем, как текстура интерполируется при увеличении или уменьшении размеров. От этого зависит чёткость и плавность изображения.

Основные режимы:

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

  2. NEAREST Используется ближайший сосед. Масштабирование не размывает изображение, что сохраняет резкость пикселей. Наиболее востребован в пиксель-арт проектах.

Пример применения scaleMode:

const texture = PIXI.Texture.from('sprite.png');
texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;

const sprite = new PIXI.Sprite(texture);
sprite.width = 128;
sprite.height = 128;

app.stage.addChild(sprite);

Здесь, несмотря на изменение размеров спрайта, пиксели остаются чёткими, без размытия.

Совмещение wrapMode и scaleMode

Правильное использование wrapMode и scaleMode позволяет создавать разнообразные визуальные эффекты:

  • Текстуры для фонов: REPEAT + LINEAR для плавных повторов и сглаживания.
  • Пиксельная графика: CLAMP + NEAREST для резких пикселей без растягивания и размытия.
  • Игровые плитки: REPEAT + NEAREST для повторяющихся текстур с сохранением пиксельной чёткости.

Пример создания seamless-плитки с резкой графикой:

const tileTexture = PIXI.Texture.from('tile.png');
tileTexture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
tileTexture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;

const tileSprite = new PIXI.TilingSprite(
    tileTexture,
    1024, // ширина игрового уровня
    1024  // высота игрового уровня
);

app.stage.addChild(tileSprite);

Практические советы

  • Для производительности всегда использовать NEAREST для спрайтов с пиксельной графикой и LINEAR для фотографий и плавных градиентов.
  • TilingSprite совместно с REPEAT экономит ресурсы при отрисовке больших фонов.
  • Изменение wrapMode и scaleMode после создания спрайта или текстуры мгновенно влияет на визуализацию, без необходимости пересоздавать объекты.

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

Оглавление