Изображения (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 – GeekStand