Off-canvas меню Unity3D
Нам понадобится:
- DOTween
- Время
Скачиваем DOTween: отсюда
Распаковываем скачанный архив в папку Assets.
Переходим в Unity.
Создадим пустой GameObject и назовём его _menuholder
Далее создадим скрипт OffMenuCanvas.cs и сразу введём несколько переменных:
// OffMenuCanvas.cs
[SerializeField]
private Image offMenuBody; // Установку можно сделать из Awake/Start, но мы обойдёмся этим
[SerializeField]
private KeyCode menuOpenButton = KeyCode.Escape;
private int w = 200; // Ширина меню. Можно сделать видимой в редакторе, если это нужно
private bool isOpen = false, opening = false;
Далее нужно создать корутину, которая будет работать с анимацией.
// OffMenuCanvas.cs
IEnumerator MenuOpenCoroutine()
{
opening = true;
var loc = offMenuBody.rectTransform.localPosition;
if (isOpen)
{
_mouseHider.Hide();
offMenuBody.rectTransform.DOMoveX(0, 1f, true).SetUpdate(true);
Time.timeScale = 1f;
}
else
{
Time.timeScale = 0f;
offMenuBody.rectTransform.DOMoveX(w, 1f, true).SetUpdate(true);
_mouseHider.Show();
}
isOpen = !isOpen;
opening = false;
yield return null;
}
`SetUpdate(true)` нужен для того, чтобы анимации работали отдельно от установленного timeScale. Если его не вставить, то меню просто заморозится на этапе открытия
Добавим обработку нажатия клавиши открытия/закрытия меню
// OffMenuCanvas.cs -> Update()
if (Input.GetKeyDown(menuOpenButton) && !opening)
{
StartCoroutine(MenuOpenCoroutine());
}
Далее просто перекидываем скрипт на наш _menuholder.
Теперь надо сделать меню.
Создайте ‘Canvas’ (Game Object -> UI -> Canvas).
Добавьте в него Panel с такими настройками:
В Panel я добавил Button - кнопку закрытия игры. Чтобы она начала работать нужно дополнить наш скрипт OffMenuCanvas вот этим методом:
// OffMenuCanvas.cs
public void CloseGame()
{
Application.Quit();
}
И привязать действие к кнопке:
Если запустить проект, то должно получиться нечто такое:
Нажмите, чтобы открыть/закрыть спойлер (20MB гифка)
Вот так легко и просто можно сделать OffCanvas меню с использованием DOTween и C#, которое в дальнейшем можно использовать в своих проектах.
Исходники
Скачать: offmenucanvas.cs