NineSlice: масштабируемые рамки

NineSlice — это техника, позволяющая создавать масштабируемые графические элементы интерфейса, такие как панели, кнопки и окна, сохраняя при этом пропорции углов и границ. В Phaser эта концепция реализована через специализированные объекты, которые делят изображение на девять частей: четыре угла, четыре стороны и центральную область.

Принцип работы

Изображение делится на сетку 3x3:

  1. Четыре угла — остаются неизменными при масштабировании, что позволяет сохранять их визуальные пропорции.
  2. Четыре стороны — растягиваются только в одном направлении (горизонтальном или вертикальном), чтобы адаптироваться к изменяемым размерам.
  3. Центральная часть — масштабируется как обычный прямоугольник, занимая оставшееся пространство.

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

Создание NineSlice в Phaser

Phaser 3 предоставляет класс Phaser.GameObjects.NineSlice, который наследует свойства обычного спрайта, но добавляет параметры для настройки девяти сегментов.

Синтаксис создания:

const panel = this.add.nineslice(x, y, width, height, texture, frame, {
    leftWidth: 20,
    rightWidth: 20,
    topHeight: 20,
    bottomHeight: 20
});

Параметры:

  • x, y — координаты верхнего левого угла объекта.
  • width, height — итоговый размер элемента.
  • texture — ключ текстуры, загруженной через this.load.image.
  • frame — необязательный параметр, если используется атлас.
  • leftWidth, rightWidth, topHeight, bottomHeight — размеры областей углов, не подлежащих масштабированию.

Настройка масштабирования

Ключевой момент — корректное указание размеров углов. Если они слишком малы, визуальные артефакты будут заметны при растяжении. Если слишком велики — центральная область может стать слишком маленькой.

Пример настройки для кнопки:

const button = this.add.nineslice(100, 100, 200, 60, 'buttonTexture', null, {
    leftWidth: 15,
    rightWidth: 15,
    topHeight: 15,
    bottomHeight: 15
});
  • Углы сохраняют форму.
  • Стороны растягиваются по горизонтали и вертикали.
  • Центр заполняет оставшееся пространство, обеспечивая адаптивный размер кнопки.

Работа с интерактивностью

NineSlice объекты поддерживают интерактивные события:

button.setInteractive()
    .on('pointerover', () => button.setAlpha(0.8))
    .on('pointerout', () => button.setAlpha(1))
    .on('pointerdown', () => console.log('Кнопка нажата'));
  • setInteractive() делает объект чувствительным к мыши или касаниям.
  • Можно использовать стандартные события Phaser (pointerover, pointerout, pointerdown, pointerup).

Динамическое изменение размера

NineSlice позволяет изменять размеры объекта в процессе игры без перерисовки текстуры:

button.setSize(250, 80);
  • Углы остаются неизменными.
  • Стороны и центр автоматически перерасчитываются.
  • Это удобно для адаптивного UI, где кнопки и панели подстраиваются под контент.

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

Часто NineSlice применяется вместе с текстовыми объектами для создания кнопок и панелей информации:

const label = this.add.text(0, 0, 'Играть', { fontSize: '24px', color: '#ffffff' });
button.add(label);
label.setOrigin(0.5);
label.setPosition(button.width / 2, button.height / 2);
  • Текст центрируется относительно размера NineSlice.
  • При изменении размера панели текст можно автоматически перемещать или масштабировать.

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

  • NineSlice использует одну текстуру и разбивает её на девять частей, что снижает количество спрайтов.
  • Для сложного UI с множеством динамических элементов рекомендуется кэшировать объекты и обновлять только изменяемые части.
  • Минимизировать частые изменения размеров больших NineSlice объектов, так как перерасчёт сетки требует вычислений.

Практические рекомендации

  1. Углы должны быть достаточно большими, чтобы сохранить детали при масштабировании.
  2. Стороны и центр можно растягивать без потери качества только при использовании текстур с подходящим разрешением.
  3. NineSlice хорошо подходит для окошек, меню, кнопок, панелей, но не для сложной анимационной графики.
  4. Для адаптивного дизайна использовать динамическое изменение размеров вместе с позиционированием текста и других элементов.

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

Оглавление