Пользовательские панели интерфейса в Unity
Иногда нужно сделать, например, пользовательские слайдеры пользовательского интерфейса, чтобы наши художники потом пришли и доработали их. Поэтому в этом посте я расскажу о процессе создания этих слайдеров и о проблемах, с которыми я столкнулся, чтобы получить конечный продукт (по крайней мере, до того, как был добавлен лучший арт!).
Для начала мне нужно было сделать сами ползунки. В Unity это просто: щелкните правой кнопкой мыши в иерархии, перейдите в UI, а затем выберите Slider.
Это создаст в сцене Unity нечто, выглядящее следующим образом:
Теперь в иерархии нажмите на выпадающее меню под новым слайдером и обратите внимание на разделы "Фон", "Область заливки" и "Обработать область слайда". В моем случае я управлял полосками исключительно с помощью кода и без каких-либо других действий, поэтому я полностью удалил объект "Handle Slide Area", так как в данном случае он был не нужен. В результате вы получите полосу, которая выглядит следующим образом:
Теперь нужно выбрать объект в иерархии под названием "Background" и найти на нем компонент изображения. В разделе "Исходное изображение" выберите любое изображение, которое станет формой бара. Для этого пошагового примера я создаю самый нижний кусочек казана, который я показывал ранее. Далее щелкните по выпадающему меню рядом с "Областью заливки", найдите компонент изображения и выберите "none" в качестве исходного изображения (это станет понятно через некоторое время). Ваш слайдер должен выглядеть примерно так (конечно, с использованием вашей собственной формы):
Итак, вы, возможно, задаетесь вопросом, почему он выглядит так странно. Ничего страшного, если мы вернемся к компоненту Image на объекте Background, вы увидите кнопку с надписью "Set Native Size". Нажмите на эту кнопку, и все начнет выглядеть лучше.
Наконец, перейдите к объекту "Область заливки". Вы заметите, что в настоящее время у него нет никаких компонентов, кроме Rect Transform. В области под этим компонентом щелкните правой кнопкой мыши. Мы добавим три компонента: Рендерер холста, Изображение и Маска.
Рендерер холста можно оставить в покое. В компонент изображения снова добавьте изображение, которое вы используете для формы слайдера, и установите его размер. Возможно, на этом шаге вам придется кое-что передвинуть, чтобы они выстроились в ряд. Наконец, в компоненте "Маска" снимите флажок "Показывать графику маски". Чтобы проверить, все ли прошло как задумано, снова зайдите в объект "Заливка" на иерархии и в компоненте "Изображение" выберите цвет, отличный от цвета по умолчанию. Если затем выбрать общий объект "Слайдер" и найти компонент "Слайдер", то можно прокрутить его и найти ползунок "Значение". Попробуйте перемещать его вверх и вниз, и если вы увидите, что ползунок заполняется выбранным цветом, то у вас все получилось! Если нет, рекомендую дважды проверить предыдущие шаги. В компоненте Slider вам также следует снять флажок "Interactable" и установить для параметра Transition drop down значение None. Посмотрите на них, если вам нужна другая функциональность, однако для целей этого поста они не нужны.
Теперь перейдем к коду.
Здесь показан весь код, который я использовал для управления ползунками. Просто создайте пустой игровой объект в сцене Unity и перетащите на него свой код. Создайте сериализованные поля для ползунков, чтобы иметь к ним доступ в коде (или определите ползунки в коде по своему усмотрению, этот способ прост, особенно при небольшом количестве ползунков). В нашей игре мы используем систему функций-слушателей, чтобы развязать все наши объекты. Таким образом, всякий раз, когда счет обновляется другим файлом, он посылает сигнал, и любой файл, подписавшийся на этот сигнал, услышит его и получит необходимую информацию. Вы можете поместить этот пустой игровой объект в префаб вместе с ползунком, если вы будете порождать много различных экземпляров, например, порождать много врагов, каждый из которых будет иметь свою полоску здоровья. Затем просто установите yourSlider.value равным тому числу, которое вы пытаетесь отследить. Вы также можете установить максимальное значение (а также значение, при котором он будет казаться полным) с помощью "yourSlider.maxValue = number" или установить значение в инспекторе Unity в объекте слайдера, компоненте слайдера.