ТЕМА: Godot Engine. Бонусный проект "Главное меню"

Оглавление разделов
1. Главное меню
2. Меню настроек. Интерфейс
3. Меню настроек. Подготовка, сигналы и глобальный скрипт
4. Меню настроек. Основной функционал
5. Меню паузы
6. Интеграция главного меню в игровой проект





Калейдоскоп узлов и концепций проекта


Приветствую вас форумчане, меня зовут Доктор Баг. В реальной жизни я работаю педагогом, провожу дополнительное образования (иными словами провожу кружки). Мое желание открыть кружок по разработки компьютерных игры, к сожалению, RPG Maker программы не подходят для этих целей, так как подобная серия программ заточена под определенный шаблон жанра. Конечно скриптами, плагинами можно изменять сам мейкер, но моя цель научить детей использовать свои знания не нагромождая их лишней информацией.
Мой выбор пал на игровой движок Godot Engine, по нескольким причинам
• Он бесплатный
• У него имеется язык программирования схожий на язык python (нынче я открываю кружок по основам python)
• И у Годота нету проверки лицензии (как у меня было постоянно с Game Maker Studio 2 особенно с моим крутым в кавычках интернета, привет OffSide)
• Он кроссплатформенный
• На нем можно создавать и 3D игры
Мои планы таковы, я желаю развивать GameDev в образовательной сфере. Нынче у меня проходит кружок «Основы программирования Python», а на следующий год планирую открыть еще два кружка «Pixel Art» и «Разработка компьютерных игр на движке Godot». Пока что как таковой рабочей программы по «Разработка компьютерных игр на движке Godot» у меня нету. Но я собираюсь использовать Форумы для заметок, для создание методички, мол напоминания для себя, алгоритм действий что показывать детям. Но чтобы создать подобную программу, придется самому как следует разобраться в годоте. Я нашел способ: я буду изучать различные гайды, от начало до велико, различных авторов. Потому здесь я буду разбирать эти уроки, и открывать новые элементы самого годота. Скажем честно документация Годота желает оставлять лучшего.
Рабочая программа будет разбита на жанры игр.
Первый Цикл уроков посвящен жанру Аркады:

• «Понг»
• «Арконоид»
• «Бонусный урок: Меню»
• «Космический шутер»
• «Астероид»
• «Бонусный урок: Сохранение и Загрузка»

Другие разделы: казуальные игры, головоломки, платформеры, и рпг подобные игры (так как разнообразие рпг жанра слишком большое, будет браться только часть элемента), будут разбираться, когда я дойду до них, возможно буду создавать отдельные странички. Так же между играми будут разбираться те или иные механики.
Подобную страничку можно использовать и для тех, кто хочет освоить сам годот, только вам еще нужно знать хотя бы основы программирования не обязательно языка годота. Ребята если буду долго не выкладывать информацию, подпинывайте меня, я бывает ленюсь 8)

Благодаря концепции сцен мы можем создавать отдельные игровые детали и после применять к нашим созданным проектам. Сегодня мы будем учиться создавать: главное меню, меню настроек и меню паузы. Сцену с «главным меню» можно будет перенести после ваш основной проект, далее поместить все зависимости которые мы прописывали при его изготовлении ну и после просто сделать главной сценой. У нас уже есть два готовых проекта которым не хватает главного меню. Предлагаю сделать подобные сцены, а после их импортировать в наши проекты.
Так как наше меню будет универсально для каждого проекта, мы не можем с уверенностью сказать какое будет разрешение экрана, поэтому мы будем настраивать его только тогда, когда будем импортировать в какой-либо проект, затачивая нужное разрешение.
Давайте создадим новый проект и назовём его «Main Menu»

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

Как только мы его выберем, то сразу увидим наш главный узел «Control».
Все узлы пользовательского интерфейса наследуются от Control. Якоря (Anchor) и поля (Margin) элемента управления адаптируют его положение и размер относительно его родителя.

Базовый класс для всех узлов, связанных с пользовательским интерфейсом. содержит ограничивающий прямоугольник, определяющий его границы, положение привязки относительно родительского элемента управления (Control) или текущего окна просмотра, а также поля, представляющие смещение относительно привязки. Поля обновляются автоматически при изменении узла, любого из его родителей или размера экрана.
Переименуйте узел в «MainMenu» будем использовать «Pascal case» - стиль написание кода и название объектов где первые буквы будут заглавными.
Теперь сохраните сцену как предлагает годот, но не забудьте создать папку внутри проекта с таким же названием.


По умолчанию узел «Control» он же «MainMenu» занимает все свободное пространство экрана. Размеры нашего экрана могут меняться, узел «Control» будет меняться тоже подстраивая ограничивающий прямоугольник под размеры экрана.

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

Есть противоположный аналог вертикальному контейнеру, горизонтальный контейнер «HBoxContainer», который будет размещать по горизонтали элементы.
Первая буква этих узлов обозначает направление: V – vertically (Вертикально), H – horizontally (Горизонтально). Выберете контейнер который вам больше по душе, мы же будем работать с вертикальным контейнером.

Теперь поместим в наш вертикальный контейнер три кнопки. Прикрепите узлы «Button» три штуки.

Каждая кнопка будет иметь свой функционал. Кнопка «Новая игра», «Параметры» и «Выход», но сами кнопки будут иметь техническое название «StartButton», «OptionsButton» и «QuitButton». Переименуйте кнопки в соответствующие название.
Так как годот имеет шрифт который не знает русского языка, временно запишем название кнопок на английском, чтобы мы смогли увидеть текст на кнопках. В инспекторе каждой кнопки «Text» впишите название кнопок: Start, Options, Quit

Благодаря вертикальному контейнеру мы можем располагать кнопки с любой стороны экрана. Нам всего то нужно выбрать наш контейнер и перейти к макету. Выберете расположение кнопок который вам больше понравиться или подойдет. Мы выберем по середине с левой стороны.

А с помощью параметров полей «Margin» мы сможем более точно расположить кнопки на экране.

Сохраните сцену и запустите сцену через F6, пока что не будем делать сцену главной.

У нас есть три кнопки, они реагируют на наведение и нажатие на них курсора, но нет никого обратного действия, потому что мы не прописали их код.
Обратимся к узлу «MainMenu» прикрепим к нему скрипт. Кликните по значку, и создайте новый скрипт в папке с меню. Название пускай остается по умолчанию, то что предложит Годот.

Сотрем все содержимое скрипта кроме первой строчки.

Для подключение кнопок нам понадобится их сигналы. Выберете кнопку «Start» и перейдите к сигналу скрипта. Нам понадобится сигнал «pressed()» сигнал отвечающий за нажатие кнопки и отпускание кнопки. Как мы можем заметит у кнопки есть еще три сигнала: button_down(), button_up(), toggled(button_pressed: bool). Сигнал нажатие кнопки, сигнал отпускание кнопки и сигнал отвечающий за переключении кнопки (только если активен toggle_mode).

Кликните по сигналу «pressed()» и присоедините к главному меню, к скрипту. Название скрипта оставляем как есть.

Когда игрок будет нажимать кнопку (и отпускать её), то будет выполнять эта функция.

Проделайте и с другими кнопками тоже самое. Обратитесь к их сигналам и привяжите к скрипу «Главного меню». Название оставляет как есть.
Вот что у вас должно получиться

Перейдем к функции «_on_StartButton_pressed()», которая будет срабатывать когда игрок нажимает и отпускает кнопку. Пропишем такую конструкцию.

get-tree() - Возвращает SceneTree (Дерево сцен), содержащий этот узел.
SceneTree - как один из наиболее важных классов, SceneTree управляет иерархией узлов в сцене, а также самими сценами. Узлы можно добавлять, извлекать и удалять. Все дерево сцен (и, следовательно, текущая сцена) может быть приостановлено. Сцены можно загружать, переключать и перезагружать.
change_scene – изменяет сцену на другую, нужно лишь указать путь этой сцены, для этого достаточно перенести саму сцену из файловой системы прямиком в скрипт. Годот покажет и пропишет относительный путь целиком к сцене.
Я создал тестовую сцену игры «Test_Game.tscn», имитация основной игры. Вы тоже можете создать временную сцену, для теста. Достаточно перейти к меню сцена – выбрать новая сцена.

Выберете любой узел, будь то 2D или пользовательский интерфейс. Пропишите код к нему и запустите игру. Нажмите на кнопку «Start». Сцена поменяется, визуально у вас пропадут кнопки.

Через опции «Удаленный» можно просмотреть текущие загруженные объекты.

После нажатия мы попадем в другую сцену, предыдущая сцена удаляется. В тестовой сцене я выбрал основу узел «Node2D». Когда будем переносить сцену с «Главным меню» мы удалим тестовую сцену.
Давайте пропишем сразу последнею кнопку, так как там немного функционала.
Впишите такую конструкцию.

Так же возвратим дерево сцен, а метод «quit()» закрывает приложение в конце текущей итерации. Сохраните, запустите выключите игру через кнопку.
Кнопку опции мы пропишем в следующий главе, а сейчас мы пропишем фокус активной кнопки через клавиатуру. Обратимся к встроенной функции «_ready» и пропишем фокус кнопки старта. Для этих целей перенесите прямо из дерево сцен в скрипт узел «StartButton» и пропишем ему метод «grab_focus».
Метод «grab_focus» фокусирует кнопку, появляется голубенькое выделение (по умолчанию), сам метод наследуется от родительского элемента «Control».

Сохраните скрипт, запустите сцену F6 и вы увидите это выделение, а если будете использовать клавиатуру, стрелки, то сможете выбирать нужную клавишу. Но наш выбор упирается в верхнею или нижнюю кнопку, давайте слегка улучшим сей механизм. При нажатие на соответствующею клавишу мы должны поменять фокус на другую клавишу. Для начала перейдите в инспектор кнопки старта, в раздел Control – Focus. Нам понадобятся параметры «Neighbour» (Сосед) они отвечают за направление нажатой клавиши. Мы назначим параметр «Neighbour Top», отвечающая за верхнее направление кнопку Выхода «Quit». Логика такая: мы нажимаем на клавиатуре стрелку вверх, и мы находимся на кнопки «Start», значит мы должны сфокусироваться на самой нижней кнопки, кнопки выхода «Quit». Кликните по установки «Neighbour Top», выберете кнопку «Quit»

Теперь проделаем с кнопкой выхода аналогичный механизм, только при нажатие вниз мы сфокусируемся на верхней кнопки «Старт». Перейдите в инспектор кнопки выхода и проделайте всех этап действий. За нижние направление отвечает «Neighbour Bottom» (Читайте их как: Соседняя нижняя кнопка).

Запустите игру и протестируйте нажатие клавиш.
Давайте немного украсим фон и подгрузим русский шрифт. Выбрать шрифты вы можете самостоятельно, я же буду использовать шрифт с предыдущего проекта «Арканоида».
Но сначала фон. Так как мы используем основу пользовательского интерфейса, предлагаю выбрать один из вариантов либо узел «ColorRect» который задает сплошным цветом прямоугольник, либо «TextureRect» который подгружает готовую картинку, есть и другие варианты, но это темы будущих проектов (параллаксы, градиенты и прочее). Вы вольны выбрать любой вид отображение, мы же возьмем «ColorRect». Покрепите выбранный вами узел к узлу «MainMenu». И подымите его в самый вверх по иерархии. После переименуйте его в «Background» (Фон).

Перейдите в инспектор и задайте цвет который вам больше всего понравиться. Цвет «41436a» выглядит неплохо.


Далее нам надо заполнить все экранное пространство нашим фоном. Перейдите к значку «Макет» и выберете полный прямоугольник, что захватить все пространство экрана.

Вот как будет смотреться

Теперь добавим шрифт. Можно скачать шрифт туть
Создайте папку «Font» в корневой папке проекта, там мы будем хранить наш шрифт. Помните, мы стараемся сохранять иерархию папок в разных проектах, потому для переноса сцену в другие проекты, иерархия папок будет сохраняться что позволит избежать лишних ошибок. Поместите туда скачанный шрифт.

Узел «Control» не имеет перезаписываемой темы, она в принципе ей ни к чему, текста в ней нету. Но у нас есть три кнопки в которой надо бы поместить динамичный шрифт, но создавать в каждой по отдельности не очень удобная затея. Но мы можем создать отдельно ресурс «Динамический шрифт». Перейдите к файловой системе, нажмите правой кнопкой мыши и выберете опцию новый ресурс.

Нам понадобиться ресурс «DynamicFont» вбейте в поисковик и создайте этот ресурс. Назовем его «MenuFont» и поместим его в папку Font


Раскройте папку внутри файловой системе и кликните по созданному динамичному шрифту.

После перейдите в инспектор этого ресурса (не узла), найдите параметр «Font» раскройте его и поместите туда (Font Data) наш шрифт.

Сохраните сцену. А теперь переходите не посредственно к кнопкам. В инспекторе кнопок нам нужно будет подгружать наш динамичный шрифт который хранит в себе обычный шрифт с кириллицей. В параметре «Theme Overrides» есть «Fonts», здесь вам нужно будет установить шрифт кликая по области [пусто]. Найдите динамичный шрифт «MenuFont».



А теперь измените текст кнопки с «Start» на «Новая игра»

Можете поиграть с размером шрифта, цветом и выравниванием. Мы возьмем левое выравнивание

Цвет возьмем приблизительно цвет фона

Здесь есть пять цветов:
• Font Color Disabled – Цвет неактивной кнопки
• Font Color Focus – Цвет фокуса над кнопкой (исключительно фокусируемся клавишами или геймпадом)
• Font Color – Отображает цвет, нету никакой реакции из вне. Так сказать, в режиме ожидания
• Font Color Hover – Цвет при наведении курсора мыши.
• Font Color Pressed – Цвет шрифта при нажатие на клавишу
Если кликнуть по самому динамичному шрифту в инспекторе, то откроются дополнительные настройки в которых вы можете изменять размер шрифта или включать фильтр размытия.

Что же давайте так обработаем и кнопку «Options» на «Опции», а кнопку «Quit» на «Выход».

Запустите игру и насладитесь новым дизайном «Главного меню».

Прежде чем мы продолжим создание меню настроек, определим где будут вызываться наше меню. А располагаться они будут в двух местах в игре: в главном меню и в паузе меню. Для этих целей мы воспользуемся новым узлом, под названием popup (pop-up - всплывающий)

Popup — это базовый элемент управления, используемый для отображения диалогов и всплывающих окон. Это подокно и модальное окно по умолчанию и имеет вспомогательные функции для пользовательского поведения всплывающих окон. Все всплывающие методы обеспечивают правильное размещение в окне просмотра.

Создадим новую сцену, поставьте в основу всех последующих элементов узел «Popup» и назовите узел «SettingsMenu»


Как вы могла заметить, сам узел по умолчанию скрыт, если нажать на иконку глазик он откроется, но вы получите предупреждение (подобный элемент должен быть скрыт в начале игры). Нажмите на глазик.

Следующее что мы с ним сделаем так это зададим размер, мы не будем заполнять весь экран через макет, хотя мы воспользуемся для отцентровки. Но сначала зададим ему размер. Перейдем в инспектор узла, в параметре «Rect» (Прямоугольнике) в параметре «Min Size» зададим размеры нашего меню настроек по длине и высоте. Пускай длина (Ось Х) будет равна 900, а высота (Ось Y) зададим 500.

А теперь выставим точно по середине с помощью макета. Нажмите на «Макет» и выберете опцию «По центру»


Теперь заполним нашу меню настроек фоновым цветом, для этого нам может понадобиться узел «ColorRect» или если вы хотите какую текстурку загрузить обращайтесь в «TextureRect». Прикрепите узел «ColorRect» и переименуйте в «Background».

Но как мы могли заметить, наш фон не заполнил границы узла «Popup». Это мы и исправим. Перейдите в макет узла фона и выберете опцию «Полный прямоугольник».

И наш узел цвета заполнит те границы который был выставлен узел «SettingsMenu», так как он наследуется от родителя.

Теперь выберете цвет по желанию, но желательно чтобы будущие кнопки и цвет текста не сливались. Мы же выберем цвет чуть темнее цвета главного меню # 25273d в параметре «Color».

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

Мы будем хранить все меню в этом папке.
Теперь ведем еще один вспомогательный узел для размещение различных элементов интерфейса под названием «MarginContainer», который добавляет поля.
MarginContainer - добавляет верхнее, левое, нижнее и правое поле ко всем узлам управления, которые являются прямыми дочерними элементами контейнера. Подобный узел создает отступ от края родительского элемента, для лучше смотреться для игрока.
Прикрепите узел «MarginContainer» к нашему фону, а после через макет расширьте на весь родительский элемент (Полный прямоугольник)


Теперь мы можем настроить отступ с левой стороны или с правой. Давайте сделаем отступ со всех сторон и выставим значение в 20 пикселей.

Сейчас изменение с отступами не видно, но когда мы добавим еще один вспомогательный узел, то результат будет очевиден. Теперь привяжем узел «GridContainer», что позволяет размещать сетку, в которой можно помещать элементы.
GridContainer - упорядочивает свои дочерние элементы, производные от Control, в структуру, подобную сетке, столбцы сетки задаются с помощью параметра columns, а количество строк будет равно количеству дочерних элементов в контейнере, деленному на количество столбцов. Например, если у контейнера 5 дочерних элементов и 2 столбца, в контейнере будет 3 строки.
Прикрепите узел сетки «GridContainer» к узлу полей «MarginContainer».

Здесь и будем мы размещать все основные элементы настройки. Кстати теперь мы можем видеть отступ от родителя узла полей. А теперь перейдите в инспектор сетки «GridContainer» и выставите параметр «columns» (колонки) на 2, что позволит разбить на две колонки сетку. Вы поймете для чего этого далее.

Но что мы будем размещать в меню настроек?
Мы создадим упрощенную версию меню настроек, в будущем мы улучшим систему, добавим пару вкладок и разобьём на разного типа настроек.
И так что будет входить в меню настроек:
• Режим экрана: на весь экран, оконный режим, окно без рамки.
• Включение FPS. Отображение кадров в секунду.
• Настройки музыки, звуков и общей громкости.
Давайте заполнять наш меню настройки.
Для отображение параметров нам понадобиться парные сочетание узлов (со сути будут просто идти два узла подряд).
Для отображение текста понадобиться узел ярлыка, он же «Label» сюда мы будем вносить свой собственный текст. Прикрепите к узлу сетки узел «Label» и назовите его «DisplayModeL» (Режим экрана), английская буква «L» в конце указывает что этот узел является узлом ярлыком «Label».

В параметре ярлыка «Text» введите текст «Режим экрана» а чтобы отображался русский язык, вам понадобиться прописать тему и установить шрифт, подобное прописывалось в предыдущей главе. Будем использовать все тот же шрифт.

Для смены режима понадобиться особый узел под названием «OptionButton»
OptionButton — это тип кнопки, которая при нажатии предоставляет список элементов. Выбранный элемент становится «текущим» элементом и отображается как текст кнопки.
Узел кнопка выбора параметра, прикрепите его так же к узлу сетки.

Но давайте глянем теперь как отображается наша кнопка опции.

Наша кнопка опции прижимается к тексту, но хотелось, чтобы она держалась ближе к правому краю. Для подобного позиционирования понадобятся параметры "Флаги размеров" (Size Flags), они присущи узлам пользовательского интерфейса. Параметры «Size Flags» регулируют размер узла потомка, наследуя свойства от своего родителя.
Давайте разберем их по подробней.

Как мы можем видеть имеются настройки для горизонтальной (Horizontal) и вертикальной (Vertical) области.
Флаги размера независимы для вертикального и горизонтального размера, и не все контейнеры используют их (но большинство). Под контейнером говориться о области который захватывает узел пользовательского интерфейса:
Fill: Сообщает родительскому объекту godot.Container расширить границы этого узла, чтобы заполнить все доступное пространство, не задействуя при этом какой-либо другой узел. Используйте с godot.Control.sizeFlagsHorizontal и godot.Control.sizeFlagsVertical.
Expand: Сообщает родительскому объекту godot.Container, чтобы этот узел занимал все доступное пространство на отмеченной вами оси. Если несколько соседних узлов настроены на расширение, они будут делить пространство в зависимости от коэффициента растяжения. См. godot.Control.sizeFlagsStretchRatio. Используйте с godot.Control.sizeFlagsHorizontal и godot.Control.sizeFlagsVertical.
Shrink Center (Центр сжатия): Сообщает родительскому объекту godot.Container центрировать узел внутри себя. Он центрирует элемент управления на основе его ограничивающей рамки, поэтому он не работает с флагами заполнения «fill» или расширения «expand» размера. Используйте с godot.Control.sizeFlagsHorizontal и godot.Control.sizeFlagsVertical.
Shrink End (Сжатие в конце): Указывает родительскому объекту godot.Container выровнять узел по его концу, либо по нижнему, либо по правому краю. Это не работает с флагами заполнения «fill» или расширения «expand» размера. Используйте с godot.Control.sizeFlagsHorizontal и godot.Control.sizeFlagsVertical.
Ratio: простое соотношение того, насколько расширенные элементы управления занимают доступное пространство по отношению друг к другу. Элемент управления с «2» займет в два раза больше свободного места, чем элемент с «1».
Рекомендуется поэкспериментировать с этими флагами и различными контейнерами, чтобы лучше понять, как они работают.
Для того что бы разместить наш узел «OptionButton» по правую сторону мы воспользуемся опции «Expand» - он захватит доступную область, а опция «ShrinkEnd» прижмет его к правому краю. Подобную опцию мы будем делать только по горизонтальной области. А вот галочку с опции «Fill» мы снимем. И вот что у нас должно получиться.

Узел полей «MarginContainer» не позволяет прижаться элементы к самому краю.
Но теперь давайте разберем функционал узла «OptionButton» по подробнее. Узел может хранить в себе несколько значений, и при выборе какого-либо значения, узел будет растягивать автоматически, показывая нам название опции. Давайте создадим первую опцию и назовем эту опцию «Полноэкранный», опция отвечающий за включение режима в полноэкранный режим. Кликните по опции «Элементы», далее нажмите кнопку «+Добавить» для создание нового элемента списка. Назовите этот элемент «Полноэкранный»

Когда вы добавить новый элемент, визуально узел «OptionButton» никак не измениться, так как Годот не отображает русские символы, как и с надписями, нужно подтянуть динамические шрифты.

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

Давайте еще добавим два элемента узлу «OptionButton», «оконный» режим
и режим «окно без рамки».

Когда вы добавите эти опции, то сможете менять значение через параметр «Selected», значение: 0 – полноэкранный, 1 – оконный и 2 – окно без рамок.

Переименуем узел «OptionButton» в «DisplayModeO» где буква О – будет означать «option».

Следующая настройка «Включение FPS», будет отображать количество кадры в секунду.
Добавим новый узел надписи «Label» и назовём её «DisplayFPSL» (Отображение FPS). В параметр «Text» так же укажем название «Включение FPS». Подтяните динамичный шрифт в теме «Theme» чтобы отображался текст.

Следующая кнопка будет отвечать за булевое значение, либо истина, либо ложь, узел «CheckButton».
CheckButton — это кнопка-переключатель, отображаемая как поле проверки. По функциональности похож на CheckBox, но имеет другой вид. Чтобы следовать установленным шаблонам UX, рекомендуется использовать CheckButton, когда его переключение оказывает немедленное влияние на что-либо. Например, его следует использовать, если его переключение включает/отключает параметр, не требуя от пользователя нажатия кнопки подтверждения.
Прикрепите узел «CheckButton» и назовите его «DisplayFPSCB», буквы CB будут означать сокращение вида кнопки.

Кстати благодаря узлу сетки «GridContainer» наши опции делятся на две колонки, и работает благодаря дочерним элементом, по очереди, через каждых два узла, начинается новая строка, с новыми элементами виде новых узлов.
Последнее что мы будем добавлять так это громкость музыки, звуков и общей громкости музыки и звуков. Давайте начнем с общей громкости. Как всегда, добавим узел надпись «Label» и назовем узел «MasterVolumeL» (Общая громкость). И снова подтягиваем динамичный шрифт в тему. В параметр «Text» укажите «Общая громкость»

Для регулирование звука, нам понадобиться особый узел, под названием «HSlider», который создает горизонтальный ползунок. Причем слева направо будет идти по нарастающий значения. Добавьте узел «HSlider» и переименуйте его в «MasterVolumeHS».

Изначально узел может отображаться не совсем корректно. Это связанно с заполняемым пространством самого узла, и соседствующего узла надписи «MasterVolumeL». Такие настройки помогут правильно отображать сам узел.
Узел «MasterVolumeL»:

Узел «MasterVolumeHS»:

Теперь давайте отрегулируем «Общую громкость» в инспекторе укажем минимальное значение -50 «Min Value», а максимальное значение на 0 «Max Value» и установим «Value» значение на -20. Такие параметры как минимальное значение и максимальное значение задают диапазон нашего параметра, за который мы не можем передвигаться, параметр «Step» задает шаг при изменение ползунка, а параметр «Value» как раз отвечает за выбранное значение.

Добавим последнее два параметра, громкость музыки и громкость звуков. Чтобы не повторять одни и те же действия, мы продублируем готовые узлы. Выделите узлы «MasterVolumeL» и «MasterVolumeHS» и нажмите горячие клавиши ctrl + D… два раза.

Переименуем узлы и их текст. Вторая пара: «MusicVolumeL» и «MusicVolumeHS» (Music - музыка), текст поменяйте на «Музыка». Третья пара: «SoundVolumeL» и «SoundVolumeHS» (Sound - звук), текст «Звуковые эффекты».

Наши элементы слишком близко расположены друг к другу, давайте это подправим, перейдем к узлу сетки «GridContainer» и в инспекторе найдем параметр «Constants» что расположено во вкладке «Theme Overrides». Здесь мы можем наблюдать еще два параметра, которые отвечают за расстояние между элементами. Выберем параметр «Vseparation» (Separation – разделитель, а буква V сокращенное название вертикали), под корректируем значение до 15 единиц, здесь как вам будет угодно расстояние.

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

Прежде всего давайте исправим папку в которой мы сохранили сцены главное меню и меню настроек. Наша папка будет зваться не «MainMenu» а назовем более продумано на «UI».
UI — User Interface, дословный перевод — пользовательский интерфейс. То есть UI — это то, что пользователь видит на сайте, в играх, в приложении, в интернет-магазине и так далее.
Переименуйте папку в файловой системе


В этой папке и будут храниться все наши сцены, связанные с меню, как и связующие скрипты.
Теперь, когда мы создали интерфейс меню настроек, пора заняться программированием. Первое что мы сделаем создадим скрипт к узлу меню настроек «SettingsMenu» и назовем его «SettingsMenu.gd». Сохраним в папке «UI».

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

Но как подключать? Конечно же через сигналы. Каждый из элементов кнопок имеет не большой набор сигналов, который следит за состоянием изменения.
Узел выбора опции который назвали «DisplayModeO», также имеет такой набор. Выберете узел, перейдите к сигналам и подключите сигнал к нашему узлу «SettingsMenu». Сигнал называется «item_selected(index: int)». Название функции оставьте как предлагает сам Годот.


Как вы заметили в своем арсенале узел «OptionButton» имеет два сигнала, давайте их разберем.
• item_focused ( int index ) - Генерируется, когда пользователь переходит к элементу с помощью действий ui_up (кнопкой вверх) или ui_down (кнопкой вниз). Индекс выбранного элемента передается в качестве аргумента.
• item_selected ( int index ) - Генерируется, когда текущий элемент был изменен пользователем. Индекс выбранного элемента передается в качестве аргумента.
Второй сигнал передает индекс выбранного варианта, когда пользователь выбирает из списка параметр. Можно заметить, что в аргументах созданной функции есть слово «index». Индекс – это и есть наш параметр «selected» в инспекторе. Напомним значение индексов: 0 – полноэкранный, 1 – оконный и 2 – окно без рамок.

Следующая кнопка «DisplayFPSCB» типа «CheckButton», так же перейдите к сигналам этого узла. Нам понадобиться сигнал «toggled(button_pressed: bool». Так же подключите его к узлу «SettingsMenu»

Здесь мы можем наблюдать целых четыре сигнала заложенные в родительском элементе кнопки «BaseButton» (в кнопки опции так же имеется подобные сигналы).
• button_down() – кнопка нажата
• button_up() – кнопка отпущена
• pressed() – кнопка нажата и опущена
• toggled(button_pressed: bool) – сигнал следящий за изменением кнопки на включение и выключение.

В аргументах мы можем наблюдать булево переменную «button_pressed» который как раз и будет передавать ложь и истину.
Следующая не совсем кнопка, а ползунок. Кнопка «MasterVolumeHS» отвечающая за общую громкость, перейдите к сигналам и выберете «value_changed(value: float)». Так же подключите этот сигнал к главному узлу.

Здесь же сигналы так же наследуются от родителя, но в данном случаи из класса отвечающий за диапазоны «Range»
• changed( ) - генерируется при изменении min_value (минимального значения), max_value (максимального значения), page (страницы) или step ( шага).
• value_changed ( float value ) - выдается при изменении значения. При использовании на ползунке это вызывается постоянно при перетаскивании (возможно, каждый кадр).
Иными словами, функция будет срабатывать, как только будет меняться положение ползунка, данные помещенные в аргументе являются дробными, или как их называют числа с плавающий точкой.

Желательно прописать комментарии чтобы в дальнейшем не забыть какой сигнал отвечает за какое действие.

Теперь ваша задача подключить еще два узла ползунка «MusicVolumeHS» и «SoundVolumeHS» используя сигналы. Комментарии к ним будут «Громкость музыки» и «Громкость звуковых эффектов». Вот что у вас должно получиться.

Теперь, когда мы прописали все сигналы, нам понадобится обращаться к нашим кнопкам на прямую. Для этих целей мы будем создавать переменные, но чтобы мы могли подгружать переменные родительских элементов, нам понадобиться ключевое слово как «onready» перед вызовом переменных.
Для кнопки с опцией выбора режима экрана мы создадим переменную «display_option», метод «get_node» позволяет получить доступ к узлу.

Сейчас третья строчка кода подсвечивается красным фоном, это связанно с тем что мы не указали какой узел надо загрузить. Для указание нужного узла, мы можем воспользоваться тремя способами. Мы могли перетаскивать сам узел прямо в код, либо прописать вручную, но это займет много времени, либо воспользоваться третьим способом. Перейдите к узлу в дереве сцен, кликните правой кнопкой мыши по узлу и выберете параметр «Копировать путь узла».

Тем самым мы скопируем путь расположение узла в древовидной системе. Перейдите к скрипту и вставьте код в метод get_node горячими клавишами ctrl + V. Только укажите двойные кавычки до и после всего пути.

Теперь наша задача проделать те же действия и с другими кнопками-узлами.
Создадим переменные, узел – переменная:
• DisplayFPSCB – display_fps_btn
• MasterVolumeHS – master_vol_hslider
• MusicVolumeHS - music_vol_hslider
• SoundVolumeHS - sound_vol_hslider

Теперь как же это будет работать? Мы создадим глобальный скрипт настроек, через этот скрипт программа будет взаимодействовать со всей игрой и включать настройки которые мы установим.
А теперь время создать глобальный скрипт «global_settings.gd». В режиме скрипта создайте новый скрипт: Файл – Новый скрипт.

Поместите скрипт в папку «UI»

Мы создали простой скрипт, теперь сделаем этот скрипт глобальным. Перейдите в: Проект – Настройки проекта…

Перейдите во вкладку «Автозагрузка»

Далее нам надо будет найти наш скрипт через иконку «Папка»

Годот предлагает дать имя узла как «GlobalSettings», что же почему бы и нет. Чтобы сделать её глобальной нажмите кнопку «Добавить»

Теперь наш скрипт стал глобальным и благодаря этому мы сможем обращаться напрямую к ней с любой точки программы через ключевое слово «GlobalSettings».

Прежде чем мы начнем прописывать скрипт, давайте подключим сцену «Меню настроек» к сцене «Главного меню», чтобы мы могли проверять все кнопки настроек, которые будем прописывать. Откройте сцену «MainMenu.tscn», и перетащите сцену в главное меню. Чтобы перенести целую сцену, вам понадобиться схватить из файловой сцены файл «SettingsMenu.tscn» и перенести в дерево сцен, либо связать сцену через иконку виде «Цепочки».

или

Теперь перейдите к скрипту, только на этот раз к «MainMenu.gd». Мы объявим переменную «settings_menu», заранее загрузим переменные сцены настроек через ключевое слово «onready» и загрузим сам узел (сцену) настроек меню

Теперь вызовем метод присущий узлу элемента «popup» которым и является наш узел «SettingsMenu», метод называется «popup_centered»

Что же делает это метод? Давайте разберем:
Всплывающее окно (показать элемент управления в модальной форме) в центре экрана относительно его текущего преобразования холста, в текущем размере или в размере, определяемом размером.
Иными словами, этот метод будет показывать наше меню настроек виде модального окна и подстраивать под размер экрана, располагая в центре экрана.
Модальное окно в графическом интерфейсе пользователя — окно, которое блокирует работу пользователя с родительским приложением до тех пор, пока пользователь — это окно не закроет.
Теперь сохраните и запустите главное меню. Нажмите меню настроек.
Чтобы закрыть меню настроек кликните в стороне от модального окна, и меню настроек закроется.


Есть у нас одна не приятная проблема, при выборе опции «Режима экрана».
Текст списка не отображается, хотя если мы выберем что то из списка, текст отобразиться в меню.

Годот не всегда может подцепить наш динамичный шрифт с кириллицей, но чтобы это исправить мы с вами создадим тему «Theme». Вернитесь к сцене «Меню настроек» и создайте новую тему, в инспекторе кнопки опции «DisplayModeO»

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

У вас откроется дополнительная панель настройки темы.

Как вы видите в Годоте есть заранее заготовленные элементы интерфейса: кнопки, ползунки, текстовые поля, вкладки и т. д. Все эти элементы можно изменять на свой собственный, в данный момент мы не затронем создание собственного интерфейса (в будущих уроках мы коснемся этого). Сейчас наша главная цель подцепить наш динамичный шрифт, вот сюда.

Так как мы уже создавали динамичный шрифт и сохраняли его, то давайте и загрузим его сюда. Нажмите кнопку «Загрузить» и найдите его в папке «Font».

Как только вы это сделаете, вы тут же обнаружите преображение.

Виднеется кнопка «OptionButton» в интерфейсе, если нажать её, то и там мы обнаружим кириллицу. Сохраните сцену, и перезапустите сцену главное меню.

Теперь порядок, хм… добавим кнопку закрытия модального окна, не интуитивно будет догадаться про закрытие модального окна. Так же вернитесь к сцене «Меню настроек», и добавьте кнопку, назовем её «CloseSettingMenu» и поместите её не на сетку «GridContainer» а на узла поле «MarginContainer».

Чтобы кнопка закрытия была на одном уровне с узлом сетки, но только ниже сетки.
Теперь немного настроем размер и расположение кнопки. В инспекторе узла «CloseSettingMenu» перейдите к параметрам «Size Flags» и выставите такие установки.

По горизонтали мы будем центрировать кнопку, а по вертикали спустим в самый конец, то есть в самый низ. А так как наша кнопка не входит состав сетки, она займет положение ровно по середине экрана по горизонтали.
Теперь пропишите кнопке текст «Закрыть» и загрузите шрифт, как мы грузили ранее.
Вот что по итогу у вас должно получиться.

Далее перейдите к сигналу кнопки, и выберете сигнал «pressed» прикрепите к главному узлу сцены «SettingsMenu». Название функции оставляйте как предлагает годот.

В этой функции вам всего то и надо что скрыть меню настроек. За сокрытие элементов интерфейса отвечает метод «visible». Нам нужно выключить видимость, значит значение ложь «false»

Сохраните, запустите, протестируйте кнопку. Узел «Popus» будет скрыт, а за ним и скроются и прикрепленные дочерние узлы.

Начнем прописывать функционал кнопок. Первая на очереди будет «режим отображения». Мы создадим функцию которая будет включать нужный нам режим, используя полученный аргумент.
Работать мы будем со функцией операционной системой «OS».

Функции операционной системы - OS включает наиболее распространенные функции для связи с операционной системой хоста, такие как буфер обмена, видеодрайвер, дата и время, таймеры, переменные среды, выполнение двоичных файлов, командная строка и т. д.
У Функции операционной системы есть набор параметров, но мы будем использовать только два параметра: window_fullscreen и window_borderless
• window_fullscreen – включает полноэкранный режим если метод равно истине
• window_borderless – удаляет оконную рамку если метод равно истине.
Два метода, три ситуации, нам надо будет прописать код. Функцию назовем «toggle_display_mode» (toggle - переключатель) и поместим туда аргумент индекс.
Откройте глобальный скрипт и пропишите такую конструкцию. Напомним значение индексов: 0 – полноэкранный, 1 – оконный и 2 – окно без рамок.

Вернемся к скрипту «меню настроек» и просто будем передавать значения индекса глобальному скрипту, в функцию «toggle_display_mode».

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

Давайте это исправлять, первое, когда мы запускаем игру, она по умолчанию включается в оконном режиме, давайте поменяем в узле «DisplayModeO» параметр «Selected» на 1, тем самым по умолчанию у нас будет отображаться это параметр «Оконный» (но это не значит, что мы можем по умолчанию выставлять этот режим).

Второе, нас шаблон главного меню будет иметь фиксированный размер в игре. Как в прочем и другие создаваемые нами игры, будут иметь фиксированный размер. Нам нужно будет перейти в меню: Проект – Настройка проекта…
Во вкладке «Основные» нам надо будет спуститься до параметров «Display».
Далее во вкладке «Window» найти режим «Mode». Выберете опцию «2d»

Опция «2d» будет сохранять пропорции экрана, даже при её изменении. Запустите игру и снова протестируйте главное меню, а точнее режим отображения.

Теперь все работает как надо. Переходим к следующему параметру, а именно включение FPS.
Для этого параметра нам придется создать целую не большую сцену, использовать сигнал и прописать скрипт.
Создайте новую сцену, и первый узел, он же будет единственным узлом, будет «Label».

Назовем узел «FpsLabel» и сохраним сцену, по названию узла, в папку «UI».

В параметре нашего ярлыка (Label) пропишем текст «FPS: 60»

Загрузите динамичный шрифт в «Theme Overrides», и здесь вы можете подобрать цвет, размер по своему усмотрению.

Теперь мы создадим свой собственный сигнал. Команда «signal» определяет свой собственный сигнал, функция «emit_signal» - транслирует сигнал другим узлам, а метод «connect» принимает сигнал.

Перейдем к глобальному скрипту настроек, создадим собственный сигнал под названием «fps_displayed» и будем испускать сигнал из новой функции «toggle_fps_display», функция которая будет принимать булево аргумент.

Мы создаем сигнал, а после имя сигнала указываем в кавычках и транслируем, передавая аргумент.
Теперь пропишем скрипт в сцене «FpsLabel.tscn», перейдите в эту сцену. Создайте скрипт и сохраните туда же где размещена наша сцена. Позвольте Годоту назвать ваш скрипт.

Первое обратимся к встроенной функции «_ready», которая позволит загрузить первоначальные установки. Здесь мы подключим собственный сигнал из глобального скрипта.

За подключения собственных сигналов отвечает метод «connect». Далее идут аргументы:
1) Сигнал – первым аргументом мы принимаем сигнал которым хотим подключиться
2) Объект – узнаем кому подключить сигнал. Ключевое слово «self» означает подключение к самому себе, к текущему объекту. Мы можем отправлять сигналы и другим узлам или объектам
3) Метод – какой метод мы должны запустить при поступление сигнала. Этот метод должен находится там же где и скрипт
Есть еще пару необязательных аргументов соединения сигнала
4) Массив параметров – здесь можно передавать параметры через массив
5) ConnectFlags - использования флагов для установки отложенных или одноразовых соединений
Иными словами, мы подключаем сигнал «fps_displayed» из глобального скрипта, прием идет в текущий объект, в нашем случаи скрипту узла «FpsLabel», за счет «Self» (Self - себе), далее запускаем новую функцию под названием «_on_fps_displayed», которую мы сейчас и создадим.

Создайте функцию «_on_fps_displayed» поместите туда аргумент «value» который будет идти прямиком из скрипта глобальных настроек, из функции fps_displayed(value), и здесь мы просто будем играть с видимостью самого узла «FpsLabel», если параметр «visible» (видимость объекта) будет равняться истине, то объект будет отображаться, а если ложь скрываться (не удаляться).
Мы можем создавать сколько угодно сигналов и функции и передавать через них целые списки аргументов и контролировать процессы, весьма удобная штука.
Следующий шаг нам понадобиться оживить картинку. Сейчас в узле «FpsLabel» текст статичен, давайте это изменим.
FPS (англ. frames per second) - количество сменяемых кадров за одну секунду.
Мы будем измерять количество кадров в секунду в встроенной функции «_process».
Пропишем такую конструкцию:

Встроенный метод «_process» обновляет содержимое один раз в определенное количество кадров (обычно 60 кадров в секунду). Далее обращаемся к параметру узла «text» (не путайте с переменной) который принадлежит узлу вида «label», здесь мы будем обновлять наш текст.
%s – называется символ-заполнитель. Этот заполнитель может быть легко заменен параметрами, переданными в строку формата. Так же он превращает любые данные в строку, будь то числа или булево значения или даже объекты.
% - Второй символ позволяет внедрить параметр справа в текст слева.
Engine - Синглтон Engine позволяет получить доступ к свойства самого движка Godot Engine. А метод «get_frames_per_second» - возвращает количество кадров в секунду запущенной игры.
В синглтон Engine хранит достаточно интересных методов и свойств в своем арсенале.
Итог, мы обновляем текст в параметру узла «FpsLabel», через форматирование текста мы заменяем в строке %s на количество кадров в секунду (FPS). Тем самым у нас будет отображаться текущий FPS, когда мы запустим текущую сцену.

При запуске сцены, fps только набирает обороты.
Сцена с определением FPS готова. Наша задача внедрить сцену в главное меню, и при интеграции (объединение) меню с игровыми проектами, нам так же следует поместить сцену с FPS, но предварительно выключить видимость сцены, ведь по умолчанию, эта сцена должна быть не видима.
Перейдите к главному меню и поместите сцену «FpsLabel.tscn», ниже остальных элементов.

Далее перейдите в меню настроек в скрипт и пропишите процесс вызова функции «toggle_fps_display» из глобального скрипта, мы будем передавать булево значения.

Аргумент «button_pressed» как раз и передает реакцию кнопки переключателя, посылает либо истина, если включен, либо ложь, если выключен.
Запустите сцену с главным меню, перейдите в настройки и включите опцию «Включить FPS». Здесь так же будет высчитываться FPS.

Заменой подписи «on/off» будем заниматься в бонусном уроки посвященной «Кастомизация темы».
Теперь давайте добавим музыку и звук, не важно какие вы добавите аудиозаписи.
Я добавлю музыку из предыдущего проекта «Арканоида» и возьму оттуда же любой звук. Все это нужно лишь для демонстрации.
Музыка «Ludum Dare 38 - Track 9.wav». Скачать
Звук вы можете сгенерировать или взять где, или использовать звуки с предыдущего проекта. Для демонстрации нам понадобится одна музыка и один звук, поместите в корневую папку проекта.

Для временного тестирования мы добавим звуки в главное меню. Для этого воспользуемся звуковыми узлами «AudioStreamPlayer», прикрепите к главному меню две штуки и назовите «music» (музыка) и «sound» (звук).

Следующие в инспекторе узлов «Stream» поместите музыку для узла «music» и звук для узла «sound».

Теперь, когда у нас есть звуковое сопровождение мы можем в инспекторе временно включать воспроизведения в параметре «Playing».
Так как же мы будем регулировать громкость наших звуковых эффектов и музыки?
В узлах «AudioStreamPlayer», будь то 2Д или 3Д, есть такой параметр как аудио шина «Audio Bus», который управляет общими звуками. Если присмотреться в инспектор узлов, то заметим параметр «Bus» со значением «Master», так же у нас есть еще одна закрытая вкладка «Аудио», кликните по ней. И вы увидите аудио шину с таким же названием. Это главная шина.

Эта же аудио шина будет отвечать за «Общую громкость», давайте добавим еще две шины для музыки и звуков.

Переименуем их в «Music» и «Sound»

Поменяем аудио шину в узлах музыки и звука в инспекторе в параметре «Bus»


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

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

Теперь обратим внимания на нижнею часть аудио шины, там присутствует родительский элемент «Master» так же присутствует и у аудио шины звука такой родитель.

О чем это говорит? Аудио шина «Master» будет регулировать аудио шины и музыки, и звука. Так что убавляя или прибавляя звук в аудио шине мастера вы будете взаимодействовать на громкость и на музыку и звук.

Все что нужно будет сделать в игровом проекте, так это распределить аудио шины, всем вашим музыкальным и звуковым сопровождением, и тем самым вы сможете регулировать громкость звучания, как по отдельности, так и общую громкость. Ну и соответственно добавить эти самые же аудио шины музыки и звуков.
Отключите проигрывание музыки и звуков если они были включены и перейдите к глобальному скрипту. Добавьте новую функцию «update_master_vol» (update - обновление), которая будет отвечать за обновление общий громкостью.
И добавьте такую конструкцию.

AudioServer - это низкоуровневый серверный интерфейс для доступа к аудио.
У этого интерфейса также имеются различные методы, один из метода как раз и регулирует громкость аудио шины.
set_bus_volume_db - устанавливает громкость аудио шины по индексу.
Все аудио шины имеют свой индекс. Самая первая шина «Master» имеет индекс – 0, добавленные шины музыки и звука соответственно имеют индекс шины 1 и 2.

Так что первый аргумент, метода «set_bus_volume_db» является выбор аудио шины, а второй аргумент «vol» уровень громкости.
Теперь добавим еще две новой функции в глобальный скрипт «update_music_vol» и «update_sound_vol». Они будут аналогичны функции «update_master_vol», будут иметь такой же набор аргументов, кроме индекса.

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

Сохраните скрипт. Теперь для тестирования воспользуемся нашими звуковыми сопровождением. Только для начала, активируйте параметр «Autoplay» для проигрывание музыки и звука при запуске игры.

Запустите сцену «Главного меню», зайдите в настройки и испытаете ползунки звуков, музыки и общей громкости.

При изменения ползунка общей громкости, звук резко затухает. Изменим параметры ползунков в сцене «настройки меню». Поменяйте параметры «Value» значения громкости на -5, у всех ползунков звуков.

На этом этапе мы закончили с меню настроек, следующий раздел будет посвящен меню паузе.
Но для завершение этого раздела, исправьте баг. Мы переименовали папку «MainMenu» на «UI», и теперь, когда пытаемся перейти в «Новую игру», у нас ничего не получается. Исправьте путь в скрипте главного меню.

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

У нас появился новый объект «default_bus_layout.tres» - это настройки наших аудио шин, его не трогайте.

Для создание паузы и соответственно меню паузы, нам понадобиться новая сцена.
Пауза – позволяет остановить игру, и запустить позже по желанию.
Создайте новую сцену. Во главе будет узел контроля «Control». Переименуйте узел в «PauseMenu».

Сохраните сцену в папке «UI», так как предлагает Годот.

Следующий шаг добавление фона, когда будет включаться пауза, будет все перекрываться фоном с кнопками паузы. Здесь вы так же можете выбрать свой собственный фон, будь то сплошной цвет «ColorRect» или картинка «TextureRect». Мы же остановимся на узле «ColorRect». Выберете узел, и через макет сделайте его сплошным «Полный прямоугольник»

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

Значение прозрачности добавляется к параметру вместе с цветом RGB, значения здесь идет в 16-ричной системе исчислении. Первые два символа это прозрачность, остальные по два числа, на каждую, распределяется на красный, зеленый и голубой оттенок.
Теперь добавим новый узел, ранее которого мы не видели, узел «CenterContainer». Привяжите узел к узлу «PauseMenu»

CenterContainer - удерживает дочерние элементы управления по центру. Этот контейнер удерживает все дочерние элементы в их минимальном размере в центре.
Этот узел будет все центрировать. Так же как и фон, через макет выберете «Полный прямоугольник» для этого узла.
Теперь еще один новый узел «VBoxContainer»

VBoxContainer – вертикальный контейнер, размещает все элементы по вертикали, есть еще и горизонтальный вариант «HBoxContainer».

Что будет входить в нашу паузу, кроме фона, кнопки, и они будут иметь такое название и функционал.
• Продолжить – возобновление игры
• Настройки – включение меню настроек
• Главное меню – выход в главное меню
• Выход – выход из игры
Теперь добавим четыре узла кнопки «Button»

Я сказал четыре кнопки.

Название узлов будет и содержащего текста в инспекторе этих узлов будет таким:
o ResumeButton – Продолжить
o OptionsButton – Настройки
o MainMenuButton - Главное меню
o QuitButton – Выход
Resume с английского имеет одно из значения «Возобновить»
Переименуйте кнопки, и вставьте соответствующий текст.

Помним, что кириллицу Годот не знает, но мы можем загрузить динамичный шрифт, который сохраняли в папке «Font», чтобы отображать русский текст в кнопках.

Загрузите русский шрифт и для остальных кнопках.

Ну и чтобы игрок смог понять, что это пауза, добавим простой текстовый ярлык «Label», в котором и будет красоваться слова «Пауза».

Добавьте в параметр «Text» слова «Пауза», загрузите динамичный шрифт, и выровняйте текст по центру, по горизонтали и вертикали.

Смотрятся кнопки уж слишком близко друг к другу, это можно исправить в инспекторе вертикального контейнера «VBoxContainer» в параметре «Separation». Увеличьте параметр по своему желанию, сделайте не большой интервал, между кнопками.

Хм… давайте сделаем небольшое пространство между текстовым ярлыком «Паузы» и кнопками. Но как это сделать?
Нам подойдет простой узел контроля, поместив его между текстом и кнопками, мы можем регулировать высоту этого узла. Поместите узел «control».

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

Теперь настало время кодинга! Создайте скрипт узла «PauseMenu», и сохраните в папку «UI», так как предлагает Годот.

Для начало нам понадобиться переменная, которая будет контролировать включение и выключение паузы, назовем её «is_paused». Но эта переменная будет необычной, при изменение её булево значения, будут запускаться еще пару действий. И так мы плавно переходим таким штуками как сеттерам и геттерам.
Добавьте такую конструкцию в скрипт.

Переменная принимает ложь (False), кроме «setget» есть еще одна фраза «set_is_paused», это по сути функция, которая мы будем вызывать. Но давайте по подробнее остановимся на механизме «setget»

Механизм «setget» позволяет создать две функции, функцию установки и функцию получение. Но для чего? Все просто, этот механизм позволит включать функции при изменение переменной, добавив еще пару команд дополнительно. Но давайте по порядку, «setter name» это функция которая должна иметь только один обязательный аргумент, и эта функция присваивает переменной значения, хотя нам не обязательно присваивать, тем самым мы сможем защитить от стороннего вмешательства. Следующая функция «getter name» наоборот позволяет получить значения переменной, и в этой функции НЕ должно быть аргументов.
К примеру, если бы мы захотели задать уникальное имя и использовали такую конструкцию:То вызвав первую функцию «setFuntion» мы должны указать аргумент, а далее можем присваивать новые значения.а вторая функция «getFunction» позволяет получить значение переменнойВ использование переменной setget нужно использовать ключевое слово «self.» и в зависимости от ситуации мы будем включать либо функцию установки, либо функцию получателя.Не забываем, что это Функции, а это значит, что в функцию мы можем впихнуть сколько угодно методов, переменных и прочих команд, главное не менять количество аргументов функции.
К примеру, поменяли переменной «uniqueName» значения имени, а Годот сообщает чтобы было изменено имяИли у нас есть переменная значения которые не должны выходить за рамки положенного числового диапазона, допустим значения жизни игрока, вот пример:

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

Но что если мы захотели бы получить только функции установки, или наоборот функцию получение?
И такое здесь работает.
Так мы можем вызвать функцию установкиА таким образом только функцию полученияВ этом случаи запятая устанавливает функцию получение.
Так, но вернемся к нашим разработкам, сейчас наш скрипт паузы выглядит так:

Заметили? Здесь мы вызываем лишь функцию установки. А теперь пропишем и саму функцию

Функция будет менять значение переменной «is_paused» от установленного булево значения, но это не все.

С изменением значение переменной будет включаться или выключаться пауза сцены (paused), текущего дерева сцен (get_tree). Но и это еще не все.
Перейдите к сцене паузы, выключите видимость главного узла, ведь изначально наша сцена паузом, не будет запускаться при запуски игры.

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

Теперь нам понадобиться функция, для перехвата события ввода, здесь нам поможет функция «_unhandled_input».
_unhandled_input – позволяет графическому интерфейсу перехватить событие ввода. Сразу впишем и такую конструкцию.

Мы будем отслеживать нажатие клавиши ключа «ui_cancel», и если это случилось мы будем менять значение переменной «is_paused».
В случаи если переменная «is_paused» хранила Истину, то восклицательный знак при присваивание будет менять булево значение на противоположный, иными словами Ложь. Ну а если переменная «is_paused» хранило Ложь, меняем на Истину.
Обратите внимание на слово «self.», эта переменная, которая затрагивает механизм «setget» и при присваивание нового значения, срабатывает функция «set_is_paused», которая меняет значение переменной «is_paused» на противоположное значение, устанавливает паузу в главной сцене и показывает сам интерфейс паузы, ну или скрывает, в зависимости от значение переменной «is_paused».
Теперь наша задача прописать все кнопки нашего меню паузы. Зайдите в сигналы каждой кнопки и прикрепите к главному узлу паузы. Используйте сигнал «pressed».

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

Кнопка «Продолжить», здесь функционал простой, мы просто выключаем переменную «is_paused» и не забудьте ключевое слово «self», это крайне важно, чтобы сработала функция.

Для вызова меню настроек предлагаю вам к главному узлу «PauseMenu» прикрепить сцену «Меню настроек».

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

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

Выход в главное меню, воспользуемся деревом сцен (get_tree) и изменение сцены (change_scene). Нужно указать сцену главного меню «MainMenu.tscn», который находиться в папке «UI»

И последняя кнопка выход из игры.

Так сверимся что у нас получилось:

Заготовка меню паузы почти готова. Но лучше её прикрепить к узлу, которая будет отображать содержимое паузы поверх остальных объектов (спрайтов), а ведь можно размещать не только паузу, но и различный интерфейс, к примеру сердечки жизни или игровые очки. Подобное лучше реализовать на новой специальной для этих дел сцене, для этого воспользуемся особым узлом.
Но все по порядку. Создайте новую сцену, и за основу главного узла выберете «другой узел» и найдите узел «CanvasLayer».

Переименуйте его в название «GUI»
Графи́ческий интерфе́йс по́льзователя (ГИП), графи́ческий по́льзовательский интерфе́йс (ГПИ) (англ. graphical user interface, GUI) — система средств для взаимодействия пользователя с электронными устройствами, основанная на представлении всех доступных пользователю системных объектов и функций в виде графических компонентов экрана (окон, значков, меню, кнопок, списков и т. п.).
Далее сохраните сцену в папку «UI» с тем же названием.

Что делает узел «CanvasLayer»?
CanvasLayer - слой холста для рисования. Узлы CanvasItem, которые являются прямыми или косвенными дочерними элементами CanvasLayer, будут отображаться в этом слое. Слой представляет собой числовой индекс, определяющий порядок отрисовки. 2D-сцена по умолчанию отображается с индексом 0, поэтому CanvasLayer с индексом -1 будет отображаться ниже, а слой с индексом 1 — выше.
Иными словами, размещенные объекты на сцене, занимают слой холста под индексом «0», а мы будем размещать паузу и другой интерфейс на слое индекса «1», что позволит отрисовывать поверх остальных объектов, ближе к нам. Перейдите в инспектор узла и в параметре «Layer» проверьте значение, там должен быть единица.

Теперь прикрепите меню паузы к главному узлу.

И скройте её паузу.

Осталось разместить нашу сцену интерфейса «GUI» в игре. Так как у нас уже имеется тестовая игра, временно поместите туда сцену с «GUI». Эта сцена временная в рамках создание наших менюшек.

Нужно будет запустить эту сцену. Как только мы нажмем клавишу «Esc», то у нас запуститься пауза, и не смотря на то что кнопки реагируют на наведение курсора мыши, или нажатие клавиш, они все же не активируются. Но это значит, что пауза работает.

Чтобы запустить обработку наших клавиш, нам надо обрабатывать сам скрипт в особом режиме. Меню мы сделали специально в отдельной сцене, чтобы включить режим обработки «Process» в режиме паузы «Pause Mode»

У каждого узла в Godot есть «Режим паузы», который определяет, когда он обрабатывается. Его можно найти и изменить в свойствах узла в инспекторе.
Вот что каждый режим говорит узлу:
• Inherit – Обработка скрипта зависит от состояния родительских узлов, будет наследовать и потомках процесс работы состояние.
• Stop - Останавливает узел несмотря ни на что (и дочерние элементы в режиме наследования Inherit). При паузе этот узел не будет обрабатываться.
• Process - Обрабатывает узел несмотря ни на что (и дочерние элементы в режиме наследования Inherit). Приостановлен или нет, этот узел будет обрабатывать
Указывая скрипту главного узла «PauseMenu», режим «Process», мы тем самым говорим Годоту, что этот скрипт будет обрабатываться даже в случаи остановки обработки скрипта целой игры.
Запустите и проверьте скрипт, все будет работать. Но будет один Баг, куда же без багов ))
Если вы попытаетесь выйти в главное меню, то вы… выйдите туда без проблем, но правда игра будет в режиме паузы, не смотря на то что вы загрузили другую сцену. Кнопки главного меню не будут работать. Чтобы это исправить, вам всего то надо выключить паузу перед переходом в другую сцену. Вернитесь в скрипту меню паузы, и пропишите те же действия что при кнопки «Продолжить», только в кнопку перехода в главного меню.

Теперь предлагаю вам начать с главного меню, зайти в игру, нажать паузу через кнопку «Esc», по тыкать там менюшку, выйти обратно в главное меню, или выйти совсем из игры. Следующая глава будет посвящена интеграции нашего шаблона меню к игре «Арканоид».
p.s. прикрепите узел «FpsLabel», что фпс корректно работал.

Пришло время интегрировать наше меню в игровой проект. Мы возьмем игру которую уже сделали, проект «Арканоид», сюда мы будем импортировать все наши менюшки. Но прежде чем мы будем сливать два проекта воедино, давайте обсудим как это происходить и какие зависимости мы будем помещать.
Прежде всего стоит сделать две копии, как самого «Арканоида», так и проект «Главное меню», это будет сделать для того чтобы не испортить оригинал проектов. Так же нам еще не раз понадобиться проект «Главное меню» для интеграции в другие проекты.

Импортируя проект «Главное меню», нам придется многое поменять в этом шаблоне, да и сам игровой проект подстроить под меню:
1) Изменить размеры самих меню, если они окажутся слишком маленькие/большие.
2) Подключить шрифт (если понадобиться), проверить как он будет отображаться.
3) Подключиться глобальный скрипт настроек.
4) Переназначить главную сцену «Главного меню».
5) Настроить аудио шины, подключить все звуки и музыки.
6) Переподключить все переходы сцен.
7) Добавить меню паузы и фпс.
8) Прочее мелкие настройки (в случаи если мы что-то упустили).

Проекты у нас не сильно большие, но работы много.
Что же приступим.
Первое сделайте копию игры Арканоида, и назовите одну из копии добавив слово "_original" (original - оригинал), это проект который мы НЕ будем менять, чтобы в случаи провала мы могли бы сделать копию.
Копию можно сделать если кликнуть в проводнике, не в Годоте, правой кнопкой мыши, и выбрать слово «копировать» из контекстного меню. Далее по пустому пространству кликаем снова правой кнопкой мыши и выбираем из контекстного меню опцию «Вставить». Возможно из-за различия операционной системы, подобный процесс может выглядеть иначе.


Далее переименуйте копию в «НазваниеИгры_original»

Теперь откроем Godot, наша оригинальная игра не будет отображаться в списке локальных проектов, но нам этого и не надо, ведь мы будем изменять игру с названием без слова "_original". Выберите проект «Arkanoid», и кликните по слову редактировать.

Мы открыли проект, но пока сверните сам Годот, и вернитесь к папке с проектом главного меню. Так же сделайте копию и назовите в конце «_original».

Раскройте папку «Main Menu», нам придется в ручную копировать определенные ресурсы проекты, а не все. Для начала давайте с копируем две зависимости.
Нашу папку «UI», в которой имеется основное тело проекта главного меню, и настройки аудио шин.

Выделите их и так же через правую кнопку мыши скопируйте, ну или горячей клавишей ctrl + C.
Далее вам необходимо перейти в директорию (в папку с игрой) проекта «Arkanoid» и так же через правой кнопкой мыши вставить содержимое.

Теперь скопируем еще одну зависимость. Вернитесь к проекту главного меню. Перейдите в папку «Font» и скопируйте тему «MenuFont.tres», связанную с настройками наше шрифта.

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

Ну а теперь приступим выполнять шаг за шагом наш небольшой план. Первое пункт идет «изменить размеры самих меню, если они окажутся слишком маленькие/большие».
Из-за разнице размеров экрана главного меню и игрового проекта, наш интерфейс существенно будет меняться, конечно если размер экрана не будет совпадать с игровым проектом. Раскройте папку «UI» и двойным нажатием левой кнопкой мыши откройте сцену главного меню «MainMenu.tscn». Упс…

Здесь расположены три родительских узла отвечающий за интерфейс, играться с размерами мы будем через инспектор каждого узла, будем настраивать параметры «Rect». Для пропорционального изменения интерфейса воспользуемся параметром «Scale» (Масштаб), а для позиционирования в 2д пространстве параметры «Position»
Так же нам понадобиться узнать какой размер экрана имеет наш игровой проект.
Перейдите в «Проект» - «Настройка проекта» - «Display» - «Window», там найдите такие параметры как: «Width» и «Height».

Итого размер экрана игрового проекта составляет 384 х 216. Этим мы будем пользоваться.
Вернитесь к сцене и выберете узел «VBoxContainer» перейдите к инспектору, и давайте уменьшим сам узел примерно на треть «0.3» через параметр «Scale».

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

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

Причина столь странного поведения заключается в параметре масштабирования «Scale». Наш узел не учитывает измененный масштаб. Если мы сбросим параметр «Scale», то все будет корректно отображаться. В текущий момент прижиматься к левому углу.

Что же делает этот параметр и как правильно разместить наш объект на экране. Параметр «Scale» умножает значение на исходный размер элемента и изменяет его. К примеру, если бы ширина прямоугольника узла равнялась 100 пикселем, то параметр «Scale» в 0.5 уменьшил бы ширину прямоугольник узла на половину, в 50 пикселей.
100 (ширина узла) * 0.5 (scale) = 50 пикселей
Соответственно если бы на 0.3, то уменьшил бы почти на одну трети.
100 (ширина узла) * 0.3 (scale) = 30 пикселей.
В следствии этого Годот берет реальные размеры, а не измененные и пытается позиционировать на узел думая, что у него размер на 100% (на 1) не изменён.

Есть два способа как расположить правильно объект: либо изменить исходный объект оставляя параметр «Scale» не измененным (тогда Макет будет работать корректно), либо изменить «Scale» и высчитывать место положения. Ну или на глаз все разместить, но это такой себе способ.
Давайте выберем второй способ, будем считать!
Наш узел должен располагаться в нижнем левом углу с отступом в 10 пикселей.
Выставим позицию (Position) по оси Х на 10 пикселей. И вы должны заметить параметр «Size» указывающий на реальный размер прямоугольника узла. Теперь выставим по оси Y. Для того блюда нам понадобятся следующие ингредиенты:
• Высота игрового экрана
• Высота реального размера узла
• Высота измененного размера узла
• Отступ
Формула такая:
Высота экрана – (высота узла * Scale) – отступ = координаты узла по Y. При умножении остатки игнорируются.

Выставим значения: позиция по Х 10 пикселей, по Y 168 пикселей

Да, мы наконец это сделали! Выставили правильные координаты для кнопок меню, теперь осталось выставить правильно меню настроек. Раскройте меню, и узрите величественные размеры, превышающие все ожидания.

Да работы еще много. Но чтобы подправить правильное расположение меню настроек, лучше перейти в сцену настроек, перейдите в «SettingsMenu.tscn».
Давайте настроем «Scale» главного узла «SettingsMenu», на 0.4 по ширине и высоте.

Помним, что реальные размеры узла не меняются, и здесь у нас идет отцентровка объекта по середине экрана из-за макета. Значит нам всего лишь надо правильно разместить по центру наш интерфейс.
Размер по ширине узла равен 900 пикселей, а изменённый размер будет равняться: 900 * 0.4 (Scale) = 360
Для размещения объекта, который должен расположится ровна по середине, нам нужна ровно половины ширины или высоты (в зависимости где будет выравнивать, по горизонтали или вертикали), чтобы точно центровать объект, высчитывать будем измененный объект.

Впишем координаты по Х узла «SettingsMenu».

По высоте высчитывается подобным же способом. Берем высоту экрана 216, делим пополам 216 / 2 = 108. Высота узла составляет 500 пикселей, высчитываем модификатор масштаба 0.4
500 * 0,4 = 200
Далее высчитываем половину измененного масштаба узла:
200 / 2 = 100
Далее вычитаем с середины экрана половинку измененного узла.
108 – 100 = 8
Вписываем координаты по позиции Y.

Давайте также настроем и меню паузы.
Перейди в меню паузы кликнув два раза по сцене «PauseMenu.tscn» в файловой системе, в папке UI.

И как мы можем наблюдать, наше меню выглядит гигантским.

Здесь мы будем изменять размер лишь одного узла. Узел, который создает контейнер и центрирует все содержимое «CenterContainer». Будем баловаться Scale. Установите значения Scale в 0.4.

Теперь доберитесь до Макета и выберете «По центру».

Это нужно для того чтобы контейнер высчитывался от середины экрана, хоть сейчас он и прижат к левому углу экрана. Давайте считать, формула такая же, как и с меню настроек. Размер экрана составляет 384х216. Берем половину экрана по Х, 192. Далее берем размер нашего узла, он так же составляет 384 пикселей, модифицируем размер за счет Scale 384 * 0.4 = 153.6, округлим до 154 пикселей, надеюсь среди вас нету перфекциони́зтов. После возьмем половинку измененного размера узла: 154 / 2 = 77.
Вычитаем с середины экрана половинку изменённого узла.
192 – 77 = 115
Вписываем координаты по Х.

Далее, чтобы не описывать весь схожий пример напишу формулу здесь:
216 / 2 – (274 * 0.4) / 2
108 – 55 (54.8 округлили) = 53

Теперь делаем вывод: подобный метод изменения меню, не является хорошим, желательно делать меню зная заведомо размер игры и тогда не понадобиться подобные танцы с бубном.
Теперь сделаем главной сценой главное меню. Войдите в проект – настройки проекта – Application (Приложения) и в меню run найдите опцию «Main Scene».

Кликните по иконки папки, выйдите на уровень выше.

Найдите папку UI и там сцену главного меню «MainMenu.tscn».

Выберете эту сцену. Запустите игру, не сцену, и теперь первая сцена которая будет запускаться будет именно главное меню. Хех… не получилось?
А знаете почему? Мы забили про глобальные переменные. В этом проекте у нас не существует глобальных настроек меню. Давайте это исправим.
Перейдите снова в настройки проекта, только на этот раз в «Автозагрузки».

Найдите на глобальный скрипт в папки UI, под названием «global_settings.gd»

Загрузите его. Далее вам нужно будет просто нажать добавить ничего не меняя.

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

Запустите игру.

Теперь перенастроим кнопку «Новая игра», ведь при нажатие на неё, мы ссылаемся на тестовую сцену, но нам надо перейти на саму игру. Перейдите к скрипту сцены главного меню. Нам понадобится изменить путь к нашей игре.

Раскройте в файловой системе папку «Level», нам нужна сцена игры «World.tscn». Все что вам нужно:
1) Сотрите путь в методе change_scene
2) Схватите сцену в файловой системе и перетащите сцену прямо в скрипт в скобки change_scene
Вот что у вас должно получиться:

Сохраните сцену, теперь вы сможете зайти в игру нажав на кнопку «Новая игра».
Теперь перейдите к сцене игры «World.tscn» и туда вам нужно прикрепить сцену «GUI», так как это сцена будет на холсте выше остальных, то при вызове паузы, никакой другой объект вам не помешает. Можете переместить узел выше или оставить внизу, это уже на ваше усмотрение.

Легким движением руки, вы загрузили меню паузы, которая будет останавливать игру в игровом процессе, будут так же работать меню настроек, переключатели экранных режимов, и даже будет действовать ползунок общий громкости игры. Кнопка выход в главное меню, будет ссылаться на … главное меню. Так же будут работать и прочее кнопки. Но все же есть вещи которые либо частично работают, либо вовсе не работают. Включение FPS включает гигантский текст, ползунки музыки и звуковых эффектов вовсе не работают. Начнем, пожалуй, с музыкального сопровождения и звуковых эффектов. Когда мы перемещали файлы с директории проекта «Главного меню» в «Арканоид» мы прихватили с собой и настройки аудио шин. Годот их любезно подтянул, и все что нам понадобиться так это переназначит наши звуки и музыку на соответствующие шины.

Давайте искать звуковые файлы.
В каждом уровне может быть своя музыка, пройдитесь по файлам «Level.tscn» найдите фоновую музыку и настройте аудио шину на «Music».

Следующий шаг, основная масса звуковых эффектов находится в сцене с шаром, откройте её и так же перенастройте звуковые узлы на аудио шину «Sound».

Сохраните сцену, запустите игру, протестите ползунки музыки и звуков, работают ли они или нет.

Последнее что нам нужно сделать, настроить текст FPS. Для начала закиньте саму сцену фпс «FpsLabel.tscn» в игровой мир «World.tscn».

Поместите сцену на холст «GUI» и сделайте временно видимым надпись.

Как мы можем наблюдать наш текст довольно большой
Перейдите в сцену «FpsLabel», и воспользуйтесь опцией Scale, так же убавьте по Х и Y на 0.4 масштаб.

Сохраните сцену и выключите видимость в игровом мире «World.tscn», не в сцене FpsLabel.

На этом глава заканчивается. Вы можете выставить в главном меню название игры через узел «Label» поменять фон на картинку, а не сплошной цвет. Мы подключили меню к игре, и теперь можем включать новую игру, или возвращаться в главное меню или вовсе выйти из игры.
Следующий проект разработка игры «Космический шутер». Удачной разработки!

Игра с применённым меню. Чутка улучшенная Ссылка