Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

Настроювані елементи керування GUI

Так багато елементів керування...

Проте їх ніколи не буває достатньо. Створення власних користувальницьких елементів керування, які діють саме так, як ви хочете, є одержимістю майже кожного програміста GUI. Godot надає їх багато, але вони можуть працювати не зовсім так, як ви хочете. Перш ніж звертатися до розробників із запитом на підтримку діагональних смуг прокручування, принаймні було б добре знати, як легко створити ці елементи керування за допомогою сценарію.

Малюнок

Щодо малювання, рекомендуємо перевірити підручник Власне малювання в 2D. Те саме стосується. Деякі функції варто згадати через їх корисність під час малювання, тому вони будуть детально описані далі:

Перевірка контрольного розміру

На відміну від 2D-вузлів, «розмір» важливий для елементів керування, оскільки він допомагає організувати їх у відповідних макетах. Для цього надається властивість Control.size. Перевірка під час _draw() є життєво необхідною, щоб переконатися, що все залишається в межах.

Перевірка фокусу

Деякі елементи керування (наприклад, кнопки чи текстові редактори) можуть забезпечувати фокус введення для введення з клавіатури чи джойстика. Прикладами цього є введення тексту або натискання кнопки. Це контролюється властивістю Control.focus_mode. Під час малювання та якщо елемент керування підтримує фокус введення, завжди бажано відображати певний індикатор (підсвічування, рамку тощо), щоб вказати, що це елемент керування, у якому зараз сфокусовано. Щоб перевірити цей статус, існує метод Control.has_focus(). приклад

func _draw():
    if has_focus():
         draw_selected()
    else:
         draw_normal()

public override void _Draw()
{
    if (HasFocus())
    {
        DrawSelected()
    }
    else
    {
        DrawNormal();
    }
}

Розміри

Як згадувалося раніше, розмір важливий для елементів керування. Це дає їм змогу правильно розташувати їх у сітках, контейнерах або закріпити. У більшості випадків елементи керування забезпечують мінімальний розмір, щоб допомогти правильно їх розмістити. Наприклад, якщо елементи керування розміщено вертикально один на одному за допомогою VBoxContainer, мінімальний розмір гарантує, що ваш настроюваний елемент керування не буде здавлений іншими елементами керування в контейнері.

Щоб забезпечити цей зворотній виклик, просто замініть Control._get_minimum_size(), наприклад:

func _get_minimum_size():
    return Vector2(30, 30)

public override Vector2 _GetMinimumSize()
{
    return new Vector2(20, 20);
}

Крім того, установіть його за допомогою функції:

func _ready():
    set_custom_minimum_size(Vector2(30, 30))

public override void _Ready()
{
    CustomMinimumSize = new Vector2(20, 20);
}

Введення

Елементи керування надають кілька помічників, щоб зробити керування вхідними подіями набагато легшим, ніж звичайні вузли.

Вхідні події

Перед цим є кілька посібників із введення, але варто зазначити, що елементи керування мають спеціальний метод введення, який працює лише тоді, коли:

Вказівник миші знаходиться над елементом керування.
Кнопку було натиснуто над цим елементом керування (керування завжди фіксує введення, доки кнопку не відпущено)
Керування забезпечує фокус клавіатури/джойстика через Control.focus_mode.

Це функція Control._gui_input(). Щоб використовувати його, змініть його у своєму контролі. Обробку встановлювати не потрібно.

extends Control

func _gui_input(event):
   if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_LEFT and event.pressed:
       print("Left mouse button was pressed!")

public override void _GuiInput(InputEvent @event)
{
    if (@event is InputEventMouseButton mbe && mbe.ButtonIndex == MouseButton.Left && mbe.Pressed)
    {
        GD.Print("Left mouse button was pressed!");
    }
}

Щоб дізнатися більше про самі події, перегляньте підручник Використання inputEvent.

Сповіщення

Елементи керування також мають багато корисних сповіщень, для яких не існує спеціального зворотного виклику, але які можна перевірити за допомогою зворотного виклику _notification:

func _notification(what):
    match what:
        NOTIFICATION_MOUSE_ENTER:
            pass # Mouse entered the area of this control.
        NOTIFICATION_MOUSE_EXIT:
            pass # Mouse exited the area of this control.
        NOTIFICATION_FOCUS_ENTER:
            pass # Control gained focus.
        NOTIFICATION_FOCUS_EXIT:
            pass # Control lost focus.
        NOTIFICATION_THEME_CHANGED:
            pass # Theme used to draw the control changed;
            # update and redraw is recommended if using a theme.
        NOTIFICATION_VISIBILITY_CHANGED:
            pass # Control became visible/invisible;
            # check new status with is_visible().
        NOTIFICATION_RESIZED:
            pass # Control changed size; check new size
            # with get_size().
        NOTIFICATION_MODAL_CLOSE:
            pass # For modal pop-ups, notification
            # that the pop-up was closed.

public override void _Notification(int what)
{
    switch (what)
    {
        case NotificationMouseEnter:
            // Mouse entered the area of this control.
            break;

        case NotificationMouseExit:
            // Mouse exited the area of this control.
            break;

        case NotificationFocusEnter:
            // Control gained focus.
            break;

        case NotificationFocusExit:
            // Control lost focus.
            break;

        case NotificationThemeChanged:
            // Theme used to draw the control changed;
            // update and redraw is recommended if using a theme.
            break;

        case NotificationVisibilityChanged:
            // Control became visible/invisible;
            // check new status with is_visible().
            break;

        case NotificationResized:
            // Control changed size; check new size with get_size().
            break;

        case NotificationModalClose:
            // For modal pop-ups, notification that the pop-up was closed.
            break;
    }
}