В прошлой части мы скачали Unity, подготовились к работе, создали проект, первую сцену и на ней объекты Canvas и Background. В этот раз мы создадим главное меню нашей игры.
Для начало запомните важную вещь - в 2D игре интерфейс построен на слоях. Одно поверх другого. А также связь Parent - Child (Children) - когда один объект находится в другом и свойства родительского объекта влияют на свойства потомка. Именно по этим принципам мы и будем строить наше меню. Давайте попробуем визуально представить как его можно расположить на экране.
Левый блок - это будет объект mainMenu. Он будет родителем для объектов "название игры", "пункты меню" и "ваше лого". Они тоже будут содержать в себе объекты. Начнем.
Создайте пустой объект (Empty Object) и сделайте его дочерним объекта Canvas (в иерархии перетяните один объект на другой). Другой вариант - клик ПКМ по объекту Canvas и затем выбор создания пустого объекта. Так он автоматически станет дочерним. Переименуйте его в mainMenu.
Чтобы mainMenu стало видно на экране, ему нужно добавить компонент Image через меню Add Component в инспекторе (как добавлять компонент я рассказывал в прошлом посте). Так, ну и где же он?
Чтобы придать нашему меню нужное положение, воспользуемся его компонентом Rect Transform. В разделе Anchors устанавливаем:
- Min X: 0.03 Y: 0
- Max X: 0.3 Y: 1
Затем Left, Right, Top, Bottom ставим по нулям.
Что это всё означает? Anchors (якоря) устанавливают границы нашего объекта относительно размера экрана. Min X: 0.03 прикрепляет левый край (ставит якорь) объекта на уровне 0.03 ширины экрана. Max X: 0.3 прикрепляет правый край на уровне 0.3 - что в итоге дает нам ширину объекта не в пикселях, а в процентах. Он будет занимать в ширину 27% экрана с небольшим отступом слева в 3%. Аналогично с Y - только это уже про высоту объекта.
Теперь установим нашему меню вместо белого пятна приятный глазу цвет. В компоненте Image нажмите на поле Color и установите:
- R - 0.012 (красный)
- G - 0.012 (зеленый)
- B - 0.023 (синий)
- A - 0.7 (альфа-канал или прозрачность)
Для закрепления материала по размещению объекта на экране создадим два декоративных элемента - две полоски по бокам от плашки меню.
1. Создаём два пустых объекта как Child объекта mainMenu - line1 и line2
2. Назначаем Anchors для line1
- Min X: -0.03 Y: 0
- Max X: -0.01 Y: 1
3. Назначаем Anchors для line2
- Min X: 1.01 Y: 0
- Max X: 1.03 Y: 1
4. Устанавливаем обоим объектам цвет как у mainMenu
• Если устанавливать Anchor больше или меньше единицы, то границы объекта будут выходить за пределы родительского объекта.
• Можно копировать компонент (например Image) через функцию Copy Component и вставлять его другому объекту или вставлять его значения такому же компоненту другого объекта через функцию Paste Component. Пример того и другого на видео.
Теперь можно похвалить себя и подышать свежим воздухом. Далее нам нужно создать объекты для названия игры, пунктов меню и логотипа. Делаем мы это по тому же принципу - создаем дочерние объекты в mainMenu - top, middle и bottom. Для наглядности сразу добавляем им компонент Image с белым цветом (потом изменим).
• Можно выделить в иерархии сразу несколько объектов про помощи Ctrl+левый клик и добавить компонент всем сразу
Аккуратно распределяем объекты на объекте mainMenu, расставляя значения Anchors.
Top --> X: (0, 1) Y: (0.8, 0.96)
Middle --> X: (0, 1) Y: (0.15, 0.8)
Bottom --> X: (0, 1) Y: (0.04, 0.15)
Для создания небольших отступов или точного корректирования положения объекта можно задавать значения Left, Right, Top, Bottom в компоненте Rect Transform. Попробуйте поставить всем трем объектам эти значения по 2 пикселя. Главное не злоупотреблять этим, а то может верстка перестать быть стабильной.
Итак, мы нашли хорошее расположение для блоков и теперь можем удалить у них компоненты Image и Canvas Renderer, так как больше они нам не понадобятся.
• Вообще старайтесь не оставлять ничего лишнего. Это очень полезная привычка, которая поможет в оптимизации игры
Давайте сделаем для игры графическое название. Можно, конечно, и текстом, но графикой будет симпатичнее. Мы же делаем игру для людей, а не черновик для себя - так ведь?
Откроем Фотошоп и создадим в нём новый файл размером 1000х1000 пикселей.
Затем добавим название игры.
Нарисуем декоративную линию.
Добавьте слоган внизу, затем подрежьте инструментом "Рамка" лист по самые края логотипа.
Далее удаляем слой фона, чтобы сделать логотип прозрачным. Затем устанавливаем размер изображения с шириной в 1000 пикселей. После этого нам очень важно сделать так, чтобы каждая сторона изображения была кратна 4 - это необходимо для применения алгоритмов сжатия, чтобы уменьшить вес игры. Так как обрезать уже нечего, то через "Размер холста" делаем высоту 212 пикселей. Итоговый размер 1000х212.
Когда всё готово, вы должны поменять цвет всех объетов на белый. Зачем? На белое изображение в Unity мы легко сможем наложить любой цвет, если нам приспичит. На чёрный - не получится.
Сохраните полученое изображение в формате PNG и положите его в папку проекта Assets/Resources/Images (создайте её). Сам исходный файл PSD сохраните в отдельной папке вне проекта, где вы будете хранить исходники графики.
Самое время добавить созданное название в игру! Создаем для top дочерний объект gameName, добавляем ему компонент Image и выравниваем на экране. Для того, чтобы изображение не искажалось, в компоненте Image активируем Preserve Aspect - эта функция позволит сохранить пропорции.
Отлично! Гейб Ньюэлл вами был бы доволен.
Теперь займёмся объектом middle и сделаем в нем несколько кнопок, которые будут вести в нужное место - "Новая игра", "Загрузить игру", "Настройки", "Об игре", "Выход".
Нам пригодится полезный компонент под названием Vertical Layout Group. Он выравнивает дочерние объекты по вертикали, регулирует их высоту, ширину и отступы. Это означает, что нам не придётся вручную устанавливать размеры и положение кнопок. Его можно сразу добавить к объекту middle.
• Я предпочитаю пользоваться старой версией компонента Text в Unity. Новая версия называется TextMeshPro. Если в вашей версии Unity нет Button, а есть только Button - TextMeshPro, то посмотрите в подпункте Legacy. Или почитайте как работает TextMeshPro
Таким же образом добавьте еще 4 кнопки и настройте Vertical Layout Group у объекта middle.
Padding - это отступы всего списка кнопок относительно объекта.
Spacing - это отступы между кнопок.
Потыкайте настройки, чтобы понять, как это работает, а потом сделайте как на скриншоте. Как видите, теперь у нас есть аккуратный список кнопок.
Обратите внимание на иерархию - у каждой кнопки есть дочерний объект Text. Это такой же объект, как и все, только с прикрепленным компонентом Text. В нем можно вписать текст объекта, указать шрифт, размер, начертание, цвет, выравнивание. Этих настроек вполне достаточно для нашей игры. Установите размер шрифта 24 пикселя.
• Если вы хотите другой шрифт, то создайте папку Assets/Resources/Fonts и добавьте его туда. Он будет доступен в поле выбора шрифта.
Теперь можно нажать кнопку Play вверху рабочего стола и потыкать по кнопкам.
У каждой кнопки есть компонент Button, у которого есть целый ворох настроек как кнопка будет меняться при нажатии, наведении курсора итд. Однако, для мобильных платформ, где не мышка, а тачскрин, это не нужно. Поэтому отключите эту функцию, поставив Trasition --> none.
Далее можно удалить у кнопок компонент Image - для такого минималистичного дизайна он не нужен. Цвет текста сделайте белым.
В объекте bottom осталось место для вашего логотипа. Подыщите что-нибудь прикольное, нарисуйте в фотошопе и сделайте так же, как мы делали с названием игры.
• В любом случае вы вольны экспериментировать в оформлении и делать как вам нравится. Мы не упустим этот момент - не переживайте. Далее по туториалу нам придётся делать столько кнопок, что они вам в кошмарах сниться будут.
Пришло время для правой части меню - не забыли про неё? Для начала определимся, что будет делать каждая кнопка.
Новая игра - выдает список слотов сохранений, при нажатии на который запустится новая игра и автоматически сохранится в этот слот.
Загрузка игры - аналогично, только загружает сохранение.
Настройки - выбор языка игры, громкости звука и музыки.
Дополнительно - авторы, ссылки, благодарности и прочая второстепенная информация.
Выход - закрывает приложение.
Сделаем на каждую кнопку кроме "Выход" своё поле с информацией, которое будет активироваться при нажатии. Создайте в Canvas дочерний объект newGameList, скопируйте для него компонент Image из объекта mainMenu и установите Anchors --> X: (0.31, 0.9) Y: (0, 1).
В нем создайте 6 кнопок для слотов сохранений и назовите их game_0, game_1, game_2, game_3, game_4, game_5. В этот раз мы не будем распределять их с помощью Vertical Layout Group, но сделаем их с небольшой графикой.
Для начала распределите их равномерно по объекту newGameList, используя Anchors.
Теперь создайте в Фотошопе новое изображение размером 400х400 пикселей. Нарисуйте в нем прямоугольник с границей, но без заливки, как показано на скриншоте.
А затем нарисуйте прямоугольник поменьше, но с заливкой.
Удалите слой фона, сделайте прямоугольники белого цвета и сохраните как PNG в папку Assets/Resources/Images под именем frame_1.
В Unity нам потребуется отредактировать границы спрайта изображения, для того чтобы мы могли его без искажений растягивать в разные стороны. В дереве проекта выберите наше новое изображение frame_1, нажмите в инспекторе Sprite Editor и в открывшемся окне установите Border (границы) на 12 пикселей. Именно в этих местах спрайти будет растягиваться, подгоняясь под размеры кнопки. Закройте это окно и нажмите Save.
Примените новый спрайт ко всем кнопкам и в компоненте Image установите Image Type на Sliced. Надо поправить цвет кнопок.
- R - 0.012 (красный)
- G - 0.012 (зеленый)
- B - 0.012 (синий)
- A - 0.7 (альфа-канал или прозрачность)
Если вам хочется немного свободно места между слотами, то добавьте на кнопки отступы по 5 пикселей с каждой стороны.
Цвет текста кнопок так же меняем на белый.
• Не забывайте, что однотипные объекты можно выделять вместе CTRL+клик и массово менять настройки компонентов. Это очень экономит время.
Так как нам нужно точно такое же поле для раздела "Загрузка игры", мы можем просто скопировать это. Деактивируйте объект newGameList, нажав на галочку возле его имени в инспекторе, затем в иерархии щёлкните по нему ПКМ и нажмите Duplicate. Теперь нужно только его переименовать в loadGameList, чтобы не путаться. Деактивируйте его, чтобы не мешался.
Раздел "Настройки". Создайте такое же поле, но только без кнопок. Этот раздел посложнее предыдущего, поэтому сделаем для начала небольшие намётки.
Первым сделаем блок выбора языка с выпадающим списком. Нужно создать объект language внутри optionsList и установить ему Anchors X: (0.03, 0.97) Y (0.85, 0.95). Внутри language создаем объект header, устанавливаем Anchors X: (0, 0.48) Y (0, 1), добавляем ему компонент Text с размером шрифта 24 и выравниванием по правому краю и по центру.
Теперь нам нужно сделать выпадающий список. В Unity уже есть готовое решение - нам нужно только правильно его настроить. Добавьте в language объект UI -> Dropdown и устанвите ему Anchors X: (0.5, 1) Y (0, 1). Сразу же можно установить ему почти чёрный цвет с прозрачностью 0.78.
В нём достаточно много дочерних объектов. Разверните его полностью и внимательно поменяйте настройки. По шаблону "Объект: Компонент --> настройки".
- Dropdown: Dropdown --> Transition "none", список Options - поменять Option A итд на названия языков игры.
- Label: Text --> Русский, размер шрифта 24, цвет белый.
- Arrow: Rect Transform --> PosX -20, Wigth 40, Height 40.
- Template: Rect Transform --> Height 450; цвет сделать как у объекта Dropdown
- Viewport: пропускаем.
- Content: Rect Transform --> Height 80.
- Item: Rect Transform --> Height 80; Toggle --> Transition "none"
- Item Background: цвет сделать как у объекта Dropdown
- Item Checkmark: Rect Transform --> PosY -5
- Item Label: Rect Transform --> Left 25, Top 15; Text --> размер шрифта 24, цвет белый.
Если ничего не пропустить, то результат будет как на видео ниже.
По аналогии с языковой панелью делаем объект music, размещаем в нём объект header с компонентом Text (пишем "Громкость музыки"). Нам понадобится слайдер - добавляем его UI/Slider с Anchors X: (0.5, 1) Y (0.3, 0.7).
В компоненте Slider отключаем Transition.
В дочернем объекте Background делаем черный цвет.
Таким же образом создаём слайдер для "Громкости звуков".
Готово! Вы - великолепны!
Лимит картинок опять исчерпан, поэтому продолжим в следующий раз.
Экспериментируйте с оформлением и не бойтесь трогать все настройки подряд. В этот раз я приложу ссылку на архив с проектом из поста.
Материалы из поста
Содержание туториала (Google Docs с ссылками на Пикабу)
Игра "Питерский Квест" в Google Play
Архив версий apk и Windows
