Unity UI. Image

Изображения (Image) не менее важный элемент UI, чем Text. Официальная документация описывает этот элемент так: «Элемент Image отображает пользователю не интерактивное изображение».

Так что и мы будем его использовать не только для отображения каких-то картинок, иконок, но и как фоны для других элементов UI.

Добавляем Image

Продолжаем предыдущий проект, и к нашему тексту докинем Image.

И у вас появилась вот такая вот белая фигня:

Это и есть Image. Просто пока у неё нет никаких ресурсов для отображения.

Как и у Text картинка имеет Rect Transform, который позволит отрегулировать положение и размеры. Есть ещё Image, который даст работать с самим изображением.

Так как в проекте пока не было никаких графических ресурсов, то нужно их добавить. Создадим папку Sprites и закидываем туда свой спрайт. Я взял вот такую вот иконку из пака, который я покупал на Humble Bundle (вроде).

Что важно, убедитесь, что добавленное изображение получило тип Sprite, иначе использовать его в Image не выйдет. Sprite Mode: Single значит, что у нас это одна текстурка, самостоятельная. Если будем использовать атлас спрайтов, то поставим Multiple, но про это в другой раз.

И теперь перетаскиваем свой спрайт в поле Source Image (или выбираем в диалоговом окошке):

И результат вот:

Супер!

Ещё мы можем указать цвет картинки просто изменяя параметр Color.

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

Image Type

Это простой и достаточно полезный инструмент. В компоненте Image вы можете найти выпадающий список с именем Image Type. По умолчанию стоит Simple. Это значит, что мы просто выводим картинку.

Tiled позволяет делать вот так, т.е. заполняет этой картинкой указанную область:

Пример неудачный, но, например, таким образом можно было бы сделать фон с землёй как в Minecraft.

Filled – самый интересный вариант, так как с его помощью можно отрегулировать часть видимой картинки. Например, это можно использовать как отображение прогресса достижения или задания, а ещё такое часто можно увидеть, как отсчёт каких-то навыков в играх:

Или так:

Варианты алгоритма выбора области есть:

А Sliced нужен для правильного отображения рамок, и сейчас его показать не выйдет, так как спрайт не совсем о том. Так что докинем ещё один спрайт, в этот раз для UI.

Я взял такую вот кнопку из этих ресурсов.

Оставляем параметры спрайта аналогичные первому и добавляем на экран парочку новых Image.

Спрайтом укажем кнопку, но размеры сделаем разными. Я поставлю высоту по 50, а ширину 200 и 400. В результате получаем такое вот:

Красивым я это не назову, ведь рамка спрайта явно поплыла. Вот тут-то нам и поможет Sliced. Выбираем большую кнопку и указываем Sliced. Unity подскажет, что у спрайта ещё нет рамки:

Так что нажимаем на сам спрайт кнопки (не Image!), выбираем Sprite Editor

И уже в редакторе спрайтов, путём перетягивания зелёной рамки, отступаем область, которую не нужно растягивать.

Жмём Apply и смотрим на результат:

Для большей наглядность даже можно сделать их размер одинаковым:

Вот, что делает тип Sliced.

Ещё стоит упомянуть компонент Raw Image. Если обычный принимает только спрайты, то Raw принимает любые текстуры. Но её лучше использовать только тогда, когда обычный по каким-то причинам не подходит. В остальном с большинством задач справляется и просто Image.

Кстати!

Компоненты модификаторы, которые я показывал в статье с Text, работают и с Image!

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

На чём остановились

Список всех материалов по Unity

One thought on “Unity UI. Image

Добавить комментарий