gohud — набор HUD и UI для Godot 4

Новое: аркада, комикс, Material 3 и облик для детей

К обычному, sci-fi и средневековому добавились четыре новых семейства — теперь четырнадцать встроенных обликов, каждый в тёмном и светлом варианте. Каждый виджет, всплывающее окно и элемент HUD принимает их без единого изменения в вашем коде: смените пресет — и весь экран последует за ним.

Галерея gohud в material_light — кнопки-пилюли, заливные карточки и цвета Material 3 — `material_light`

Галерея gohud в material_dark — те же формы Material 3 на тёмной базовой схеме — `material_dark`

Галерея gohud в kids_light — пухлые желейные кнопки цветов мелков на солнечной странице — `kids_light`

Галерея gohud в kids_dark — та же коробка с игрушками на ночно-синей странице — `kids_dark`

Галерея gohud в comic_light — жирные чернильные контуры и жёсткие тени на странице цвета кремовой бумаги — `comic_light`

Галерея gohud в comic_dark — кремовые контуры и жёлтый основной цвет на ночной странице — `comic_dark`

Галерея gohud в arcade_light — раскрашенные клавиши с градиентом и бликом и толстая панель HUD в синей рамке на небесно-голубой странице — `arcade_light`

Галерея gohud в arcade_dark — те же яркие клавиши на ночной странице — `arcade_dark`

Material 3 — для экранов приложений

Material 3 Expressive, выверенный по официальным токенам M3: кнопки-пилюли с плашкой 40dp внутри области касания 48dp, диалоги и листы с углами 28dp, заливные карточки, поля с контуром и ползунок Expressive. Компоненты приложений — панель навигации, верхняя панель, FAB, строка поиска, чипы, прогресс и выбор даты — следуют токенам компонентов M3, а заголовки набраны встроенным шрифтом Roboto. Для магазинов, настроек, почты и любого экрана, который должен ощущаться как приложение.

Детский облик — коробка с игрушками

Сделан для детей: каждая клавиша, строка и панель — желейная конфета с толстым контуром и плотным бортиком, который проседает при нажатии, а у каждого вида элементов свой цвет мелка. Быстрые слоты — конфетные кубики, значки — наклейки, стик — радуга, у окон солнечная лента заголовка и круглая кнопка закрытия-конфета, а нажатие сплющивает кнопку. Размеры и шрифт вашего проекта остаются точно такими же.

Комикс — жирные чернила

Каждая лицевая панель — кадр комикса: цвет поверхности внутри жирного чернильного контура, а за ним жёсткая тень, которая исчезает при нажатии. Одна настройка включает или выключает все тени, ещё две задают толщину контура и размер тени, а один вызов делает то же самое для отдельного виджета. У окон — жёлтая плашка заголовка.

Аркада — раскрашенные клавиши

Каждая клавиша раскрашена — градиент, белый блик и бортик, который проседает при нажатии, всё в тёмно-синем чернильном контуре, — а подпись на ней белая с чернильным контуром: зелёная — играть, синяя — всё остальное, красная — удалить. Панели толстые: цветная рамка вокруг светлой середины, а у окон золотая лента заголовка и круглая красная клавиша закрытия.

GoUi.use_preset(GoThemePresets.MATERIAL_LIGHT)   # или MATERIAL_DARK
GoUi.use_preset(&"kids_light")                   # или &"kids_dark"
GoUi.use_preset(&"comic_light")                  # или &"comic_dark"
GoUi.use_preset(&"arcade_light")                 # или &"arcade_dark"

Material 3 подробно → · Детский облик подробно → · Аркада, виджет за виджетом ↓ · Комикс, виджет за виджетом ↓ · Одно и то же всплывающее окно во всех четырнадцати обликах →

Аркада: раскрашенные клавиши и толстые панели

Самый новый облик одевает каждый экран как игровой автомат. Каждая клавиша раскрашена — градиент от светлого верха к более насыщенному низу, белый штрих блика и бортик, который проседает при нажатии, всё внутри тёмно-синего чернильного контура, — а подпись на ней белая с чернильным контуром. Каждая панель толстая: цветная рамка с собственным бликом вокруг светлой середины. arcade_light ставит белые панели на небесно-голубую страницу; arcade_dark — тёмно-синие панели на ночную страницу. Каждая картинка ниже — настоящий экран gohud: тот же код, одна строка с пресетом.

GoUi.use_preset(&"arcade_light")   # или &"arcade_dark"

Галерея gohud в arcade_light — зелёные, синие, красные и лавандовые раскрашенные клавиши и панель HUD в синей рамке на небесно-голубой странице — `arcade_light` · галерея

Нижний лист в arcade_light — толстая панель в рамке, поднимающаяся от нижнего края, с рядами клавиш — `GoSheet`

Обучающая подсказка в arcade_light — выноска в рамке, указывающая на клавишу — `GoCoachMark`

Боковая шторка в arcade_dark — тёмно-синяя панель со строками навигации поверх затемнённого экрана — `GoDrawer`

Поповер в arcade_dark — пузырь в рамке, привязанный к клавише, которая его открыла — `GoPopover`

Оповещение в arcade_dark — золотая лента «Level up!», красная клавиша закрытия и зелёная клавиша «Great» на тёмно-синей панели в синей рамке — `GoDialogs.alert()`

Снекбар в arcade_light — белая панель в коричневой рамке вдоль нижнего края с действием «Undo» — `GoSnackbar`

Каждая клавиша раскрашена

Кнопки в arcade_light — зелёная «Играть», синяя «Подробнее», белая клавиша с контуром, коралловая «Удалить», красная «Удалить навсегда», лавандовая компактная клавиша и серая отключённая, каждая раскрашена градиентом, бликом и бортиком в тёмно-синем контуре — `GoStyle.button()`

Вкладки в arcade_light — выбранная вкладка синяя раскрашенная клавиша, остальные — лавандовые клавиши — `GoStyle.tabs()`

Сегментированный переключатель в arcade_light — отдельные раскрашенные клавиши, выбранная синяя и вдавленная — Сегментированные клавиши

Переключатели и флажки в arcade_light — зелёная глянцевая дорожка во включённом состоянии, лавандовая в выключенном, и зелёный флажок с галочкой — Переключатели и флажки

Карточки в arcade_light — светлые середины в толстых синих рамках с бликом и бортиком — `GoStyle.card()`

Форма в arcade_light — утопленное белое поле, переключатель и зелёная клавиша «Сохранить» — `GoForm`

Сетка выбора в arcade_light — колпачки клавиш, выбранный в золотой окантовке на зелёном оттенке — `GoStyle.choice_grid()`

Сетка слотов в arcade_light — инвентарь из глянцевых колпачков клавиш со счётчиками стопок — `GoSlotGrid`

Строки списка в arcade_light — каждая строка светлый колпачок клавиши с иконкой — Строки списка

Выбор даты в arcade_light — дни-колпачки клавиш, выбранный день — раскрашенная клавиша — `GoDatePicker`

Ползунок в arcade_light — синяя глянцевая трубка в чернильном желобке и круглая ручка-колпачок клавиши — `GoStyle.slider()`

Группа радиокнопок в arcade_light — круглые колпачки клавиш, выбранный с синей точкой — `GoStyle.radio_group()`

Чипы-фильтры в arcade_light — чипы-колпачки клавиш, выбранный с синим оттенком и галочкой, и удаляемые чипы с крестиком — `GoStyle.filter_chip()`

Строка поиска в arcade_light — утопленное белое поле в чернильном контуре с иконками поиска и фильтра — `GoSearchBar`

Пошаговый мастер в arcade_light — каждый шаг светлый колпачок клавиши, а открытый шаг показывает свою зелёную клавишу «Next» — `GoStepper`

Таблица лидеров в arcade_light — каждая вторая строка выпуклый колпачок клавиши — `GoTable`

Нижняя панель навигации в arcade_light — иконка выбранной вкладки на синей таблетке-колпачке клавиши и красный значок-счётчик — `GoNavBar`

Выбор времени в arcade_light — часы и минуты на больших колпачках клавиш, клавиши «AM» и «PM» над циферблатом — `GoTimePicker`

Поле ввода кода в arcade_light — восемь ячеек-колпачков клавиш, та, в которую идёт ввод, в золотой окантовке — `GoCodeInput`

Барабанный выбор в arcade_light — выбранное количество на полосе-колпачке клавиши, остальные бледнеют сверху и снизу — `GoWheelPicker`

Ночью: `arcade_dark`

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

Кнопки в arcade_dark — те же яркие краски на ночной странице — `GoStyle.button()` ночью

Полосы HUD в arcade_dark — красная трубка HP, синяя MP и зелёная XP в утопленных желобках — `GoBar`

Карточки HUD в arcade_dark — тёмно-синяя середина в толстой синей рамке поверх игры — `GoStyle.hud_panel()`

Быстрые слоты в arcade_dark — колпачки клавиш со счётчиком стопки и слот на перезарядке в золотой окантовке — `GoSlot`

Виртуальный стик в arcade_dark — глянцевая площадка в чернильном кольце с четырьмя стрелками и ручкой-колпачком клавиши — `GoJoystick`

Оповещения в arcade_dark — небольшие панели в жёлтой, зелёной, красной и синей рамке — Оповещения

Плавающие кнопки действия в arcade_dark — золотые раскрашенные клавиши с бликом — `GoFab`

Календарь наград в arcade_dark — дни-колпачки клавиш, сегодняшний в золотой окантовке — `GoRewardCalendar`

Сегментированный переключатель в arcade_dark — выбранная клавиша «Day» раскрашена синим, «Week» и «Month» лавандовые, все подписи белые — Сегментированные клавиши

Вкладки в arcade_dark — раскрашенные клавиши вкладок над строками элементов из тёмно-синих колпачков клавиш — `GoTabView`

Прокручиваемый список в arcade_dark — строки элементов на тёмно-синих колпачках клавиш и ряд чипов-фильтров, выбранный синий — `GoScroll`

Переключатели и флажки в arcade_dark — зелёная глянцевая дорожка во включённом состоянии, лавандовая в выключенном — Переключатели и флажки

Чипы редкости в arcade_dark — маленькие раскрашенные плашки от «Common» до «Cursed» — `GoStyle.chip()`

Сетка слотов в arcade_dark — инвентарь из тёмно-синих колпачков клавиш с белыми иконками и счётчиками стопок — `GoSlotGrid`

Ползунок диапазона в arcade_dark — синий отрезок между двумя глянцевыми ручками в тёмном желобке — `GoRangeSlider`

Пагинация в arcade_dark — текущая страница зелёная раскрашенная клавиша — `GoPagination`

Значки в arcade_dark — коралловые плашки в чернильном контуре поверх иконок — `GoBadge`

Как устроен аркадный облик

Лицевая сторона

Каждая клавиша и панель — это GoStyleBoxArcade: чернильный контур, тело с градиентом, бортик и блик, нарисованные внутри собственного прямоугольника элемента, — клавиша сохраняет размер во всех состояниях, а нажатие лишь вдавливает её.

Подписи, которые читаются

Белая подпись с чернильным контуром читается на любой краске, от которой её отделяет контур, — WCAG считает контур частью буквы. Каждая краска сдвигается, пока её подпись не превысит 4,6:1 на любой высоте градиента.

Окна

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

Отдельная клавиша может получить свой цвет — например, оранжевая клавиша магазина в меню паузы:

menu.add_child(GoStyle.arcade_paint(GoStyle.button("Shop", _shop), Color("#FF8A1E")))

Аркада подробно → · Одно и то же всплывающее окно во всех четырнадцати обликах →

Комикс: жирные чернила и жёсткая тень

Облик комикса рисует каждую лицевую панель как кадр комикса — цвет поверхности внутри жирного чернильного контура и жёсткая сплошная тень, отброшенная вниз и вправо. comic_light рисует чёрными чернилами на странице цвета кремовой бумаги с кобальтовым основным цветом; comic_dark — кремовыми чернилами на ночной странице с жёлтым основным цветом. Каждая картинка ниже — настоящий экран gohud: тот же код, одна строка с пресетом.

GoUi.use_preset(&"comic_light")   # или &"comic_dark"

Галерея gohud в comic_light — клавиши, строки и полосы в чернильном контуре с жёсткими тенями на странице цвета кремовой бумаги — `comic_light` · галерея

Галерея gohud в comic_dark — кремовые чернила и жёлтый основной цвет на ночной странице — `comic_dark` · галерея

Нижний лист в comic_light — панель в чернильном контуре, выезжающая от нижнего края, со строками в контуре — `GoSheet`

Обучающая подсказка в comic_light — выноска в чернильном контуре, указывающая на кнопку — `GoCoachMark`

Боковая шторка в comic_dark — панель строк навигации в чернильном контуре поверх затемнённого экрана — `GoDrawer`

Поповер в comic_dark — пузырь в чернильном контуре, привязанный к кнопке, которая его открыла — `GoPopover`

Кнопки, переключатели, вкладки, ползунки, карточки, формы, таблицы, выбор даты и времени и чипы — все носят чернила; вам не нужно оформлять их по одному. Нажмите клавишу — и её тень исчезает: панель опускается на своё место, как штамп. Отключённые панели теряют тень и бледнеют, так что то, что можно нажать, отличается от того, что нельзя.

Кнопки в comic_light — основная, второстепенная, с контуром, опасная, компактная, голая и отключённая, каждая в жирном чёрном контуре с жёсткой тенью — `GoStyle.button()` — все виды

Переключатели и флажки в comic_light — дорожка и ручка в чернильном контуре, флажки в контуре с галочкой — Переключатели и флажки

Радиокнопки в comic_light — кольца в чернильном контуре, у выбранной — закрашенная точка — Радиокнопки

Вкладки в comic_light — выбранная вкладка — панель в контуре, остальные стоят на чернильной линии — `GoStyle.tabs()`

Сегментированный переключатель в comic_light — ячейки в контуре, выбранная закрашена — Сегменты-пилюли

Ползунок в comic_light — желобок в контуре, тонкая заливка акцентом и ручка в контуре — `GoStyle.slider()`

Выпадающие списки в comic_light — клавиши в контуре с шевроном — Выпадающие списки

Карточка в comic_light — белая панель в жирном контуре с жёсткой тенью — `GoStyle.card()`

Форма в comic_light — поле в контуре с подсказкой, переключатель и клавиша «Сохранить» в контуре — `GoForm`

Строки списка в comic_light — каждая строка — полоса в контуре с иконкой, подзаголовком или меткой опасности — Строки списка

Таблица в comic_light — заголовок над чернильной линией, а каждая строка счёта — полоса в контуре — `GoTable`

Выбор даты в comic_light — ячейки дней в контуре, выбранный день закрашен — `GoDatePicker`

Выбор времени в comic_light — поля часов и минут в контуре, клавиши AM и PM и циферблат — `GoTimePicker`

Пошаговый индикатор в comic_light — строки шагов в контуре, выполненный шаг с галочкой, следующий бледнее — `GoStepper`

Чипы фильтров и ввода в comic_light — пилюли в контуре, выбранный фильтр подкрашен и отмечен галочкой — Чипы фильтров

Панель навигации в comic_light — чернильная линия сверху, текущая вкладка в пилюле с контуром и значок на Alerts — `GoNavBar`

Группа ввода в comic_light — поле и его клавиша «Отправить», сваренные в одну фигуру в контуре — `GoInputGroup`

Разделённая кнопка в comic_light — действие и стрелка меню как две половинки в контуре — `GoSplitButton`

Пагинация в comic_light — текущая страница — клавиша в контуре с жёсткой тенью — `GoPagination`

Ночью: `comic_dark`

На тёмной странице чёрный контур пропал бы, поэтому comic_dark рисует его кремовым и отбрасывает бледную тень, подкрашенную теми же чернилами. Элементы HUD — быстрые слоты, полосы, стик и календарь наград — следуют тем же правилам.

Кнопки в comic_dark — кремовые контуры, жёлтый основной цвет и бледные жёсткие тени на ночной странице — `GoStyle.button()` ночью

Быстрые слоты в comic_dark — кубики в контуре со счётчиком стопки и перезарядкой, активные слоты в жёлтой окантовке — `GoSlot`

Полосы HUD в comic_dark — HP, MP и XP в желобках с кремовым контуром — `GoBar`

Виртуальный стик в comic_dark — кремовое кольцо и ручка, отбрасывающая тень — `GoJoystick`

Оповещения в comic_dark — панели информации, успеха, предупреждения и опасности в кремовых чернилах — Оповещения

Сетка слотов в comic_dark — инвентарь из кубиков в контуре — `GoSlotGrid`

Календарь наград в comic_dark — ячейки дней в контуре, полученные дни с галочкой, сегодняшний в жёлтой окантовке — `GoRewardCalendar`

Чипы редкости в comic_dark — пилюли в контуре, каждая подкрашена своим цветом — Чипы

Ползунок диапазона в comic_dark — две ручки в контуре на желобке в контуре — `GoRangeSlider`

Строка поиска в comic_dark — полоса в контуре с иконками поиска и фильтра — `GoSearchBar`

Плавающие кнопки действия в comic_dark — жёлтые клавиши в кремовых чернилах с жёсткими тенями — `GoFab`

Как устроен облик комикса

Один StyleBox на каждую панель

Каждая лицевая панель — это GoStyleBoxComic: заливка, контур и тень, нарисованные внутри собственного прямоугольника элемента. Толщину контура и размер тени он читает из GoConfig при каждой отрисовке, поэтому одна настройка меняет весь экран сразу.

Нажата — значит плоская

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

Остальное обводит скин

GoSkinComic обводит чернилами то, что рисует код: быстрые слоты, чипы, значки, аватары, уведомления, панель навигации, FAB, ячейки дат и стик, ручка которого отбрасывает тень.

У окон — плашка заголовка

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

Читается днём и ночью

Обе палитры проходят те же проверки контраста WCAG, что и любой другой пресет, включая нажатые и отключённые клавиши. Если цвет плашки оказался бы слишком близок к цвету страницы, её контур переходит на цвет страницы.

Вёрстка не меняется

Контур и тень помещаются внутри каждого элемента, а отступы остаются такими, какими их задала тема, поэтому экран, свёрстанный в другом облике, сохраняет свою раскладку — и шрифт вашего проекта.

Три настройки и один вызов

Три настройки GoConfig меняют сразу все комиксовые панели. Ничего не пересобирается — экран перерисовывается, пока вы их задаёте.

GoUi.config.comic_border_width = 2.0   # контур (dp) — по умолчанию 3
GoUi.config.comic_shadow_size = 6.0    # тень (dp) — по умолчанию 4
GoUi.config.comic_shadow = false       # нигде никаких теней

Отдельный виджет может пойти своим путём, что бы ни говорили настройки. Передайте true последним аргументом, чтобы захватить всё, что внутри него.

GoStyle.comic_shadow(skip_button, false)     # эта кнопка лежит плоско
GoStyle.comic_shadow(card, true, true)       # эта карточка и всё в ней сохраняют тень
GoStyle.comic_border(title, 5.0)             # у этого — контур потолще

Сделайте свой комикс. tools/new_theme.py inked --from comic_light копирует палитру; измените цвета бумаги, чернил и основной цвет и запустите tools/make_theme.py inked. Чернила, тень и скин идут в комплекте.

Комикс подробно → · Одно и то же всплывающее окно во всех четырнадцати обликах →

Как это выглядит в игре

Средневековый и sci-fi пресеты — лист персонажа, инвентарь и задания; формы, сетки и карточки вопросов; угловатые панели и сенсорное управление. Пресет переключается одной строкой кода.

Средневековая тема gohud — лист персонажа с полосами здоровья, маны и выносливости, сумка с быстрыми слотами и журнал заданий в кованых золотых рамках — **Средневековье** — персонаж, инвентарь и задания

Средневековая тема gohud — панель ввода с полем имени, переключателем, флажками и ползунком громкости, сетка плиток и карточка приглашения в группу с кнопками «Принять» и «Отклонить» — **Средневековье** — формы, сетки и карточки вопросов

Тема gohud в стиле sci-fi — панель сенсорного управления со срезанными углами, шестиугольный стик, переключатель «Фиксированный / Следящий / Относительный» и круглые кнопки действий — **Sci-fi** — угловатые панели и сенсорное управление

Все четырнадцать пресетов и как их переключать →

Что он берёт на себя

Больше всего времени в игровом интерфейсе съедает не форма кнопки, а всё то, что расходится между устройствами. gohud держит это расхождение в одном месте.

Каждый размер — это токен

Отступы, углы и размеры текста вызываются по имени, а не пишутся числами. Смените тему — и весь экран поедет вместе с ней.

Видимый размер ≠ размер нажатия

Кнопка закрытия выглядит на 36dp, но её область нажатия — 48dp. Там, где тесно стоящие слоты перекрываются, нажатие получает тот, чей центр ближе.

Вырезы и клавиатуры

Элементы HUD остаются внутри безопасной области, а поле ввода поднимается над виртуальной клавиатурой, когда та появляется.

«Назад» закрывает одно

Escape и кнопка «Назад» на Android закрывают только самую верхнюю поверхность. Стопка окон не исчезает целиком.

Уведомления не перехватывают ввод

Нажмите сквозь снекбар — и кнопка под ним его получит. Фокус тоже не отбирается.

Иконки запрашиваются по имени

Виджеты знают только GoIconSet.CLOSE. Смените набор — и все рисунки поменяются, не тронув ни строки кода. Иконки →

Четырнадцать образов, одна строка

GoUi.use_preset() меняет тему, скин и иконки разом — скруглённые, срезанные sci-fi, кованые средневековые рамки, компоненты приложений Material 3, детские желейные конфеты, чернила комикса или аркадные краски.

Читаемость — по измерению

Каждая тема проверена по WCAG, включая состояния кнопок и полупрозрачные панели HUD поверх чисто белого и чисто чёрного.

Всё работает и без включения плагина. Включение добавляет автозагрузку GoRuntime, которая следит за размером окна, масштабом dp и высотой клавиатуры, плюс настройки проекта для ресурса конфигурации и пресета — это удобства, а не требования.

Установка gohud

Два пути. Поручите ИИ-агенту или положите папку в проект — больше настраивать нечего.

Установка

Быстрый старт

Пять строк выводят экран с темой. Полное прохождение — на странице установки.

Быстрый старт

Смена внешнего вида — цвета и форма

Theme может перерисовать только то, что рисует движок. Скруглённые углы — единственные, какие есть у StyleBoxFlat, а стик, быстрые слоты и обучающая подсказка рисуются кодом, поэтому одна лишь тема никогда не изменит их форму. Поэтому в gohud есть пресеты: тема, скин и набор иконок, выбранные как одно целое.

GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)   # тема, скин и иконки разом

Пресет	Вид
`default_dark`	Исходный gohud — скруглённые углы, мягкий синий акцент
`default_light`	Те же формы на светлой палитре
`scifi_dark`	Срезанные углы, неоновые голубые грани и свечение, шестиугольный стик, прицельные скобки
`scifi_light`	Те же угловатые формы в яркой «чертёжной» палитре
`medieval_dark`	Тёмное железо и кожа, рамки под старое золото, заклёпки, гравированные иконки, заголовки шрифтом Cinzel
`medieval_light`	Пергамент, чернила и бронза с теми же коваными рамками
`material_light` Новое	Material 3 для экранов приложений — кнопки-пилюли, диалоги 28dp, заливные карточки, панель навигации, FAB и строка поиска приложения, Roboto
`material_dark` Новое	Те же формы Material 3 на тёмной базовой схеме
`kids_light` Новое	Коробка с игрушками для детей — клавиши-желейные конфеты с толстым контуром и бортиком, который проседает при нажатии, цвета мелков, солнечная страница
`kids_dark` Новое	Та же коробка с игрушками на ночно-синей странице
`comic_light` Новое	Кадры комикса — жирный чернильный контур и жёсткая тень на каждой панели, белые панели на странице цвета кремовой бумаги; тень, её размер и толщина контура — настройки
`comic_dark` Новое	Те же чернила на ночной странице — кремовые контуры и жёлтый основной цвет
`arcade_light` Новое	Игровой автомат — каждая клавиша раскрашена градиентом, бликом и бортиком, подпись белая с чернильным контуром; толстые панели в рамке на небесно-голубой странице, золотая лента заголовка у окон
`arcade_dark` Новое	Те же яркие клавиши на тёмно-синих панелях и ночной странице

Галерея gohud с пресетом default_dark — скруглённые углы, синий акцент — `default_dark` — скруглённые углы, мягкий синий акцент

Пресет default_light — те же формы на светлой палитре — `default_light` — те же формы, светлая палитра

Пресет scifi_dark — срезанные углы и голубой неон — `scifi_dark` — срезанные углы, голубой неон

Пресет scifi_light — те же угловатые формы в «чертёжной» палитре — `scifi_light` — те же угловатые формы, «чертёжная» палитра

Все четыре — это один и тот же экран галереи. Не отличается ни строки кода, только имя пресета. Углы кнопок, формы переключателей, строки списка и рамки полей ввода едут вместе.

Средневековая коллекция

medieval_dark соединяет железо и кожу со старым золотом; medieval_light берёт пергамент и чернила. На рамках меню есть заклёпка и небольшой угловой орнамент, а всегда видимый HUD остаётся сдержанным; 16 гравированных иконок перерисовывают названия предметов, и только заголовки и подзаголовки используют встроенный шрифт Cinzel.

medieval_dark — лист персонажа, сумка с быстрыми слотами и журнал заданий — `medieval_dark` — железо и кожа

medieval_light — те же экраны персонажа, сумки и заданий на пергаменте — `medieval_light` — пергамент и чернила

Оба снимка — это examples/medieval/medieval.tscn, собранный из стандартных виджетов. Руководство по средневековью и как сделать своё королевство →

Один и тот же экран на телефоне и на настольном компьютере

Снимки галереи сделаны на телефоне в книжной ориентации. Ниже — тот же код при 1280×800: содержимое останавливается на читаемой ширине (480dp) и центрируется, а HUD остаётся по углам. Форма обходит плавающие элементы HUD, но не двигается, если и так их не задевает: сдвиг ради сдвига увёл бы содержимое с центра широкого экрана.

default_dark при 1280x800 — содержимое по центру, HUD по углам — `default_dark` · 1280×800

scifi_dark при 1280x800 — та же раскладка со срезанными панелями и неоном — `scifi_dark` · 1280×800

Тот же лист, другой вид

Нижний лист в default_dark — Обычный — скруглённая карточка, закреплённый ряд поиска и подвал

Нижний лист в scifi_dark — неоновая акцентная грань по верху — Sci-fi — акцентная грань сверху, срезанные углы, свечение

Выберите пресет в Project Settings → gohud → Theme → Preset или задайте GoConfig.preset. Явно заполненные theme, skin или icons берут верх над пресетом, так что можно взять пресет и переопределить лишь одно из трёх.

Новая тема — это один файл JSON. new_theme.py kingdom --from medieval_dark пишет палитру, в которой расписано каждое унаследованное значение; make_theme.py kingdom собирает тему, графику элементов управления и регуляторы скина, после чего пресет появляется в списке выбора. Все настройки и регуляторы →

Скины — там, куда Theme не дотягивается

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

class_name MySkin extends GoSkin

func slot_box(accent: Color, lit: bool) -> StyleBox:
    var box := GoStyleBoxCut.new()
    box.bg_color = accent
    box.cut = 6.0
    box.edge_color = accent
    return box

Класс	Какие формы умеет
`GoStyleBoxCut`	Диагонально срезанные углы (фаска), одна утолщённая акцентная грань, внешнее свечение
`GoStyleBoxBracket`	Только угловые метки, без замыкания содержимого в рамку
`GoStyleBoxMedieval`	Кованая рамка с заклёпками, угловой гравировкой, фасочным бликом и фактурой материала
`GoStyleBoxJelly`	Желейная конфета — толстый контур, плотный бортик, который проседает при нажатии, тело светлее сверху и белый блик
`GoStyleBoxComic`	Кадр комикса — жирный чернильный контур и жёсткая отбрасываемая тень; размер обоих задаёт `GoConfig` прямо во время игры
`GoStyleBoxArcade`	Аркадная клавиша или панель — тело с градиентом, белый блик, бортик, который проседает при нажатии, и чернильный контур; у панели вдобавок толстая цветная рамка вокруг светлой середины

Все шесть сериализуются в ресурс Theme — именно это и позволяет теме менять форму, а не только цвет. GoSkinSciFi, GoSkinMedieval, GoSkinMaterial, GoSkinKids, GoSkinComic и GoSkinArcade — подклассы, идущие в комплекте.

Быстрые слоты, стик и чип в исполнении каждого скина из комплекта — обычного, детского, Material, средневекового и sci-fi — Что рисует скин — обычный, детский, Material, средневековый, sci-fi

Быстрые слоты, стик и чип в исполнении скина комикса — чернильные контуры и жёсткие тени — …и скин комикса

Быстрые слоты, стик и чип в исполнении аркадного скина — глянцевые колпачки клавиш и площадка с четырьмя стрелками — …и аркадный скин

GoStyle.box() всегда возвращает StyleBoxFlat, потому что вызывающий код получает его и правит bg_color или corner_radius. Если нестандартная форма должна уцелеть, используйте GoStyle.surface().

Виджеты

Все части в одной таблице. Каждая подробно → · Каждый виджет с картинкой → · Всплывающие окна и диалоги — полное руководство →

Класс	Базовый	Что делает
`GoSurface`	Control	Оболочка плавающей карточки — размещение по центру, снизу или у элемента, закреплённые шапка и подвал, прокручиваемое тело, изменение размера перетаскиванием
`GoSheet`	CanvasLayer	Страницы, поднимающиеся снизу, на собственном слое, поэтому они лежат поверх HUD
`GoDialogs`	Node	Подтверждения и оповещения, которые можно `await`; `destructive` — для необратимых действий
`GoForm`	MarginContainer	Формы с ограниченной шириной, обходящие виртуальную клавиатуру и, с `avoid_hud`, сам HUD
`GoScroll`	ScrollContainer	Сенсорная прокрутка; полоса прокрутки прячется во внутренние отступы карточки
`GoNotice`	PanelContainer	Снекбар, который не берёт ни ввод, ни фокус
`GoPromptCard`	PanelContainer	Вопрос, который не блокирует игру
`GoCoachMark`	Control	Обучающий тур, указывающий на настоящие элементы управления; нажатие на цель двигает тур дальше
`GoHudAnchor`	Control	Прикрепляет элементы HUD к одной из девяти точек безопасной области
`GoBar`	Control	Полосы здоровья, маны и опыта с плавным изменением
`GoSlot`	Button	Быстрый слот — иконка, количество, перезарядка и горячая клавиша на одной лицевой панели
`GoJoystick`	Control	Виртуальный стик в фиксированном, следящем или относительном режиме
`GoIconButton`	Button	Выглядит маленькой, нажимается большой
`GoStyle`	статический	Кнопки, строки списка, поля ввода, чипы, таблицы, вкладки и прочее, сделанные единым образом

Ожидание, сообщения, счётчики

Класс	Базовый	Что делает
`GoSnackbar`	Node	сообщение, которое само встаёт на место
`GoSpinner`	Control	ожидание без видимого конца
`GoBadge`	PanelContainer	точка непрочитанного, метка НОВОЕ, 99+

Формы и списки

Класс	Базовый	Что делает
`GoField`	VBoxContainer	строка, которая может быть неверной
`GoInputGroup`	HBoxContainer	поле ввода, сваренное со своей кнопкой
`GoCombobox`	Button	выбор с поиском
`GoCodeInput`	VBoxContainer	купоны и подарочные коды
`GoTable`	VBoxContainer	сортируемые заголовки, выбираемые строки
`GoPagination`	HBoxContainer	страницы или строка «Ещё»

Формы, которые играм действительно нужны

Класс	Базовый	Что делает
`GoRewardCalendar`	VBoxContainer	ежедневный вход
`GoRadar` · `GoDonut`	Control	характеристики с одного взгляда
`GoCarousel`	VBoxContainer	баннеры и выбор персонажа
`GoKbd`	HBoxContainer	подсказки клавиш, которые не врут

Поверх экрана

Класс	Базовый	Что делает
`GoDrawer`	CanvasLayer	боковая панель
`GoPopover`	RefCounted	карточка с привязкой
`GoContextMenu`	RefCounted	долгое нажатие и правый клик
`GoConsole`	CanvasLayer	консоль разработчика

Go HUD Skill

В gohud входит ИИ-навык: весь API, готовые шаблоны и запуск предпросмотра. Вставьте один блок в своего агента — он установит gohud и будет знать, как им пользоваться.

Go HUD Skill

Читаемость измеряют, а не прикидывают на глаз

«Красиво» — дело вкуса; «читаемо» можно измерить. Бледно-серый текст отлично смотрится на хорошем мониторе и исчезает на телефоне при дневном свете — выбор на глаз рано или поздно приводит именно к этому.

python3 addons/gohud/tools/check_contrast.py

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

Поэтому цвета текста выводятся, а не выбираются: сборщик берёт значение из палитры как отправную точку и поднимает его светлоту, пока оно не пройдёт порог на всех поверхностях, где может оказаться. Измените палитру — и контраст пойдёт следом. Правила и ловушки за ними →

Проверки, релизы и этот сайт

Одна точка входа запускает все проверки; каждая часть видит то, чего не видят остальные.

bash addons/gohud/tools/check_all.sh

Проверка	Что ловит
`run_tests.sh` на четырёх размерах экрана	Поведение и раскладку виджетов, позиции в RTL, фокус с клавиатуры, контраст скина во время работы, все пресеты
`new_project_check.sh`	Скрытые зависимости от проекта-хозяина; с `--zip` — релиз в том виде, в каком он поставляется, с `--export` — сборку для Web
`check_contrast.py`	Контраст по WCAG в каждом файле темы, включая состояния кнопок и полупрозрачные панели
`check_generated.py` · `check_scaffold.sh`	Сгенерированные темы совпадают со своими палитрами; одноразовая тема собирается и проходит проверку контраста
`check_package.py`	Версия из package.json, перенос записей в журнале изменений и содержимое ZIP — во временных копиях
`check_site.py`	Ссылки этого сайта, якоря, язык страницы, глоссарий и таблицы регуляторов

Последний записанный прогон — 2026-09-13, Godot 4.7.2, macOS, рендерер Compatibility. 438 из 438 проверок на 390×844, 844×390, 768×1024 и 1280×800 в пустом проекте; снова 438 из 438 с автозагрузкой GoRuntime; экспорт для Web; ноль провалов по контрасту в шести темах. Физические устройства на Android или iOS в этот прогон не входили.

Версии релизов

cat addons/gohud/package.json       # { "version": "1.1.0" }
bash addons/gohud/tools/release.sh  # все проверки → ZIP → этот ZIP в пустом проекте
bash addons/gohud/tools/package.sh  # 1.1.0 → builds/1.1.0/gohud-1.1.0.zip

Версия — та, что записана в package.json: упаковка её никогда не повышает. Чтобы выпустить новую версию, сначала измените это число. Успешный прогон выставляет это значение в plugin.cfg и GoUi.VERSION, а при первой упаковке этой версии переносит заметки из раздела Unreleased в CHANGELOG.md в датированную запись. Повторная упаковка той же версии заново собирает её ZIP и заменяет прежний. Неудачный прогон не меняет ничего. В ZIP не попадают этот сайт, тесты, инструменты и package.json.

Этот сайт

python3 addons/gohud/tools/make_site.py            # глоссарий и таблицы регуляторов скина, порождённые из исходников
python3 addons/gohud/tools/check_site.py           # ссылки, якоря, язык, глоссарий, порождённые таблицы
bash addons/gohud/tools/site_shots.sh /tmp/shots   # снимки каждой страницы для настольного экрана и телефона

Страницы — это обычный HTML в www/: английский в корне, корейский в ko/. Рабочий процесс GitHub Actions публикует эту папку как корень сайта.

Игровой интерфейс, которым управляет один ресурс

Новое: аркада, комикс, Material 3 и облик для детей

Material 3 — для экранов приложений

Детский облик — коробка с игрушками

Комикс — жирные чернила

Аркада — раскрашенные клавиши

Аркада: раскрашенные клавиши и толстые панели

Каждая клавиша раскрашена

Ночью: arcade_dark

Как устроен аркадный облик

Лицевая сторона

Подписи, которые читаются

Окна

Комикс: жирные чернила и жёсткая тень

Каждый виджет — в чернилах

Ночью: comic_dark

Как устроен облик комикса

Один StyleBox на каждую панель

Нажата — значит плоская

Остальное обводит скин

У окон — плашка заголовка

Читается днём и ночью

Вёрстка не меняется

Три настройки и один вызов

Как это выглядит в игре

Что он берёт на себя

Каждый размер — это токен

Видимый размер ≠ размер нажатия

Вырезы и клавиатуры

«Назад» закрывает одно

Уведомления не перехватывают ввод

Иконки запрашиваются по имени

Четырнадцать образов, одна строка

Читаемость — по измерению

Установка gohud

Быстрый старт

Смена внешнего вида — цвета и форма

Средневековая коллекция

Один и тот же экран на телефоне и на настольном компьютере

Тот же лист, другой вид

Скины — там, куда Theme не дотягивается

Виджеты

Ожидание, сообщения, счётчики

Формы и списки

Формы, которые играм действительно нужны

Поверх экрана

Go HUD Skill

Читаемость измеряют, а не прикидывают на глаз

Проверки, релизы и этот сайт

Версии релизов

Этот сайт

Ночью: `arcade_dark`

Ночью: `comic_dark`