gohud — набір HUD та UI для Godot 4

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

До стандартного, сай-фай і середньовічного долучилися чотири нові родини — тепер чотирнадцять вбудованих образів, кожен у темному та світлому варіанті. Кожен віджет, спливне вікно й елемент 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 — зелена Play, синя Details, біла клавіша з контуром, коралова Delete, червона Delete forever, лавандова компактна клавіша й сіра вимкнена, кожна розфарбована градієнтом, із відблиском і бортиком у темно-синьому контурі — `GoStyle.button()`

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

Сегментований перемикач в arcade_light — окремі розфарбовані клавіші, вибрана синя й натиснута — Сегментовані клавіші

Перемикачі й прапорці в arcade_light — зелена глянцева доріжка, коли ввімкнено, лавандова, коли вимкнено, і зелений прапорець — Перемикачі й прапорці

Картки в arcade_light — світлі заглибини в товстих синіх рамках із відблиском і бортиком — `GoStyle.card()`

Форма в arcade_light — заглиблене біле поле, перемикач і зелена клавіша Save — `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. Чорнило, тінь і скін ідуть у комплекті.

Комікс докладно → · Те саме спливне вікно в усіх чотирнадцяти образах →

Який вигляд це має у грі

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

Середньовічна тема gohud — картка персонажа зі смугами здоров'я, мани та витривалості, торба швидких слотів і журнал завдань у кованих золотих рамах — **Середньовіччя** — персонаж, інвентар і завдання

Середньовічна тема gohud — панель вводу з полем імені, перемикачем, прапорцями й повзунком гучності, сітка плиток і картка-запит про вступ до загону з кнопками «Прийняти» та «Відхилити» — **Середньовіччя** — форми, сітки та картки-запити

Сай-фай тема gohud — панель сенсорного керування зі зрізаними кутами, шестикутним стиком, перемикачем «Фіксований / Слідом / Відносний» і круглими кнопками дій — **Сай-фай** — кутасті панелі й сенсорне керування

Усі чотирнадцять пресетів і як їх перемикати →

Що він знімає з ваших плечей

Найбільше часу в ігровому інтерфейсі з'їдає не форма кнопки — а все те, що розповзається між пристроями. gohud тримає це розповзання в одному місці.

Кожен розмір — це токен

Відступи, кути й розміри тексту звуться на ім'я, а не пишуться числами. Змініть тему — і весь екран рушить разом із нею.

Видимий розмір ≠ розмір натискання

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

Вирізи й клавіатури

Частини HUD сидять усередині безпечної зони, а поле вводу підіймається над віртуальною клавіатурою, коли та з'являється.

«Назад» закриває одне

Escape і апаратна кнопка «Назад» на Android закривають лише найверхнішу поверхню. Складені одне на одному вікна не зникають разом.

Сповіщення не крадуть ввід

Натисніть крізь снекбар — і кнопка під ним отримає натискання. Фокус теж не забирається.

Іконки запитують на ім'я

Віджети знають лише GoIconSet.CLOSE. Замініть набір — і всі малюнки зміняться, не чіпаючи жодного рядка коду. Іконки →

Чотирнадцять образів, один рядок

GoUi.use_preset() міняє тему, скін та іконки разом — заокруглені, зрізані сай-фай, ковані середньовічні рами, компоненти застосунків Material 3, дитячі желейні цукерки, чорнило коміксу чи аркадна фарба.

Розбірливість — виміряна

Кожна тема перевіряється за WCAG, разом зі станами кнопок і напівпрозорими панелями HUD над чисто білим і чисто чорним тлом.

Усе працює й без увімкнення плагіна. Увімкнення додає автозавантаження GoRuntime, яке стежить за розміром вікна, масштабом dp і висотою клавіатури, а також параметри проєкту для ресурсу налаштувань і пресету — це зручності, а не вимоги.

Встановлення gohud

Два шляхи. Доручіть ШІ-агенту або покладіть теку у свій проєкт — більше нічого налаштовувати.

Встановлення

Швидкий старт

П'ять рядків виводять екран з темою. Повний шлях — на сторінці встановлення.

Швидкий старт

Змініть образ — кольори і форму

Тема може перестилізувати лише те, що малює рушій. Заокруглені кути — єдині, які має 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 — неоновий акцентний край згори — Сай-фай — акцентний край згори, зрізані кути, сяйво

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

Нова тема — це один файл JSON. new_theme.py kingdom --from medieval_dark пише палітру, у якій розписано кожне успадковане значення; make_theme.py kingdom збирає тему, її графіку для контролів і регулятори скіна, і пресет з'являється у списку вибору. Кожен параметр і регулятор →

Скіни — там, куди темі не дістатися

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

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, середньовічного та сай-фай — Що малює скін — стандартний, дитячий, Material, середньовічний, сай-фай

Швидкі слоти, стик і чип у виконанні скіна коміксу — чорнильні контури й жорсткі тіні — …і скін коміксу

Швидкі слоти, стик і чип у виконанні аркадного скіна — глянцеві ковпачки клавіш і майданчик із чотирма стрілками — …і аркадний скін

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`	static	Кнопки, рядки списків, поля вводу, чипи, таблиці, вкладки та інше — зроблені одним послідовним способом

Очікування, сповіщення, лічильники

Клас	Основа	Що робить
`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` — вебзбірку
`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; вебекспорт; жодного провалу за контрастом у всіх шести темах. Фізичні пристрої на 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

Швидкий старт

Змініть образ — кольори і форму

Середньовічна колекція

Той самий екран на телефоні й на комп'ютері

Той самий аркуш, інший образ

Скіни — там, куди темі не дістатися

Віджети

Очікування, сповіщення, лічильники

Форми та списки

Форми, якими ігри справді користуються

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

Go HUD Skill

Розбірливість вимірюють, а не оцінюють на око

Перевірки, релізи й цей сайт

Версії релізів

Цей сайт

Уночі: `arcade_dark`

Уночі: `comic_dark`