Доброго времени суток, дорогой читатель. Так как я сейчас занимаюсь разработкой своей игры в Unity, то периодически сталкиваюсь с различными задачами и о некоторых буду рассказывать в своём блоге.
Сегодня речь пойдет о Toast уведомлениях, какие бывают в Android (не уверен насчет iOS, но там точно есть что-то похожее). Такие уведомления пригодятся, когда вам нужно показать важную информацию пользователю, которая не требует подтверждения.
Я долго пытался найти решение в интернете, но не один из текстовых источников не дал мне его. Есть assets в магазине плагинов, но чаще всего они платные, да и помимо этого добавляют кучу всего ненужного в проект.
Что такое Toast?
Toast представляет из себя текстовое сообщение на слегка прозрачном фоне (стилизировать такие сообщения можно на свой вкус и цвет, я буду рассматривать классический вариант), которые появляются на несколько секунд и исчезают, не требуя от пользователя никаких действий для этого.
Изначально показалось, что можно взять какой-нибудь UI элемент вроде Button и стилизировать его, не включая обработчик нажатия. Но основная проблема с которой я столкнулся, что такой вариант не будет масштабироваться в зависимости от количества текста и что-то может быть обрезано.
Стоит сказать, что хорошим тоном считается использовать в таких сообщениях наиболее короткий текст, но хотелось бы, чтобы он не обрезался, если вдруг превысит какой-то лимит, а полностью отобразится пользователю.
Таким образом я пришел к решению, что нужен элемент Text и другой элемент, который будет выполнять функцию фона, при этом все это дело должно правильно масштабироваться. После продолжительных поисков решения в интернете я нашел видео:
О том, как я использовал информацию из него я и расскажу далее, в применении к своему решению задачи создания именно Toast-сообщений.
Структура префаба
Я буду опускать совсем базовые вещи в Unity, будем считать, что вы знаете, что такое префабы (prefabs), компоненты и как их создавать и добавлять.
Создадим префаб со следующей структурой, элементы создаются нажатием на правую кнопку мыши и выбором соответствующие пунктов (указаны на скриншоте):
Первый элемент - Empty Object, внутри него Image, и уже внутри Text.
ToastContainer
В ToastContainer добавляем два компонента — Vertical Layout Group и Content Size Fitter:
И настраиваем их следующим образом, Vertical Layout Group:
И Content Size Fitter:
Стоит обратить внимание на компонент Rect Transform, задать здесь максимальную ширину (250 в моем случае) нашего всплывающего сообщения. А в Anchor Presets прижать элемент к нижней границе по центру и немного приподнять от низа:
Тут же в графе Pivot в поле Y нужно установить значение 0, чтобы при увеличении количества строк в нашем Toast он рос вверх, а не вниз за пределы экран
ToastBackground
В ToastBackground добавляем Vertical Layout Group и Layout Element:
Настраиваем Vertical Layout Group, задавать отступы (padding) не обязательно, но по моему так выглядит красивее:
В Layout Element задаем минимальные размеры ширины и высоты, можете взять мои за основу, а потом выбрать те, что вам более подходят:
В компоненте Image этого элемента задаем фон, можно создать своё изображение, а можно выбрать из стандартных, например, которое используется для полей ввода и просто задать ему нужный цвет фона, как я и сделал, вот как выглядят настройки:
Text
Единственное, что нужно настроить для этого элемента — шрифт, текст, его местоположение (например, по центру), цвет и т.д.
И вот что должно получиться в результате, если нет, то какие-то из настроек вы пропустили или указали неправильно:
Код класса
После того, как у нас готов prefab для нашего будущего сообщения, нам остается написать код, который будет вызывать создание префаба, добавление его в сцену и удаление спустя нужное время. Я реализовал это в виде отдельного класса:
using System;
using System.Threading.Tasks;
using UnityEngine;
using UnityEngine.UI;
namespace Assets.Scripts.Utils.Messages
{
class Toast
{
private String Message;
private int Seconds;
private GameObject GameObject;
public Toast(string message, int seconds)
{
Message = message;
Seconds = seconds;
}
public void Show(Canvas canvas)
{
GameObject = UnityEngine.Object.Instantiate(Resources.Load("Prefabs/ToastContainer"), canvas.transform) as GameObject;
GameObject text = GameObject.transform.Find("ToastBackground").Find("Text").gameObject;
text.GetComponent<Text>().text = Message;
VoidTask();
}
private async void VoidTask()
{
await Task.Delay(TimeSpan.FromSeconds(Seconds));
UnityEngine.Object.Destroy(GameObject);
}
}
}
А вызвать отображение сообщения можно кодом:
new Toast("End skips", 1).Show(HUDCanvas);
В качестве параметра методу Show нужно передать Сanvas интерфейса, чтобы он знал, куда добавлять сообщение. В конструкторе можно задать текст сообщения и время в секундах, сколько нужно подождать перед удалением объекта.
Заключение
Таким, довольно простым способом можно создать мультиплатформенные Toast уведомления, вопрос уместности их в iOS или на других платформах остается открытым. Используются стандартные инструменты Unity, никаких проблем не наблюдал на разных платформах.
Вы можете сделать собственный дизайн сообщениям, добавить плавную анимацию исчезновения и много ещё чего на своё усмотрение. Оставляю вам простор для воображения.
Пишите свои комментарии — понравилась ли статья и нужно ли продолжать делать такие выкладки по Unity, ставьте лайки, подписывайтесь на группу вконтакте, подписывайтесь на этот блог, постараюсь радовать вас новыми статьями. Всем желаю получить награду за старание и рвение в жизни и на работе.
