Godot Engine

Godot Engine

Not enough ratings
Полный гайд по всем кнопкам в godot 4 или же КНОПОЧКИ (Button)
By колбаSSка
В этом руководстве я разберу все 9 видов кнопок, ButtonGroup и ColorPicker в godot 4 (если захотите чтобы я разобрал ещё и слайдеры, скроллеры и прочие узлы пишите ну или можете написать свои фишки с кнопками или узлом control я добавлю в последующие разделы)
   
Award
Favorite
Favorited
Unfavorite
Это база, разбор свойств и сигналов кнопок (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)
Меню кнопочек с выбором (OptionButton)
Кнопочка с ссылкой на твой любимый видосик :З (LinkButton)
Кнопочка с твоей любимой картинкой (TextureButton)
Кнопка для управления в игре (TouchScreenButton)
2 Comments
Боевая Бебра 15 Jun @ 3:35am 
300:btd6thumbsup:
BOSS KFS 16 May @ 10:35pm 
TRAKTORRR