Полезное

Мы Вконтакте

Стилизация виджетов

Добавлено Июн 14 2016
Стили

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

Каждый из виджетов ниже использует опцию Style, однако их индивидуальный стиль может отличаться:

  • Button
  • Check Box
  • Editable Text Box
  • Multi Line Editable Text Box
  • Progress Bar
  • Size Box
  • Slider
  • Spin Box
  • Text Block
  • Combo Box (String)
  • Editable Text
  • Multi Line Editable Text

Состояния

Это могут быть инстансы, в частности с интерактивными виджетами, которым вы хотите придать различные виды для вашего виджета, основываясь на том, как он взаимодействует с/или в каком состоянии находится. К примеру, скажем, у вас есть кнопка на экране которая находится в нормальном состоянии и когда её перекрывает курсор она меняет цвет или мигает, а при нажатии делает что-то другое. States - наиболее основные виды стиля дающие вам возможность указывать то, как виджет будет реагировать в зависимости от своего текущего состояния.

Стиль кнопок UMG в unreal engine 4

Выше, кнопка виджета меняет в зависимости от своего состояния (нормальное, нажатое, перекрываемое, или неиспользуемая). Большинство виджетов используют нормальное, нажатое, перекрываемое, неиспользуемое состояние, однако могут быть дополнительные варианты, в зависимости от типа виджета, который вы используете.

Настройка изображения состояния

Для каждого состояния, вы можете установить изображение (либо текстуру/материал) для используемого виджета. Размер изображения зависит от размера ресурса в Slate Units и опции Draw As, которая использует 9 ячеек масштаба, дающие вам возможность настроить то, как изображение будет отрисовываться в форме Box, Border, или как Image.

Пример для каждого случая ниже:
Стиль кнопок UMG в unreal engine 4

  1. Box - отрисовывает ячейку размером 3х3, где стороны и центральная линия (оранжевые стрелочки) основываются на отступах (пунктирные синии линии).

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

  2. Border - отрисовывает границу 3х3, где стороны Тайла (оранжевые стрелочки) основываются на отступах (пунктирные синии линии).

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

  3. Image - отрисовывает изображение и будет растягиваться (оранжевые стрелочки) и отступ будет игнорироваться.

Изображения на основе текстур

Вы можете назначить текстуры как ваш ассет изображения, но тут есть несколько галочек которые стоит проставить, если вы конечно хотите, чтобы ваша текстура показывалась на любом устройстве, без искажений и артефактов.Внутри редактора текстур, под вкладкой Level Of Detail, установите Mip Gen Settings в значение NoMipmaps, а также установите LOD Group в значение UI. В Compression, параметр Compression Setting переключите в значение TC Editor Icon.

Стиль кнопок UMG в unreal engine 4

Изображения на основе материала

Материалы также могут быть назначены как ассет изображения для вашего изображения состояния, но вам нужно будет сменить несколько параметров.Внутри материала, на панели Details в разделе Usage отметьте галочкой Used with UI. Это скомпилирует шейдер специально под Slate. Также необходимо оставить только Emissive Color на выходе.

Стиль кнопок UMG в unreal engine 4

Динамические материалы

При необходимости изменения параметров материала, вам нужен Dynamic Material Instance. Виджет изображения может это сделать с завидной лёгкость, если у него есть Slate Brush с материалом, вы можете задать изображение (создаётся 1 раз, а затем кешируется).

Стиль кнопок UMG в unreal engine 4

Оттенок\отступ

Также, в каждом состоянии можно задать оттенок изображения прикреплённого к данному состоянию. Также есть опция Margin, которая задаёт размер отступа для режимов отрисовки Box и Border (в режиме Image отступ игнорируется).

Padding

Padding - опция стриля создающая границы вокруг виджета.

Стиль кнопок UMG в unreal engine 4

К примеру, на картинке выше, для кнопки Box, Normal Padding расчитывается для границы задней картинки кнопки. Когда это применяется, содержание кнопки будет появляться на одном уровне с границей кнопки.Pressed Padding это тоже самое, что и Normal Padding, однако применяется только когда кнопка нажата.

В зависимости от типа используемого виджета, доступны различные виды Padding’а.

Звуки

Звуки могут быть назначены для вашего виджета основываясь на положении виджета.

Стиль кнопок UMG в unreal engine 4

Большинство виджетов допускающие применение звуков, используют звуковые события при перекрытии или нажатии, что в итоге выливается в воспроизведение звука при перекрытии или клику по виджету. На картинке, выше для виджета чексбоксика присутствуют параметры для звуковых событий, таких как «выбрано», «невыбрано», «перекрыто».

Для различных видов виджетов доступны различные виды звуковых опций.

Отображение трансформации

Стиль кнопок UMG в unreal engine 4

Дополнительные опции стиля которые могут использованы для изменения вида вашего виджета, находятся они в разделе Render Transform на панели Details вашего виджета. С помощью этих настроек вы можете переместить, масштабировать, обрезать, повернуть ваш виджет по отношению к пивоту.

Пример отображения трансформации проиллюстрирован ниже.

Стиль кнопок UMG в unreal engine 4

Каждая из настроек может быть расставлена в ключи, что даст вам возможность анимировать их, и даже отредактировать через блупринт во время игры на основе действий произведённых игроком.Отображение трансформации относительно к разметке транформации и не обрезается родителем (к примеру, если у вас есть Scroll Box полный кнопок, изменение перемещения в настройках отображения трансформации может сдвинуть кнопки из него

Добавил: RedComrade Категория: Unreal Motion Graphics, Документация


Комментарии

На данный момент комментарии отключены.

UEngine.ru © 2015
Все права защищены. При копировании материалов с сайта, ссылка на первоисточник обязательна.
Яндекс.Метрика
Главная страница