Как сделать игровое меню в Unity | разбор всего UI

Что такое UI элемент?

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

И лично я считаю, что этот ролик полная лажа.

Отчего и появилась в моей голове затея переделать его.

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

Чтобы сделать меню, нам понадобится игровой движок Unity и наш проект.

Я создам новый для этого гайда проект, он будет в 2D.

Собственно на этом все.

Радуйтесь, я смог это сделать, поэтому погнали.

Наше рабочее пространство.

Для начала проведем краткий экскурс для самых маленьких.

Это наш движок, здесь полно всяких кнопочек.

И если вы только начинающий, в чем я сомневаюсь.

Да и не об этом речь, речь идет о том, чтобы создать пару кнопочек в меню.

А посему для работоспособного времяпрепровождения я настрою окна в Unity.

Это можно как угодно сделать, под ваш вкус и манер.

Импорт графики.

И перед очередным стартом нужно загрузить в проект парочку спрайтов.

У меня такие к счастью имеются.

Просто перетаскиваем нужные материалы, то бишь картинки в область проекта.

Там где написано Assets.

И в настройках моей картинки.

А на минуточку на одной моей картинке расположено сразу большое количество картинок.

То бишь спрайтов.

Поэтому я хочу указать, что тут сразу их много.

Эта информация посвящается тем, кто этого не знал.

Тут мы наблюдаем много настроек, но они нам не нужны.

Нам нужно нажать сюда и поменять на Multiple.

А еще в графе Texture Type можно указать, что за картинка у вас, типа курсор, текстура, картинка, ну и так далее.

Нажимаем Sprite Editor, чтобы настроить картинку.

И обязательно нажимаем Apply, дабы сохранить ваши параметры картинки.

Это можно сделать тут, и это окно тогда не выскочит.

Указываем границы объектов наших спрайтов.

Кто не знал, в Unity спрайтами называют картинки.

Минута познаний и саморазвития.

Хе-хе.

Указать границы можно как вручную, так и автоматически.

Это делается с помощью кнопочки Slice.

Если есть некорректности, то бегом исправляем, либо удаляем лишние с помощью кнопочки Delete.

На ноутбуке она, если что, находится вот тут.

Да, знаем, можете не благодарить.

После эпичного нарезания графики под Heavy Metal музычку, мы можем приступить к работе.

Canvas и работа с UI

В иерархии находятся все объекты нашей сцены.

И существует такая штука, как Canvas.

Это как холст для кнопок, текста, картинок и прочих шалостей.

Без него эти объекты, назовем их UI элементы, отображаться не станут.

А если мы создаем, допустим, панельку вне Canvas, то этот самый Canvas создастся автоматически и будет главным объектом в иерархии.

И, кстати, соблюдение поочередности...

объектов весьма важный процесс, так как если UI элемент ниже другого, то он будет его перекрывать.

Знайте физику, знайте законы тяготения, поэтому погнали дальше.

Настройка канваса.

Для корректного отображения содержимого на Canvas нам нужно его настроить.

Для этого в инспекторе Canvas, на минуточку инспектор, это то окно, в котором мы находим все компоненты и элементы с настройками.

Оно находится здесь.

Я подгоняю Canvas под границы камеры, дальше меняю слои, чтобы не произошло такого, что элементы находятся за камерой.

Получится не особо красиво тогда.

И ниже, вот тут.

Я как всегда подгоняю под Full HD.

Напомню, что для этого я создал панельку, поэтому перейдем к ней.

У каждого объекта в Unity есть определенные компоненты, с которыми можно работать.

Они все находятся в инспекторе.

Проведем экскурс, сверху у нас название объекта, его всегда можно переименовать, рядом кнопка отображения, типа галочка есть, а если нет, то объекта тоже нет, вот такие пироги, ниже можно указать тег и слой этого объекта, нам оно не потребуется.

Опять же рассказываю для самых маленьких, а кто не маленький, тот молодец, попрошу вас никуда не уходить и не перематывать ролик.

А лучше так пересмотреть его и настрачить гениальнейшие комментарии для продвижения этого видео.

Но да ладно, вернемся к нашим панеликам.

Первый компонент отвечает за позицию, разворот, размер объекта, а также за якори, которые привязывают объекты на экране.

Нам нужен компонент Image.

Как понимаете, он отвечает за отображение картинки на экране.

Здесь есть настройки картинки, цвета и прочих волшебных кнопочек.

Можно даже из вашей картинки сделать позвонок или как это назвать, я даже сам не знаю.

Типа полезная фича для загрузки.

Важный момент в любой игре это кнопка.

И для нашего меню без кнопок никуда.

Поэтому давайте создадим одну такую.

И напомню, она должна находиться в самом канвасе.

Привяжу ей якорь в нижнюю часть экрана посередине.

Что она дает, вы сами можете наблюдать на экране.

И поменяю картинку этой кнопки.

Так она стала выглядеть покруче.

Теперь займемся текстом на кнопке, который создается автоматически вместе с ней.

Первоначально поменяю тексту размер и поставлю галочку на Best Fit, чтобы при изменении размера кнопки текст тоже видоизменялся, становился меньше, либо больше.

Ну вы поняли.

И поменяю цвет тексту, что еще нужно для счастья.

Хочу остановиться на компоненте Button.

Что переводится как кнопка.

В ней есть всякие прикольные настройки по типу анимации при наведении, при нажатии, либо просто меняется цвет.

И ниже располагается самая главная приколюха.

При нажатии на плюсик мы сможем указать действие выполняемое кнопкой.

Но для этого нам нужен скрипт.

И написанный метод с действием.

Этим мы вскоре займемся.

Возвращение снова к панельке и канвасу.

Хочу вернуться и поменять картинку главному фону.

А также есть такая приколюха на канвесе, которую я хочу включить.

Если вы выставите такие параметры, то ваши UI элементы будут автоматически соответствовать ширине и высоте экрана.

Также вот этот ползунок я поставлю на единичку.

И теперь, как мы можем наблюдать, каков не был бы экран, в любом случае наша кнопка будет иметь тот же размер и высоту.

Но я сделаю ее поменьше, а то она слегка выросла в размерах от изменения параметров.

И текст тоже придется подправить.

Подправлю, как и панель с фоном.

Вуаля, идеально.

Скрипт.

Теперь пришло время для написания скрипта.

Без этого никуда, поэтому давайте начнем.

Мы поступим так.

Как полагается, создадим папку для скриптов и в нее создадим скрипт.

Не важно как назвать, главное чтобы было понятно и логично.

Я назову по стандарту GameManager, потому что моя фантазия не способна на что-то креативнее чем это.

И в иерархии создам пустой объект и назову его Manager.

А после кину на него наш скрипт.

Поздравляю, наш скрипт есть на сцене, пол дела сделано, осталось написать основную логику.

Открываем его.

Лично я пользуюсь редактором кода таким как Visual Studio Code.

Если у вас нет расширения Unity, которые упрощают работу в целом, то вы многое теряете.

Кстати да, на момент записи этого ролика я многое терял.

Быстренько скопирую Ctrl-C, Ctrl-V кнопки и поменяю им текст.

Значит будет три кнопки, это играть, настройки и выйти.

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

А также кнопка выхода из панели.

И ей мы назначим один и тот же метод.

Что для открытия, что для закрытия панели.

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

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

Короче, сделаю все, чтобы суметь вам показать самые простые приколы в геймдеве.

И зайдя в файл, билд сеттингс, тут мы сможем найти панель с нашими сценами.

Нужно перетянуть нашу новую сцену в эту область.

Также нельзя забывать про очередность.

Если сцена будет находиться выше другой, то именно она и будет запускаться первой.

Летс го писать код.

В скрипте я удаляю все лишнее и пишу код так, как мне хочется.

Значит спустя время я накалякал такие приколы.

Объявил игровой объект, который панелька с настройками.

Ниже метод старт, тут я написал, что панель будет закрыта при запуске игры.

Вот видите, false написано, значит панель будет неактивна.

Ниже метод play и его мы укажем кнопки.

Как и многие другие методы, он отвечает за начало игры.

Короче, хватит пускать слюни, мы отправляемся дальше.

В методе play мы запускаем сцену под названием играть.

Я не знаю правда почему такое сраное название, логично было написать меню или гейм.

Ну, то есть гейм.

А в методе back, то бишь назад, запуск сцены гейм.

Хочу заметить, что методы должны быть публичные, чтобы мы могли к ним обращаться.

Из инспекторов юнити.

И вон я написал пару комментариев.

На минуточку, комментарий это абсолютно любой текст, который пишется после двух подобных палочек.

И вы можете комментировать свой код как угодно.

Но между прочим, я закомментил вот эти строчки.

Если убрать эти магические палочки комментирования, то можно будет запускать сцену под данным номером, которая расположена в данной последовательности у вас в проекте.

Ниже у нас метод Settings.

И логика такова.

При вызове метода Settings происходит проверка.

Если панелька с настройками не активна, то она становится активной.

А ниже наоборот.

Если активна, то будет не активна.

Ну и в самом низу метод с выходом из игры.

Вот это магическая строчка.

При вызове этого метода будет выходить из игры.

Но выходить только при сборке игры.

То есть в Unity игра выходить не будет.

Это так, вам на заметку.

А чтобы можно было работать со сценами, нам нужно сверху просто-напросто подключить библиотеку Scene Management.

Это довольно важно.

Назначить методы кнопкам.

И перед выходом из скрипта нужно обязательно его сохранить.

Теперь давайте укажем кнопкам наши написанные методы.

Это можно сделать нажав на кнопку, перейти к компоненту Button и в эту область перетянуть объект на котором находится скрипт.

А он находится на объекте Manager.

А если у вас нет этой графы, то просто нажимаем на плюсик создав ее.

И выбираем функцию, то есть метод для определения кнопки.

Играть.

Play.

Настройки.

Settings.

Выйти.

Exit.

А в панели с настройками мы находим кнопку Выйти.

Ей тоже отмечаем метод Settings.

А на другой сцене мы можем создать другой скрипт.

Но я же воспользуюсь этим.

Скопирую с предыдущей сцены объект менеджер со скриптом.

И в кнопке Выйти в меню мы назначим метод Exit.

От этого объекта и этого скрипта.

А чтобы на этой сцене в консоли не вылазило тон ошибок, мы поступим в коде следующим образом вот так.

Ошибка может возникнуть из-за того, что на второй сцене у вас нет панели с настройками, а скрипт один и тот же.

Поэтому я пишу, что если панель не равна нулю, то есть у нас ячейка не пуста, и в ней указана панель, то происходит действие, где панель становится неактивной.

Вообще в целом у нас панель же изначально закрыта, мы можем обойтись и без этой строчки.

Запускаем и тестим.

В коде можно также писать подобные строчки, которые будут вызываться в консоли.

Это нужно для того, чтобы проверить работоспособность нашего кода.

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

И в этом убеждаюсь.

Экскурс по UI элементам.

Давайте я вам проведу экскурсию по UI элементам, дабы если вы новичок, у вас сложилось представление, какие есть вещи в Unity, которыми можно пользоваться.

И я попробую также объяснить, как с ними работать.

Правая кнопка мыши открывается данная панель, в которой мы можем создать нужный нам объект.

К примеру, я создам картинку, выбираем Image.

У картинки имеется знакомый нам компонент Image.

И тут я могу поменять саму картинку.

Дальше хочу создать Toggle, что означает вот такая кнопочка с галочкой.

У этого компонента такие же настройки, как и у кнопки, как вот свет при наведении, при нажатии и так далее.

Ниже у нас галочка, активна ли галочка или нет.

Тут у нас панель, отображающая саму галочку.

А это действие, при котором будет выполняться та логика, которую мы хотим видеть.

Все по стандарту, ничего сложного.

Конечно, по-моему, я не лучшим образом об этом все повествую.

Может есть какие-то...

нечетности в описании объектов, но не суть.

Есть объект Slider, он может служить как шкалой, громкостью или загрузочным экраном.

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

И вот эта кнопочка кстати прикольная, она отображает целые числа, то бишь ползунок будет останавливаться на 1, 2, 10, а не на 9,115.

Есть такая штука как Scrollbar, она похожа на ползунки, чтобы опускать страницу в браузере.

Вот такое у нее предназначение.

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

Например, у слайдера это фоновая шкала, основная шкала и ползунок.

В самом слайдере в одноименном компоненте они указаны, поэтому всегда все и вся можно настроить и определить по свой вкус.

Scroll View похожая приколюха.

Есть текст, есть кнопка, уже знакомые нам вещи, а есть дропдаун.

Это выбор нескольких вариантов, крайне полезная штука.

Input Field нужен для того, чтобы в него вписывать свой текст и значение.

Применяется в чатах, вводе пароля, ну вы поняли, для авторизации самое то.

У него много есть параметров, вводимый текст, параметр указывающий какой тип текста будет вводиться, стринг, интеджер, флоутинг, цвет и так далее.

А также три события, при вводе, после ввода, при нажатии на Enter, ну и все вроде.

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

А как этим всем пользоваться или обращаться к параметрам компонента?

Можно в интернете вписать нужный вам запрос, к примеру Unity Slider.

И смотрим документацию, где написаны характеристики, ивенты и прочее.

Как к ним обращаться, что с ними делать и зачем они нужны.

Текст.

Давайте разберем текст детальней.

Я попробую наглядно создать вывод текста очков на главном экране.

Значит быстро настрою как мне его будет угодно и привожу якорь вверх экрана.

В скрипте укажу текст и ниже объявлю score, то есть рекорд или очки.

Интересный факт.

Вот эта строчка header, способная навести порядок в инспекторе.

И в скобках нужно написать, что это за раздел.

Это нужно для упорядочения, думаю вы сами понимаете.

Я знаю, что писать в апдейте какие-либо строчки это слегка не оптимизировано.

Но я вот такой строчкой вывожу текст.

Сначала слово record, потом то значение, которое хранит себе наша переменная score.

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

Инфа для самых маленьких, поэтому погнали дальше.

А для работы с UI элементами, такие как текст, нам нужно подключить библиотеку UnityEngine.ui.

Это обязательное условие.

Текст отображает рекорд, который мы можем задать сами вручную.

А что еще для хорошего дня нам может потребоваться, не правда ли?

Пакет менеджер.

Давайте я накидаю вам пару интересных фактов, ведь как-никак этот ролик посвящен для самых маленьких.

Итак, Package Manager можно открыть следующим образом и что он себя представляет.

Тут вы можете найти для себя ассеты из Asset Store, если выбрать My Assets.

В разделе In Project находятся все пакеты в вашем проекте.

А если у вас не установлены дополнения в виде 2D Sprite или Tile Map, то вы с ними не сможете работать в проекте.

Эту проблемку можно будет решить, скачав нужный пакет, нажав на Download.

Также есть раздел Unity Registry.

Тут находятся все пакеты от Unity.

К примеру, мультиплеер, реклама, облачное сохранение, Universal RP, это рендеринг с освещением.

С ним ваши 3D проекты, к примеру, в разы преобразятся.

Очень полезная штука.

Unity сервисы.

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

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

Их можно подключить в Package Manager, а всю информацию прочитать и ознакомиться с возможностями или отслеживать данные можно на сайте сервисов.

Если вы не зарегистрированы, то думаю вам не составит труда сделать это.

Вы только посмотрите на этот набор сервисов.

Не чудо ли это?

Как сгруппировать объекты?

Думаю это будет интересно для многих.

Значит создаем картинку, растягиваем ее так как нам нужно и вешаем такие элементы как маска и скролл рект для прокручивания.

После создаю картинку с такими же размерами, только вниз вытягиваю на столько на сколько хочу чтобы можно было прокручивать.

В скролл ректе отключаю галочку «Horizontal» и теперь мы можем на самой ленте, которую мы будем крутить, создать объект, просто картинку.

Создаем их несколько и на объект, который их группирует, повешу такой компонент как «VerticalLayoutGroup».

И настрою как мне надо, размеры между объектами и прикреплю к верху.

Создам в каждой картинке кнопку, по нажатию которой будет происходить некое действие.

Эти кнопки я приведу в чувство, а точнее как я делал.

Я настроил одну кнопку и тут я покажу принцип работы компонентов.

Можно копировать их настройки и вставлять на другие объекты.

Тем самым скопировал положение кнопки, потом настройки текста.

Вот так вот.

Таким образом я показал как можно сделать скролл панель и группировку объектов.

А теперь давайте я зайду дальше и покажу как можно сделать некий магазин.

В скрипте я укажу группу этих картинок путем квадратных скобок.

Мы сделаем так, чтобы при нажатии на кнопку определенная картинка меняла цвет.

Создам метод button и в скобках например кнопки некий ID, который мы зададим в инспекторе.

Кнопкам нужно нажать на плюсик и добавить новое событие, наш написанный метод button и указать снизу номер кнопки, каждый.

А в инспекторе выделяю все картинки, которые будут менять цвет через shift и перенесу в инспектор.

И кстати перед этим нужно зажать замочек выбрав наш менеджер со скриптом.

Теперь я укажу массив переменных с состояниями картинок.

И не забуду в инспекторе указать число картинок.

Допустим, 0 значит картинка в обычном состоянии.

Если 1, то значит картинка приобретена.

Таким образом можно сделать магазин, к примеру, со скинами.

Я думаю, это отличный пример.

В кнопке напишу, если состояние равно единице, то цвет меняется на такой.

И состояние этой кнопки меняется на 0.

А если оно не равно единице, то цвет и состояние тоже меняется.

Тут же сделаю сохранение.

Об этом у меня уже есть очень хороший ролик, говорю тем, кто его не видел.

Советую посмотреть.

А теперь поясню.

Number это то число, которое мы получаем нажимая в инспекторе кнопки.

И в коде везде мы обращаемся к нему.

Ну и в старте я тоже сделаю загрузку сохраненных данных.

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

Если запустить, то все у нас будет работать.

Но еще бы она не работала.

Выбранный скин.

Допустим, я хочу реально менять картинку при нажатии.

Для этого я добавляю картинку, которая будет менять спрайт.

В скрипте укажу саму картинку, следом ее состояние.

Типа какая картинка по счету выбрана.

И следом массив спрайтов.

А в инспекторе указываем все это добро.

В кнопке я пропишу такой код.

Спрайт картинки равен той картинке, по счету какая была нажата кнопка.

Сохраняется состояние картинки, ей присваивается номер и ниже мы это состояние сохраняем.

А в старте сделаем загрузку и присвоение картинки того спрайта, что равняется состоянию.

Заключение.

короче все сложно но мы это сделали точнее я это сделал главное понимать логику того чего вы делаете и что у вас в итоге получается а для умелых уже кодеров это видос будет полной лажи типа мол зачем такие банальные вещи объяснять этот ролик можно продолжать до бесконечности к примеру как сделать магазин что покупать за деньги об этом есть и другие видосы логика везде до боли проста

И кстати говоря, сценарий к этому ролику я писал дня 4, а потом озвучивал с трудом, я хрипу, я умер, я плавал, купался, я не знаю, короче было плохо.

Сначала я был полон энтузиазма, а потом понял как все это скучно и душно.

Поэтому поддержите лайком и комментарием за эти старания.

Надеюсь эта работа была проделана не впустую.