Godot Engine

Godot Engine

Zbyt mało ocen
Полный гайд по всем кнопкам в godot 4 или же КНОПОЧКИ (Button)
Autorstwa: колбаSSка
В этом руководстве я разберу все 9 видов кнопок, ButtonGroup и ColorPicker в godot 4 (если захотите чтобы я разобрал ещё и слайдеры, скроллеры и прочие узлы пишите ну или можете написать свои фишки с кнопками или узлом control я добавлю в последующие разделы)
   
Przyznaj nagrodę
Ulubione
Ulubione
Usuń z ulubionych
Это база, разбор свойств и сигналов кнопок (Base button)
Начнем с базовых свойств и сигналов которые присутствуют у всех кнопок, их можно найти в разделе base button в инспекторе.
Свойства Base button:
1. Disabled – отключение/блокировка кнопки:
Если включена вы не можете нажать кнопку или вызвать её горячей клавишей.
2. Toggle Mode – режим переключения:
Если включено работает как переключатель(вкл/выкл)
3. Pressed – состояние нажатия:
Изменяется с 0 на 1 при нажатии или зажатии кнопки (Можно включить в инспекторе только со включенным Toggle Mode)
4. Action Mode – режим обработки действия:
Button Press – работает при нажатии кнопки.
Button Release – работает при отпускании кнопки.
5. Button Mask – чем можно нажать кнопку
Mouse Left/Right/Middle(тут всё понятно надеюсь)
6. Keep Pressed Outside – ЭТО только визуальный эффект:
При включенном значении кнопка визуально остаётся нажатой, если вы уведёте курсор за её пределы, удерживая клик.
7. Button Group это стоит разобрать чуть ниже... (чуваки я заебался пока с ним разбирался)

8. Shortcut – это назначение горячей клавиши для кнопки
9. Shortcut Feedback – визуальное отображение нажатия кнопки при нажатии горячей клавиши
10. Shortcut in Tooltip – подсвечивание горячей клавиши при наведении на кнопочку.
Сигналы Base button:
1. button_down() – срабатывает при нажатии на кнопку.
2. button_up() – срабатывает при отпускании кнопки.
3. pressed() – работает как оба первых в зависимости от Action Mode: Button Press – button_down(),
Button Release – button_up().
4. toggled(toggled_on: bool) – работает только с включенным Toggle Mode, через toggled_on и отдает true или false в зависимости от нажатия кнопки.
Методы(функции) Base button:
(Дальше в практике будет несколько готовых решений)
Вообще эта шняга нужна для визуальных отображений, логики и прочих интерактивностей с кнопкой.
1. func _pressed() – вызывается когда кнопку нажимают.
2. func _toggle(toggled_on) – вызывается каждый раз при изменении состояния кнопки(работает только в режиме toggle_mode = 1)
3. get_draw_mode() – показывает текущее состояние кнопки от 0 до 4
enum DrawMode {
0 DRAW_NORMAL, # Обычное состояние
1 DRAW_PRESSED, # Нажата
2 DRAW_HOVER, # Курсор над кнопкой
3 DRAW_DISABLED, # Заблокирована
4 DRAW_HOVER_PRESSED # Нажата + курсор над ней(только с toggle_mode 1)
}
4. is_hovered() – показывает находится ли курсор над кнопкой
5. set_pressed_no_signal(true/false) – эта функция переключает кнопку, а ещё меняет внешний вид на то что вы указали в скобочках. НЕ вызывает никаких сигналов кнопки и не вызывает никаких функций кнопки. СЕЙЧАС ВНИМАТЕЛЬНО функция НЕ будет работать если отключен Toggle_mode или включен Disabled, проще говоря для вызова этой функции кнопка должна быть переключателем и не должна быть заблокирована.
просто кнопка (Button)
Просто кнопка больше сказать нечего, но с возможностью небольшой катомизации, ладно сначала разберу её свойства и методы, а потом покажу пару способов ещё приукрасить с помощью инспектора или кода
1. Text – текст(мне надо ещё что то добавлять?).
2. Icon – иконка, если на кнопке написан текст, то текст будет расположен сбоку от иконки.
3. Flat – кнопка становится прозрачной и не отображает свою тему(только контур при нажатии, текст и иконку).
4. Text Behavior – всё что в этой категории используется для настройки и корректировки текста.
1. Alignment – Выравнивание текста: Left/Center/Right – слева/по центру/справа.
2. Text Overrun Behavior – Поведение при переполнении, если текст занимает места больше чем кнопка:
1.Trim Nothing – Без обрезки
2.Trim Characters – Обрезка посимвольно
3.Trim Words – Обрезка по словам
4.Ellipsis – С многоточием (...)
5.Word Ellipsis – По словам с многоточием
3. Clip Text – Фиксирует размер кнопки, если текст больше кнопки та не изменит свой размер.
5. Icon Behavior – всё что в этой категории используется для настройки и корректировки иконки.
1. Icon Alignment – Определяет горизонтальное выравнивание иконки внутри кнопки: Left/Center/Right – слева/по центру/справа.
2. Vertical Icon Alignment – Определяет вертикальное выравнивание иконки внутри кнопки: Top/Center/Bottom – сверху/по центру/снизу.
3. Expand Icon – Растягивание иконки на кнопку с сохранением пропорций иконки.
6. BiDi – изменяет написание текста с права налево и наоборот, только для языков которые поддерживают такую возможность, например арабский (Вещь которой вы будете пользоваться чуть чаще чем никогда).
Практика – изменение кнопочки при нажатии на неё и добавление хоткея
Давайте напишу скрипт для изменения текста и иконки при нажатии на кнопку, а также назначу на кнопку горячую клавишу. (да по какой то причине изменяющиеся спрайты нельзя настроить на стандартном button в Theme override в вкладке icon как у CheckBox или CheckButton)
Получится вот так:
Вот так выглядит у меня инспектор
И вот мой так выглядит скрипт(я в нем оставил Комментарии так что разберетесь)
Для копирования:
extends Button # Загружаем в переменные наши спрайты var button_icon_pressed = load("res://спрайты/хлебный_треугольник_нажат.png") var button_icon_default = load("res://спрайты/хлебный_треугольник.png") # То что выполняется при нажатии на кнопку func _pressed(): # Текст меняется при каждом нажатии на кнопку (в инспекторе Text обозначен button) text = "батон" if text == "button" else "button" # Иконка меняется при каждом нажатии на кнопку (в инспекторе Icon обозначен хлебный_треугольник.png) icon = button_icon_pressed if icon == button_icon_default else button_icon_default
Ладно дальше добавим хоткей(горячею клавишу) не неё
1. Нажимаем на Shortcut (Находится в Base Button см. выше)
2. Новый Shortcut
3. Array[InputEvent]
4. Добавить элемент
5. В пусто выбираем NewInputEventKey
6. Конфигурация и в ней вводим нужную клавишу или сочетание клавиш (у меня это пробел)
7. ВСЁ хоткей создан

В InputEventKey есть ещё куча настроек давайте их разберем:
1. Pressed – изменяется при нажатии True/False
2. Echo – отвечает за зажатие клавиши
3. Command... – это зажатие ctrl на виндовс или зажатие Cmd на мак
4. Alt Pressed – это зажатие alt (ну мне кажется дальше всё понятно....)
5. Shift Pressed – это зажатие shift
6. Ctrl Pressed – это зажатие ctrl
7. Meta Pressed – это зажатие win на виндовс или cmd на мак(НЕ ИСПОЛЬЗУЙТЕ СОЧЕТАНИЕ КЛАВИШ С НЕЙ В СВОЕЙ ИГРЕ – она не работает у меня на windows 10)
Всё остальное вам не сильно пригодится
Практика 2 – более детальная кастомизация Button (я назвал это ButtonPro)
Скрипт плохо оптимизирован, не используете его, я потом перепишу его
Если вам прошлый вариант не сильно понравился в плане кастомизации, то вот более профессиональный шаблон для кастомизации вашей кнопки:
Вот полный скрипт с комментариями
Код для копирования:
extends Button # Загружаем в переменные наши спрайты @export var button_icon_default: Texture2D # Стандартная иконка @export var button_icon_pressed: Texture2D # Нажатая кнопка @export var button_icon_hovered: Texture2D # Кнопка под курсором @export var button_icon_disabled: Texture2D # Заблокированная кнопка @export var button_icon_hovered_and_pressed: Texture2D # Под курсором нажатая (только в toggle mode) # То что выполняется при нажатии на кнопку func _pressed(): # Текст меняется при каждом нажатии на кнопку (в инспекторе Text обозначен button) text = "батон" if text == "button" else "button" # Иконка меняется при каждом изменении состояния кнопки (в инспекторе Icon обозначен хлебный_треугольник.png) func _process(_delta): match get_draw_mode(): # Выводит состояние кнопки от 0 до 4 0: icon = button_icon_default; flat = 0 # Стандартная иконка 1: icon = button_icon_pressed; flat = 0 # Нажатая кнопка 2: icon = button_icon_hovered # Кнопка под курсором 3: icon = button_icon_disabled; flat = 1 # Заблокированная кнопка 4: icon = button_icon_hovered_and_pressed # Под курсором нажатая (только в toggle mode)
После написания скрипта НЕ ЗАБУДЬТЕ указать свои спрайты в инспекторе!
Выбор одной из нескольких кнопочек или же RadioButton (Button Group)
В godot можно создать RadioButton(радиокнопка) это кнопка которая объединена с другой такой же или несколькими с помощью Button Group
разберем её свойства методы и сигналы
Свойства Button Group:
1. allow_unpress() – позволяет снять выделение с активной кнопки
Сигналы Button Group:
1.pressed(button: BaseButton): – срабатывает если одна из радиокнопок нажата
Методы Button Group:
1. get_buttons() – выдает список всех кнопок которые входят в данный ButtonGroup
2. get_pressed_button() – выдает какая кнопка активна
Практика 3 – создание группы радиокнопок (Button Group + Button)
Здесь мы разберемся и создадим простую группу кнопок
Создание группы радиокнопок
На сцену добавляем несколько кнопок любые которые вы захотите (все наследники BaseButton поддерживают Button Group).
Соединяем их все одним ButtonGroup и нужно выставить у всех кнопок поставить галочку toggle_mode (godot на это явно намекнет если режим переключателя будет отключен при добавлении кнопки в Button Group).
После этого добавьте Label для вывода информации и прикрепите к нему скрипт.
В скрипте мы пишем:
Объясняю скрипт подробно:
1. @export var button_group: ButtonGroup # тут понятно просто в инспекторе указываем группу кнопок которой связывали свои радиокнопки из прошлого пункта
2. func _ready():
# Подключаем сигнал (в скобках любое название сигнала)
button_group.pressed.connect("название сигнала")
3. func "название сигнала"(pressed: BaseButton): # В скобочках пишете обязательно (var: BaseButton)
# pressed.name — имя узла кнопки в сцене, pressed.text — её текст
text = pressed.name + "\n" + pressed.text # \n — перенос строки
Финальный код выглядит так:
extends Label # Группа кнопок, которую ОБЯЗАТЕЛЬНО НУЖНО назначить в инспекторе @export var button_group: ButtonGroup func _ready(): # Подключаем сигнал (в скобках любое название сигнала) button_group.pressed.connect(_update_text) # Эта функция сигнал будет срабатывать при нажатии ЛЮБОЙ кнопки в группе func _update_text(pressed: BaseButton): # pressed.name — имя узла кнопки в сцене, pressed.text — её текст text = pressed.name + "\n" + pressed.text # \n — перенос строки
Кнопка галочка (CheckBox)
Просто кнопка в виде квадратика в котором можно поставить галочку, toggle mode(режим переключателя) включен по умолчанию, идеальна для создания радиокнок. Основное отличие от обычной кнопки только в внешнем виде, и встроенных в Theme Override изменяемых иконках состояния (почему так нельзя было сделать для обычной кнопки, вопрос открыт)
Разберем эти состояния CheckBox
1. checked – Кнопка активна
2. checked_disabled – Кнопка активна и заблокирована
3. unchecked – Кнопка не активна
4. unchecked_disabled – Кнопка не активна и заблокирована
5. radio_unchecked – Радиокнопка не активна
6. radio_unchecked_disabled – Радиокнопка не активна и заблокирована
7. radio_checked – Радиокнопка активна
8. radio_checked_disabled – Радиокнопка активна и заблокирована
Практика 4 — детальные изменения при нажатии кнопок (ButtonGroup + CheckBox)
Вообще как я и сказал ранее CheckBox идеально подходит для создания радиокнопок, так как имеет встроенные удобные опции для кастомизации состояний кнопки в Control/Theme Override/Icons (разобрал выше).
Здесь же я соединю ButtonGroup и CheckBox и напишу для вас шаблонный скрипт в котором можно будет удобно, а ещё там будет функция с отладочной информацией.
Будет это выглядеть вот так:
Создание группы радиокнопок с удобной настройкой в скрипте:
1. Создаем несколько CheckBox и TextureRect (VBoxContainer – я использовал его для удобной группировки кнопок по вертикали в сцене).
2. Соединяем кнопки Button Group.
3. Крепим к TextureRect скрипт.
В скрипте пишем:
В Инспекторе не забудьте указать текстуры и группу кнопок
Для копирования
extends TextureRect # Массив текстур: [0] - лук, [1] - щит, [2] - меч. нужно назначить в инспекторе @export var textures: Array[Texture2D] # Группа кнопок, которую также нужно назначить в инспекторе @export var button_group = ButtonGroup func _ready(): consol(button_group) # Подключаем сигнал (в скобках любое название сигнала) button_group.pressed.connect(_on_weapon_selected) func _on_weapon_selected(button: BaseButton): consol(button_group) # Отладочный вывод при нажатии на одну из кнопок в группе match button.name: # Название кнопки "RadioButtonBow": # Что происходит при нажатии на эту кнопку texture = textures[0] # Устанавливаем текстуру лука "RadioButtonShield": texture = textures[1] # Устанавливаем текстуру щита "RadioButtonSword": texture = textures[2] # Устанавливаем текстуру меча # Функция с отладочной информацией которая отображается в консоле func consol(group: ButtonGroup): print(" ") print("1. свойство allow_unpress") print(group.is_allow_unpress()) print("2. метод get_buttons() получение списка всех кнопок") print(group.get_buttons()) print("3. метод pressed_button() какая кнопка активна") print(group.get_pressed_button())
Для использования кода просто укажите свои текстуры в инспекторе, названия кнопок в
match button.name
"имя CheckBox" или другой кнопки
texture = textures[0] что будет происходить с текстурой
Максимально емкая версия этого кода:
extends TextureRect # Массив текстур: [0] - лук, [1] - щит, [2] - меч. нужно назначить в инспекторе @export var textures: Array[Texture2D] # Группа кнопок, которую также нужно назначить в инспекторе @export var button_group = ButtonGroup func _ready(): # Подключаем сигнал (в скобках любое название сигнала) button_group.pressed.connect(_on_weapon_selected) func _on_weapon_selected(button: BaseButton): match button.name: # Название кнопки "RadioButtonBow": texture = textures[0] # Устанавливаем текстуру лука "RadioButtonShield": texture = textures[1] # Устанавливаем текстуру щита "RadioButtonSword": texture = textures[2] # Устанавливаем текстуру меча
вкл/выкл или же переключатель (CheckButton)
По своей сути обычный CheckBox но с измененными характеристиками в Icons сейчас их опять распишу ведь есть необычные иконки которые помечены как mirrored
1. checked – Кнопка активна
2. checked_disabled – Кнопка активна и заблокирована
3. unchecked – Кнопка не активна
4. unchecked_disabled – Кнопка не активна и заблокирована
5. checked_mirrored – Кнопка активна отзеркаленая
6. checked_disabled_mirrored – Кнопка активна и заблокирована отзеркаленая
7. unchecked_mirrored – Кнопка не активна отзеркаленая
8. unchecked_disabled_mirrored – Кнопка не активна и заблокирована отзеркаленая
Как отзеркалить кнопку?
Всё просто, для этого в пункте Layout Direction выберите Right-to-Left, после этого кнопка отзеркалится и в Icons будут использоваться иконки с припиской mirrored.
Палитра, выбор цвета (ColorPicker)
Да это не кнопка, но без него нельзя разобрать ColorPickerButton в основе которого полностью лежит ColorPicker. ColorPicker это очень удобный виджет как для пользователя, так и для разработчика ведь его очень легко настроить через инспектор (в отличии от того же ColorPickerButton) Ладно начнем разбирать его свойства, сигналы и методы
Свойства ColorPicker:
1. Color – Текущий выбранный цвет.
2. Edit Alpha – Показывает ползунок альфа-канала.
3. Color Mode – Текущий режим цвета.
RGB – позволяет редактировать цвет с помощью ползунков Красный/Зелёный/Синий.
HSV – позволяет редактировать цвет с помощью ползунков Тон/Насыщенность/Яркость.
RAW – расширенный режим, позволяющий работать с цветами за пределами стандартного диапазона [0, 1], что полезно для HDR-эффектов и сложных операций.
OKHSL – это новое цветовое пространство, похожее на HSL, но лучше соответствующее восприятию человека.
4. Deferred Mode – Если выключено то сигнал color_changed срабатывает каждый раз когда color изменяется(кроме вождения пипетки по экрану, color изменяется, но сигнал не срабатывает.) Если включено то сигнал color_changed срабатывает только при отпускании мыши.
5. Picker Shape – Форма отображения цветового пространства.
HSV Ractangle – Прямоугольный HSV с цветовой полоской.
HSV Ractangle Wheel – Прямоугольный HSV с цветовым кругом.
VHS Circle – Круговой HSV с цветовой полоской.
OKHSL Circle – Улучшенная версия HSL, лучше соответствующая восприятию.
None – Полностью скрывает.
6. Can Add Swatches – позволяет сохранять образцы цветов из палитры.
7. Sampler Visible – Предпросмотр цвета и пипетка, если Picker Shape не None, то позволяет выбрать форму для цветового пространства (палитры).
8. Color Modes Visible – Показывает кнопки выбора цветовых режимов, а также кнопка Colorized Sliders позволяет менять вид слайдеров, на серые или цветные.
9. Slider Visible – Показывает слайдеры цвета.
10. Hex Visible – Показывает поле ввода HEX-кода цвета. (туда также можно вводить цвета на английском, весь список цветов можно посмотреть в Color).
11. Presets Visible – Показывает вкладки с образцами и недавними цветами (на ЛКМ выбрать цвет, на ПКМ удалить цвет).
Ну и одно свойство BoxContainer.
12. Alignment – Выравнивание элементов ColorPicker.
Begin – по верху
Center – по центру
End – по низу
Сигналы ColorPicker:
1. color_changed() – вызывается когда цвет выбран(даже если просто водить ЛКМ по палитре).
2. preset_added() – вызывается когда добавляется новый цвет в образцы цветов (Swatches).
3. preset_removed() – вызывается когда цвет удаляться из образцов.
Методы(функции) ColorPicker:
1. add_preset(color: Color) – добавляет указанный цвет в образцы цвета (Swatches).
2. add_recent_preset(color: Color) – добавляет указанный цвет в недавние цвета (Recents Colors).
3. erase_preset(color: Color) – убирает указанный цвет из образцов цвета (Swatches).
4. erase_recent_preset(color: Color) – убирает указанный цвет из недавних цветов (Recents Colors).
5. get_presets() – выдает список всех цветов из образцов цвета (Swatches).
6. get_recent_presets() – выдает список всех цветов из недавних цветов (Recents Colors).
Кнопка с выпадающей палитрой (ColorPickerButton)
Вообщем это очень удобная с точки зрения пользователя палитра для выбора цвета, а с точки зрения разработчика этот узел падла которую хрен отредатируешь нормально без кода. Скажу сразу что состоит этот узел из Button, BaseButton, ColorPicker и PopupPanel так что с ними тоже желательно ознакомиться.
Немного о том как работает ColorPickerButton на самом деле
по сути это кнопка при нажатии на которую динамически создается всплывающая панель (PopupPanel) в котором ColorPicker, но так как он создается динамически, то в инспекторе нету удобных свойств ColorPicker.
Меню кнопочек с списком действий PopupMenu (MenuButton)
Кнопка открывающая всплывающее меню (PopupMenu), да для работы снова надо лезть в узел который создается динамически этой кнопкой.
Но для начала разберем свойства, сигналы и методы Menu Button
1. Switch on hover – Если включено на двух кнопках то при наведении курсора на другую кнопку MenuButton внутри того же узла, у которой также включён switch_on_hover, она закроет текущее меню и откроет другое. И не надо кликать, очень классная функция всем советую протестить.
2. Item Count – Количество элементов внутри кнопки.
Дальше идут свойства для каждого отдельного элемента.
3. Text – текст.
4. Icon – иконка или картинка.
5. Checkable – отметка возле кнопки:
No – нету.
As Checkbox – квадратик.
As Radio Button – круг.
6. Checked – визуально нажата отметка кнопки.
7. Disabled – отключение/блокировка кнопки.
8. Separator – Блокирует кнопку и делает из неё визуальный разделитель.
Сигналы
1. Срабатывает при нажатии перед появлением меню.
Методы
1. get_popup() – Возвращает PopupMenu, необходимая функция для настройки этой кнопки и внутренней логики.
2. set_disable_shortcuts(disabled: bool) – Если включено то отключает горячие клавиши(shortcuts) кнопки.
3. show_popup() – сразу корректирует позицию и размер окна для MenuButton, а затем открывает всплывающее окно (PopupMenu). Используйте его вместо get_popup().popup(), которое просто откроет всплывающее окно в верхнем левом углу.
У новичка ни разу не открывавшего доку или того кто в ней особо нечего не понял, сразу возникнет вопрос: а как с этим работать
Ответ прост: с помощью get_popup() и свойств, методов и сигналов Popup Memu.
И тут ещё немного теории по самому popup menu (черт мне что ещё разбирать десяток его свойств...) ладно нам нужно основное это сигналы popup menu, а именно:
Сигналы Popup Menu
1. id_focused(id: int) – срабатывает при выборе пункта меню с помощью клавиатуры, в аргумент передает id выбранного пункта.
2. id_pressed(id: int) – срабатывает при нажатии на пункт popup menu, в аргумент передает его id.
3. index_pressed(index: int) – срабатывает при нажатии на пункт popup menu, в аргумент передает его index.
4. menu_changed() – срабатывает при добавлении, удалении и модификации элементов popup menu(работает как-то выборочно на все модификации срабатывает, например на set_item_as_separator не срабатывает. Точно срабатывает на set_item_text, set_item_disabled, remove_item).
Практика 5 — простое использование и изменение Popup Menu
В этом пункте покажу и расскажу как использовать menuButton, а точнее PopupMenu который в него встроен на вот таком примере:
Меню кнопочек с выбором (OptionButton)
Кнопочка с ссылкой на твой любимый видосик :З (LinkButton)
Кнопочка с твоей любимой картинкой (TextureButton)
Кнопка для управления в игре (TouchScreenButton)
Komentarzy: 6
Vad1mYos[UA] 7 października o 4:41 
А как писать код в GoDot на C# именно в версии из стима? Я уже часа два ищу информацию об этом, а мне всегда отвечают что надо скачивать другую версию из офф сайта. А мне это не очень подходит, так как я хочу видеть сколько времени я провел в программе. Помогите пожайлуста
SL1 5 października o 3:52 
Благодарю.
kgyjc16t 29 września o 9:17 
имбулечка
Hiro 23 sierpnia o 4:44 
ахах хлебный треугольник)
Боевая Бебра 15 czerwca o 3:35 
300:btd6thumbsup:
Закись Ашота 16 maja o 22:35 
TRAKTORRR