gohud — zestaw HUD i UI dla Godota 4

Nowość: arcade, komiks, Material 3 i wygląd dla dzieci

Do domyślnego, sci-fi i średniowiecznego dołączają cztery nowe rodziny — teraz to czternaście wbudowanych wyglądów, każdy w wersji ciemnej i jasnej. Każdy widżet, każde okno i każdy element HUD przyjmuje je bez zmian w twoim kodzie: zmień preset, a cały ekran pójdzie za nim.

Galeria gohud w material_light — przyciski-pigułki, wypełnione karty i kolory Material 3 — `material_light`

Galeria gohud w material_dark — te same kształty Material 3 na ciemnej bazie — `material_dark`

Galeria gohud w kids_light — pękate galaretkowe przyciski w kolorach kredek na słonecznej stronie — `kids_light`

Galeria gohud w kids_dark — to samo pudełko z zabawkami na nocnoniebieskiej stronie — `kids_dark`

Galeria gohud w comic_light — grube obrysy tuszem i twarde cienie na stronie w kolorze kremowego papieru — `comic_light`

Galeria gohud w comic_dark — kremowe obrysy i żółty kolor główny na nocnej stronie — `comic_dark`

Galeria gohud w arcade_light — malowane klawisze z gradientem i połyskiem oraz gruba plansza HUD w niebieskiej ramie na błękitnej stronie — `arcade_light`

Galeria gohud w arcade_dark — te same jaskrawe klawisze na nocnej stronie — `arcade_dark`

Material 3 — dla ekranów aplikacji

Material 3 Expressive, zmierzony według oficjalnych tokenów M3: przyciski-pigułki z płytką 40dp wewnątrz obszaru dotyku 48dp, okna dialogowe i arkusze 28dp, wypełnione karty, pola z obrysem i suwak Expressive. Komponenty aplikacji — pasek nawigacji, górny pasek aplikacji, FAB, pasek wyszukiwania, chipy, postęp i wybór daty — idą za tokenami komponentów M3, a tytuły są składane dołączonym Roboto. Do sklepów, ustawień, skrzynek odbiorczych i każdego ekranu, który ma sprawiać wrażenie aplikacji.

Kids — pudełko z zabawkami

Zrobiony dla dzieci: każdy klawisz, wiersz i panel to galaretkowy cukierek z grubym obrysem i solidną krawędzią, która zapada się po naciśnięciu, a każdy rodzaj kontrolki ma swój kolor kredki. Szybkie sloty to cukierkowe klocki, plakietki to naklejki, joystick to tęcza, okna dostają słoneczną wstęgę tytułu i okrągły cukierkowy przycisk zamknięcia, a naciśnięty przycisk zgniata się jak galaretka. Rozmiary i czcionka twojego projektu zostają dokładnie takie, jak były.

Comic — gruby tusz

Każda powierzchnia to kadr z komiksu: kolor powierzchni wewnątrz grubego obrysu tuszem, a za nim twardy cień, który znika po naciśnięciu. Jedno ustawienie włącza lub wyłącza wszystkie cienie, dwa kolejne ustawiają grubość obrysu i rozmiar cienia, a jedno wywołanie robi to samo dla pojedynczego widżetu. Okna dostają żółte pole tytułu.

Arcade — malowane klawisze

Każdy klawisz jest malowany — gradient, biały połysk i krawędź, która zapada się po naciśnięciu, w granatowym obrysie tuszem — i opisany białymi literami z obrysem tuszem: zielony do gry, niebieski do całej reszty, czerwony do usuwania. Plansze są grube, to kolorowa rama wokół jasnego wnętrza, a okna dostają złotą wstęgę tytułu i okrągły czerwony klawisz zamknięcia.

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

Material 3 szczegółowo → · Kids szczegółowo → · Arcade, widżet po widżecie ↓ · Comic, widżet po widżecie ↓ · To samo okno we wszystkich czternastu wyglądach →

Arcade: malowane klawisze i grube plansze

Najnowszy wygląd ubiera każdy ekran jak automat do gier. Każdy klawisz jest malowany — gradient od jasnej góry do głębszego dołu, biała smuga połysku i krawędź, która zapada się po naciśnięciu, a wszystko w granatowym obrysie tuszem — a jego etykieta jest biała z obrysem tuszem. Każda plansza jest gruba: kolorowa rama z własnym połyskiem wokół jasnego wnętrza. arcade_light kładzie białe plansze na błękitnej stronie; arcade_dark kładzie granatowe plansze na nocnej stronie. Każdy obrazek poniżej to prawdziwy ekran gohud — ten sam kod, jedna linijka z presetem.

GoUi.use_preset(&"arcade_light")   # albo &"arcade_dark"

Galeria gohud w arcade_light — zielone, niebieskie, czerwone i lawendowe malowane klawisze oraz plansza HUD w niebieskiej ramie na błękitnej stronie — `arcade_light` · galeria

Dolny arkusz w arcade_light — gruba plansza w ramie wysuwająca się od dolnej krawędzi, z wierszami w kształcie nasadek klawiszy — `GoSheet`

Wskazówka instruktażowa w arcade_light — dymek w ramie wskazujący klawisz — `GoCoachMark`

Boczna szuflada w arcade_dark — granatowa plansza z wierszami nawigacji nad przyciemnionym ekranem — `GoDrawer`

Dymek w arcade_dark — dymek w ramie zakotwiczony przy klawiszu, który go otworzył — `GoPopover`

Alert w arcade_dark — złota wstęga Level up!, czerwony klawisz zamknięcia i zielony klawisz Great na granatowej planszy w niebieskiej ramie — `GoDialogs.alert()`

Snackbar w arcade_light — biała plansza w brązowej ramie wzdłuż dolnej krawędzi z akcją Undo — `GoSnackbar`

Każdy klawisz malowany

Przyciski w arcade_light — zielony Graj, niebieski Szczegóły, biały klawisz z obrysem, koralowy Usuń, czerwony Usuń na zawsze, lawendowy klawisz kompaktowy i szary wyłączony klawisz, każdy pomalowany gradientem, połyskiem i krawędzią w granatowym obrysie — `GoStyle.button()`

Karty zakładek w arcade_light — wybrana zakładka to niebieski malowany klawisz, pozostałe to lawendowe klawisze — `GoStyle.tabs()`

Kontrolka segmentowa w arcade_light — osobne malowane klawisze, wybrany niebieski i wciśnięty — Klawisze segmentowe

Przełączniki i pola wyboru w arcade_light — zielony błyszczący tor po włączeniu, lawendowy po wyłączeniu, zielone pole z zaznaczeniem — Przełączniki i pola wyboru

Karty w arcade_light — jasne wnętrza w grubych niebieskich ramach z połyskiem i krawędzią — `GoStyle.card()`

Formularz w arcade_light — wklęsłe białe pole, przełącznik i zielony klawisz Zapisz — `GoForm`

Siatka wyboru w arcade_light — nasadki klawiszy, wybrana ze złotą obwódką na zielonym tle — `GoStyle.choice_grid()`

Siatka slotów w arcade_light — ekwipunek z błyszczących nasadek klawiszy z liczbą sztuk — `GoSlotGrid`

Wiersze listy w arcade_light — każdy wiersz to jasna nasadka klawisza z ikoną — Wiersze listy

Wybór daty w arcade_light — dni jako nasadki klawiszy, wybrany dzień to malowany klawisz — `GoDatePicker`

Suwak w arcade_light — niebieska błyszcząca rurka w rowku z tuszu i okrągła gałka w kształcie nasadki klawisza — `GoStyle.slider()`

Grupa przycisków opcji w arcade_light — okrągłe nasadki klawiszy, wybrana z niebieską kropką — `GoStyle.radio_group()`

Chipy filtrów w arcade_light — chipy w kształcie nasadek klawiszy, wybrany zabarwiony na niebiesko z zaznaczeniem, oraz chipy do usunięcia z krzyżykiem — `GoStyle.filter_chip()`

Pasek wyszukiwania w arcade_light — wklęsłe białe pole w obrysie tuszu z ikoną wyszukiwania i ikoną filtra — `GoSearchBar`

Kreator kroków w arcade_light — każdy krok to jasna nasadka klawisza, otwarty krok pokazuje zielony klawisz Next — `GoStepper`

Tabela wyników w arcade_light — co drugi wiersz to wypukła nasadka klawisza — `GoTable`

Dolny pasek nawigacji w arcade_light — ikona wybranej zakładki na niebieskiej pigułce w kształcie nasadki klawisza, czerwona plakietka z liczbą — `GoNavBar`

Wybór godziny w arcade_light — godzina i minuty na dużych nasadkach klawiszy, klawisze AM i PM nad tarczą zegara — `GoTimePicker`

Pole kodu w arcade_light — osiem komórek w kształcie nasadek klawiszy, ta, w której trwa wpisywanie, w złotej obwódce — `GoCodeInput`

Wybór z kółka w arcade_light — wybrana ilość na pasie w kształcie nasadki klawisza, pozostałe blakną powyżej i poniżej — `GoWheelPicker`

Nocą: `arcade_dark`

Na ciemnej stronie tusz staje się samą stroną, dużo głębszą, a farby zostają tak samo jaskrawe.

Przyciski w arcade_dark — te same jaskrawe farby na nocnej stronie — `GoStyle.button()` nocą

Paski HUD w arcade_dark — czerwona rurka HP, niebieska MP i zielona XP we wklęsłych rowkach — `GoBar`

Karty HUD w arcade_dark — granatowe wnętrze w grubej niebieskiej ramie nad grą — `GoStyle.hud_panel()`

Szybkie sloty w arcade_dark — nasadki klawiszy z liczbą sztuk, odnawiający się slot w złotej obwódce — `GoSlot`

Wirtualny joystick w arcade_dark — błyszczący pad w pierścieniu tuszu z czterema strzałkami i gałką w kształcie nasadki klawisza — `GoJoystick`

Alerty w arcade_dark — małe plansze w żółtej, zielonej, czerwonej i niebieskiej ramie — Alerty

Pływające przyciski akcji w arcade_dark — złote malowane klawisze z połyskiem — `GoFab`

Kalendarz nagród w arcade_dark — dni jako nasadki klawiszy, dzisiejszy w złotej obwódce — `GoRewardCalendar`

Kontrolka segmentowa w arcade_dark — wybrany klawisz Day pomalowany na niebiesko, Week i Month lawendowe, wszystkie etykiety białe — Klawisze segmentowe

Widok zakładek w arcade_dark — malowane klawisze zakładek nad wierszami elementów, które są granatowymi nasadkami klawiszy — `GoTabView`

Przewijana lista w arcade_dark — wiersze elementów na granatowych nasadkach klawiszy i rząd chipów filtrów, wybrany niebieski — `GoScroll`

Przełączniki i pola wyboru w arcade_dark — zielony błyszczący tor po włączeniu, lawendowy po wyłączeniu — Przełączniki i pola wyboru

Chipy rzadkości w arcade_dark — małe malowane tabliczki od Common do Cursed — `GoStyle.chip()`

Siatka slotów w arcade_dark — ekwipunek z granatowych nasadek klawiszy z białymi ikonami i liczbą sztuk — `GoSlotGrid`

Suwak zakresu w arcade_dark — niebieski odcinek między dwiema błyszczącymi gałkami w ciemnym rowku — `GoRangeSlider`

Paginacja w arcade_dark — bieżąca strona to zielony malowany klawisz — `GoPagination`

Plakietki w arcade_dark — koralowe tabliczki w obrysie tuszu nad ikonami — `GoBadge`

Jak działa wygląd arcade

Powierzchnia

Każdy klawisz i każda plansza to GoStyleBoxArcade: obrys tuszem, korpus z gradientem, krawędź i połysk, rysowane wewnątrz własnego prostokąta kontrolki — klawisz zachowuje rozmiar w każdym stanie, a naciśnięcie tylko go wciska.

Czytelne etykiety

Biała etykieta z obrysem tuszem jest czytelna na każdej farbie, od której obrys ją odcina — WCAG liczy obrys jako część litery. Każda farba jest przesuwana, aż jej etykieta przekroczy 4,6:1 na każdej wysokości gradientu.

Okna

Tytuł okna leży na złotej wstędze, białymi literami z obrysem tuszem, obok okrągłego czerwonego klawisza zamknięcia. Okna dialogowe, arkusze, szuflady i dymki to grube plansze w ramie.

Jeden klawisz może dostać własny kolor — pomarańczowy klawisz sklepu w menu pauzy:

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

Arcade szczegółowo → · To samo okno we wszystkich czternastu wyglądach →

Komiks: gruby tusz i twardy cień

Wygląd komiksowy rysuje każdą powierzchnię jak kadr z komiksu — kolor powierzchni wewnątrz grubego obrysu tuszem, z twardym, pełnym cieniem rzuconym w dół i w prawo. comic_light rysuje czarnym tuszem na stronie w kolorze kremowego papieru z kobaltowym kolorem głównym; comic_dark rysuje kremowym tuszem na nocnej stronie z żółtym kolorem głównym. Każdy obrazek poniżej to prawdziwy ekran gohud — ten sam kod, jedna linijka z presetem.

GoUi.use_preset(&"comic_light")   # albo &"comic_dark"

Galeria gohud w comic_light — klawisze, wiersze i paski obrysowane tuszem, z twardymi cieniami na stronie w kolorze kremowego papieru — `comic_light` · galeria

Galeria gohud w comic_dark — kremowy tusz i żółty kolor główny na nocnej stronie — `comic_dark` · galeria

Arkusz dolny w comic_light — panel obrysowany tuszem, wysuwający się od dolnej krawędzi, z obrysowanymi wierszami — `GoSheet`

Wskazówka instruktażowa w comic_light — obrysowany tuszem dymek wskazujący przycisk — `GoCoachMark`

Szuflada boczna w comic_dark — obrysowany tuszem panel z wierszami nawigacji nad przyciemnionym ekranem — `GoDrawer`

Popover w comic_dark — obrysowany tuszem dymek zakotwiczony przy przycisku, który go otworzył — `GoPopover`

Przyciski, przełączniki, karty zakładek, suwaki, karty, formularze, tabele, selektory i chipy — wszystkie noszą tusz; nie stylizujesz ich po kolei. Naciśnij klawisz, a jego cień znika: powierzchnia zapada się na swoje miejsce jak pieczątka. Wyłączone powierzchnie tracą cień i blakną, więc to, co da się nacisnąć, odróżnia się od tego, czego nie da się nacisnąć.

Przyciski w comic_light — klawisze główny, drugorzędny, z obrysem, niebezpieczny, kompaktowy, goły i wyłączony, każdy w grubym czarnym obrysie z twardym cieniem — `GoStyle.button()` — każdy rodzaj

Przełączniki i pola wyboru w comic_light — obrysowany tor i gałka, obrysowane pola z ptaszkiem — Przełączniki i pola wyboru

Przyciski opcji w comic_light — obrysowane tuszem kółka, wybrane z wypełnioną kropką — Przyciski opcji

Karty zakładek w comic_light — wybrana karta to obrysowany panel, pozostałe stoją na linii tuszu — `GoStyle.tabs()`

Kontrolka segmentowa w comic_light — obrysowane komórki, wybrana wypełniona — Pigułki segmentowe

Suwak w comic_light — obrysowany rowek, cienkie wypełnienie akcentem i obrysowany uchwyt — `GoStyle.slider()`

Listy rozwijane w comic_light — obrysowane klawisze z szewronem — Listy rozwijane

Karta w comic_light — biały panel w grubym obrysie z twardym cieniem — `GoStyle.card()`

Formularz w comic_light — obrysowane pole z podpowiedzią, przełącznik i obrysowany klawisz Zapisz — `GoForm`

Wiersze listy w comic_light — każdy wiersz to obrysowany pasek z ikoną, podtytułem albo etykietą niebezpieczeństwa — Wiersze listy

Tabela w comic_light — nagłówek nad linią tuszu, a każdy wiersz wyników to obrysowany pasek — `GoTable`

Wybór daty w comic_light — obrysowane komórki dni, wybrany dzień wypełniony — `GoDatePicker`

Wybór godziny w comic_light — obrysowane pola godzin i minut, klawisze AM i PM oraz tarcza zegara — `GoTimePicker`

Kroki w comic_light — obrysowane wiersze kroków, ukończony krok z ptaszkiem, nadchodzący wyblakły — `GoStepper`

Chipy filtrów i wprowadzania w comic_light — obrysowane pigułki, wybrany filtr podbarwiony i z ptaszkiem — Chipy filtrów

Pasek nawigacji w comic_light — linia tuszu u góry, bieżąca karta w obrysowanej pigułce i plakietka na Alerts — `GoNavBar`

Grupa pól w comic_light — pole i jego klawisz Wyślij zespawane w jeden obrysowany kształt — `GoInputGroup`

Przycisk dzielony w comic_light — akcja i strzałka menu jako dwie obrysowane połówki — `GoSplitButton`

Paginacja w comic_light — bieżąca strona to obrysowany klawisz z twardym cieniem — `GoPagination`

Nocą: `comic_dark`

Na ciemnej stronie czarny obrys by zniknął, więc comic_dark rysuje go na kremowo i rzuca delikatny cień zabarwiony tym samym tuszem. Elementy HUD — szybkie sloty, paski, joystick i kalendarz nagród — idą za tymi samymi zasadami.

Przyciski w comic_dark — kremowe obrysy, żółty kolor główny i delikatne twarde cienie na nocnej stronie — `GoStyle.button()` nocą

Szybkie sloty w comic_dark — obrysowane klocki z liczbą sztuk i czasem odnowienia, podświetlone sloty w żółtej obwódce — `GoSlot`

Paski HUD w comic_dark — HP, MP i XP w rowkach obrysowanych kremowym tuszem — `GoBar`

Wirtualny joystick w comic_dark — kremowy pierścień i gałka rzucająca cień — `GoJoystick`

Alerty w comic_dark — panele informacji, sukcesu, ostrzeżenia i niebezpieczeństwa w kremowym tuszu — Alerty

Siatka slotów w comic_dark — ekwipunek z obrysowanych klocków — `GoSlotGrid`

Kalendarz nagród w comic_dark — obrysowane komórki dni, odebrane dni z ptaszkiem, a dzisiejszy w żółtej obwódce — `GoRewardCalendar`

Chipy rzadkości w comic_dark — obrysowane pigułki, każda podbarwiona własnym kolorem — Chipy

Suwak zakresu w comic_dark — dwa obrysowane uchwyty na obrysowanym rowku — `GoRangeSlider`

Pasek wyszukiwania w comic_dark — obrysowany pasek z ikonami wyszukiwania i filtra — `GoSearchBar`

Pływające przyciski akcji w comic_dark — żółte klawisze w kremowym tuszu z twardymi cieniami — `GoFab`

Jak działa wygląd komiksowy

Jeden StyleBox dla każdej powierzchni

Każda powierzchnia to GoStyleBoxComic: wypełnienie, obrys i cień, rysowane wewnątrz własnego prostokąta kontrolki. Przy każdym rysowaniu odczytuje grubość obrysu i rozmiar cienia z GoConfig, więc jedno ustawienie zmienia cały ekran naraz.

Naciśnięty znaczy płaski

Naciśnięty klawisz gubi cień i wsuwa się na swoje miejsce. Najechanie zostawia cień; fokus dodaje wewnętrzny pierścień tuszu, który nigdy nie zasłania obrysu; wyłączone powierzchnie tracą cień i blakną.

Resztę obrysowuje skórka

GoSkinComic obrysowuje tuszem to, co rysuje kod: szybkie sloty, chipy, plakietki, awatary, powiadomienia, pasek nawigacji, FAB, komórki dat i joystick, którego gałka rzuca cień.

Okna dostają pole tytułu

Tytuł okna leży na żółtym polu, jak ramka narratora w komiksie, obok okrągłego obrysowanego przycisku zamknięcia. Okna dialogowe, arkusze, szuflady i popovery to nieprzezroczyste panele w tuszu.

Czytelny w dzień i w nocy

Obie palety przechodzą te same testy kontrastu WCAG co każdy inny preset, łącznie z klawiszami naciśniętymi i wyłączonymi. Gdy kolor pola tytułu byłby zbyt bliski kolorowi strony, jego obrys przechodzi na kolor strony.

Bez zmian w układzie

Obrys i cień mieszczą się wewnątrz każdej kontrolki, a wypełnienie wewnętrzne zostaje takie, jakie dał motyw, więc ekran ułożony w innym wyglądzie zachowuje swój układ — i czcionkę twojego projektu.

Trzy ustawienia i jedno wywołanie

Trzy ustawienia GoConfig zmieniają naraz każdą komiksową powierzchnię. Nic nie jest przebudowywane — ekran przerysowuje się, gdy je ustawiasz.

GoUi.config.comic_border_width = 2.0   # obrys (dp) — domyślnie 3
GoUi.config.comic_shadow_size = 6.0    # cień (dp) — domyślnie 4
GoUi.config.comic_shadow = false       # nigdzie żadnych cieni

Pojedynczy widżet może pójść własną drogą, niezależnie od ustawień. Przekaż true jako ostatni argument, aby objąć wszystko, co jest w nim.

GoStyle.comic_shadow(skip_button, false)     # ten przycisk leży płasko
GoStyle.comic_shadow(card, true, true)       # ta karta i wszystko w niej zachowują cień
GoStyle.comic_border(title, 5.0)             # grubszy obrys na tym jednym

Zrób własny komiks. tools/new_theme.py inked --from comic_light kopiuje paletę; zmień kolory papieru, tuszu i główny, po czym uruchom tools/make_theme.py inked. Tusz, cień i skórka przychodzą razem z nią.

Comic szczegółowo → · To samo okno we wszystkich czternastu wyglądach →

Jak to wygląda w grze

Presety średniowieczny i sci-fi — karty postaci, ekwipunek i zadania; formularze, siatki i karty pytań; kanciaste panele i sterowanie dotykowe. Przełączenie presetu to jedna linijka kodu.

średniowieczny motyw gohud — karta postaci z paskami zdrowia, many i wytrzymałości, sakwa szybkich slotów i dziennik zadań w kutych złotych ramach — **Średniowieczny** — postać, ekwipunek i zadania

średniowieczny motyw gohud — panel wprowadzania z polem imienia, przełącznikiem, polami wyboru i suwakiem głośności, siatka kafelków oraz karta pytania z zaproszeniem do drużyny z przyciskami Akceptuj i Odrzuć — **Średniowieczny** — formularze, siatki i karty pytań

motyw sci-fi gohud — ścięty panel sterowania dotykowego z sześciokątnym joystickiem, przełącznikiem Fixed / Follow / Relative i okrągłymi przyciskami akcji — **Sci-fi** — kanciaste panele i sterowanie dotykowe

Wszystkie czternaście presetów i jak je przełączać →

Co zdejmuje z twoich barków

Najwięcej czasu w interfejsie gry pochłania nie kształt przycisku — tylko wszystko to, co rozjeżdża się między urządzeniami. gohud ogarnia to rozjeżdżanie w jednym miejscu.

Każdy wymiar to token

Odstępy, narożniki i rozmiary tekstu wywołuje się po nazwie, a nie wpisuje liczbami. Podmień motyw, a cały ekran ruszy razem z nim.

Rozmiar widoczny ≠ rozmiar klikalny

Przycisk zamknięcia wygląda na 36 dp, ale jego obszar dotyku ma 48 dp. Tam, gdzie ciasno ułożone sloty zachodzą na siebie, naciśnięcie przejmuje ten, którego środek jest bliżej.

Wycięcia i klawiatury

Elementy HUD siedzą wewnątrz bezpiecznego obszaru, a pole wprowadzania unosi się ponad klawiaturę ekranową, gdy ta się pojawi.

Wstecz zamyka jedną rzecz

Escape i androidowy przycisk Wstecz zamykają tylko wierzchnią powierzchnię. Ułożone na sobie okna nie znikają razem.

Powiadomienia nie kradną wejścia

Naciśnij przez snackbar, a odbierze to przycisk pod spodem. Fokus też nie zostaje zabrany.

O ikony prosi się po nazwie

Widżety znają tylko GoIconSet.CLOSE. Podmień zestaw, a zmienią się wszystkie rysunki bez ruszania jednej linijki kodu. Ikony →

Czternaście wyglądów, jedna linijka

GoUi.use_preset() podmienia motyw, skórkę i ikony naraz — zaokrąglone, ścięte sci-fi, kute średniowieczne ramy, komponenty aplikacji Material 3, galaretkowe cukierki Kids, komiksowy tusz albo farba z automatów arcade.

Czytelność z pomiaru

Każdy motyw jest sprawdzany względem WCAG, łącznie ze stanami przycisków i półprzezroczystymi panelami HUD na czystej bieli i czystej czerni.

Wszystko działa bez włączania wtyczki. Włączenie dokłada autoload GoRuntime, który śledzi rozmiar okna, skalę dp i wysokość klawiatury, oraz ustawienia projektu dla zasobu konfiguracji i presetu — to udogodnienia, nie wymagania.

Instalacja gohud

Dwie drogi. Niech zrobi to twój agent AI albo wrzuć folder do projektu — nie ma nic więcej do ustawienia.

Instalacja

Szybki start

Pięć linii wyświetla ekran z motywem. Cała droga jest na stronie instalacji.

Szybki start

Zmień wygląd — kolory i kształt

Motyw potrafi przestylizować tylko to, co rysuje silnik. Zaokrąglone narożniki to jedyne narożniki, jakie ma StyleBoxFlat, a joystick, szybkie sloty i wskazówka instruktażowa są rysowane kodem — więc sam motyw nigdy nie zmieni ich kształtu. Dlatego gohud dostarcza presety: motyw, skórkę i zestaw ikon dobrane jako jedna całość.

GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)   # motyw, skórka i ikony naraz

Preset	Wygląd
`default_dark`	Oryginalny gohud — zaokrąglone narożniki, miękki niebieski akcent
`default_light`	Te same kształty na jasnej palecie
`scifi_dark`	Ścięte narożniki, cyjanowe neonowe krawędzie i poświata, sześciokątny joystick, ramki celownicze
`scifi_light`	Te same kanciaste kształty w jasnej palecie rysunku technicznego
`medieval_dark`	Ciemne żelazo i skóra, ramy ze starego złota, nity, grawerowane ikony, nagłówki Cinzel
`medieval_light`	Pergamin, atrament i brąz z tymi samymi kutymi ramami
`material_light` Nowość	Material 3 dla ekranów aplikacji — przyciski w kształcie pigułki, okna dialogowe 28dp, wypełnione karty, pasek nawigacji, FAB i pasek wyszukiwania aplikacji, Roboto
`material_dark` Nowość	Te same kształty Material 3 na ciemnej bazie
`kids_light` Nowość	Pudełko z zabawkami dla dzieci — galaretkowo-cukierkowe klawisze z grubym obrysem i krawędzią, która zapada się po naciśnięciu, kolory kredek, słoneczna strona
`kids_dark` Nowość	To samo pudełko z zabawkami na nocnoniebieskiej stronie
`comic_light` Nowość	Kadry z komiksu — gruby obrys tuszem i twardy cień na każdej powierzchni, białe panele na stronie w kolorze kremowego papieru; cień, jego rozmiar i grubość obrysu to ustawienia
`comic_dark` Nowość	Ten sam tusz na nocnej stronie — kremowe obrysy i żółty kolor główny
`arcade_light` Nowość	Automat do gier — każdy klawisz pomalowany gradientem, połyskiem i krawędzią, opisany białymi literami z obrysem tuszem; grube plansze w ramach na błękitnej stronie, złota wstęga tytułu w oknach
`arcade_dark` Nowość	Te same jaskrawe klawisze na granatowych planszach i nocnej stronie

Galeria gohud w presecie default_dark — zaokrąglone narożniki, niebieski akcent — `default_dark` — zaokrąglone narożniki, miękki niebieski akcent

preset default_light — te same kształty na jasnej palecie — `default_light` — te same kształty, jasna paleta

preset scifi_dark — ścięte narożniki i cyjanowy neon — `scifi_dark` — ścięte narożniki, cyjanowy neon

preset scifi_light — te same kanciaste kształty w palecie rysunku technicznego — `scifi_light` — te same kanciaste kształty, paleta rysunku technicznego

Te cztery to ten sam ekran galerii. Nie różni się ani linijka kodu — tylko nazwa presetu. Narożniki przycisków, kształty przełączników, wiersze list i obramowania pól wprowadzania ruszają się razem.

Kolekcja średniowieczna

medieval_dark łączy żelazo i skórę ze starym złotem; medieval_light używa pergaminu i atramentu. Ramy menu niosą nit i mały ornament narożny, podczas gdy stale widoczny HUD pozostaje spokojny; 16 grawerowanych ikon przerysowuje nazwy przedmiotów, a dołączonej czcionki Cinzel używają wyłącznie tytuły i podtytuły.

medieval_dark — karta postaci, sakwa szybkich slotów i dziennik zadań — `medieval_dark` — żelazo i skóra

medieval_light — te same ekrany postaci, sakwy i zadań na pergaminie — `medieval_light` — pergamin i atrament

Oba zrzuty to examples/medieval/medieval.tscn, zbudowane ze standardowych widżetów. Przewodnik po średniowieczu i jak zrobić własne królestwo →

Ten sam ekran na telefonie i na komputerze

Zrzuty galerii to telefon w pionie. Poniżej ten sam kod w 1280×800 — treść zatrzymuje się na czytelnej szerokości (480 dp) i centruje, a HUD zostaje w narożnikach. Formularz omija pływające elementy HUD, ale nie rusza się, gdy już ich nie dotyka: przesuwanie na siłę zrzuciłoby treść ze środka na szerokim ekranie.

default_dark w 1280x800 — treść wyśrodkowana, HUD w narożnikach — `default_dark` · 1280×800

scifi_dark w 1280x800 — ten sam układ ze ściętymi panelami i neonem — `scifi_dark` · 1280×800

Ten sam arkusz, inny wygląd

Dolny arkusz w default_dark — Domyślny — zaokrąglona karta, przyklejony wiersz wyszukiwania i stopka

Dolny arkusz w scifi_dark — neonowa krawędź akcentu wzdłuż górnej części — Sci-fi — górna krawędź akcentu, ścięte narożniki, poświata

Wybierz jeden w Ustawieniach projektu → gohud → Theme → Preset albo ustaw GoConfig.preset. Jawne wypełnienie theme, skin lub icons wygrywa z presetem, więc możesz wziąć preset i nadpisać tylko jedną z tych rzeczy.

Nowy motyw to jeden plik JSON. new_theme.py kingdom --from medieval_dark zapisuje paletę, która wypisuje wprost każdą odziedziczoną wartość; make_theme.py kingdom buduje motyw, jego grafiki kontrolek i pokrętła skórki, a preset pojawia się w selektorze. Każde ustawienie i pokrętło →

Skórki — tam, gdzie motyw nie sięga

Skórka posiada joystick, lica szybkich slotów, pierścień wskazówki instruktażowej, chipy, szkielety, alerty, separatory i nagłówki sekcji. Odziedzicz po niej i nadpisz tylko to, co chcesz zmienić.

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

Klasa	Jakie kształty potrafi zrobić
`GoStyleBoxCut`	Ukośnie ścięte narożniki (fazowanie), jedna pogrubiona krawędź akcentu, zewnętrzna poświata
`GoStyleBoxBracket`	Same znaczniki narożne, bez zamykania treści w ramie
`GoStyleBoxMedieval`	Kuta rama z nitami, grawerem w narożnikach, podświetleniem fazy i fakturą materiału
`GoStyleBoxJelly`	Galaretkowy cukierek — gruby obrys, solidna krawędź, która zapada się po naciśnięciu, korpus jaśniejszy u góry i biały połysk
`GoStyleBoxComic`	Kadr z komiksu — gruby obrys tuszem i twardy rzucany cień, oba o rozmiarze ustawianym przez `GoConfig` w trakcie gry
`GoStyleBoxArcade`	Klawisz lub plansza z automatu arcade — korpus z gradientem, biały połysk, krawędź, która zapada się po naciśnięciu, i obrys tuszem; plansza dodaje grubą kolorową ramę wokół jasnego wnętrza

Wszystkich sześć serializuje się do zasobu Theme — i to właśnie pozwala motywowi zmieniać kształt, a nie tylko kolor. GoSkinSciFi, GoSkinMedieval, GoSkinMaterial, GoSkinKids, GoSkinComic i GoSkinArcade to dostarczone podklasy.

Szybkie sloty, joystick i chip narysowane przez każdą dostarczoną skórkę — domyślną, Kids, Material, średniowieczną i sci-fi — Co rysuje skórka — domyślna, Kids, Material, średniowieczna, sci-fi

Szybkie sloty, joystick i chip narysowane przez skórkę Comic — obrysy tuszem i twarde cienie — …i skórka Comic

Szybkie sloty, joystick i chip narysowane przez skórkę Arcade — błyszczące nasadki klawiszy i pad z czterema strzałkami — …i skórka Arcade

GoStyle.box() zawsze zwraca StyleBoxFlat, ponieważ kod wywołujący go otrzymuje i dostraja bg_color albo corner_radius. Gdy własny kształt ma przetrwać, użyj GoStyle.surface().

Widżety

Wszystkie elementy w jednej tabeli. Każdy z nich szczegółowo → · Każdy widżet z obrazkiem → · Wyskakujące okna i dialogi — pełny przewodnik →

Klasa	Klasa bazowa	Co robi
`GoSurface`	Control	Powłoka pływającej karty — położenie na środku, u dołu albo przy kontrolce, przyklejony nagłówek i stopka, przewijane ciało, zmiana rozmiaru przeciągnięciem
`GoSheet`	CanvasLayer	Strony wznoszące się od dołu, na własnej warstwie, więc siedzą ponad HUD
`GoDialogs`	Node	Potwierdzenia i alerty, na które czekasz przez `await`; `destructive` dla działań nieodwracalnych
`GoForm`	MarginContainer	Formularze z ograniczoną szerokością, omijające klawiaturę ekranową, a z `avoid_hud` także HUD
`GoScroll`	ScrollContainer	Przewijanie dotykiem; pasek przewijania chowa się w marginesie wewnętrznym karty
`GoNotice`	PanelContainer	Snackbar, który nie zabiera ani wejścia, ani fokusu
`GoPromptCard`	PanelContainer	Pytanie, które nie blokuje gry
`GoCoachMark`	Control	Przewodnik wskazujący prawdziwe kontrolki; naciśnięcie celu przesuwa go dalej
`GoHudAnchor`	Control	Przypina elementy HUD do jednego z dziewięciu miejsc w bezpiecznym obszarze
`GoBar`	Control	Paski zdrowia, many i doświadczenia z wygładzonymi zmianami
`GoSlot`	Button	Szybki slot — ikona, liczba, odnowienie i skrót na jednym licu
`GoJoystick`	Control	Wirtualny joystick w trybie stałym, podążającym albo względnym
`GoIconButton`	Button	Wygląda na mały, naciska się duży
`GoStyle`	statyczna	Przyciski, wiersze list, pola wprowadzania, chipy, tabele, zakładki i więcej, tworzone w jeden spójny sposób

Czekanie, mówienie, liczenie

Klasa	Klasa bazowa	Co robi
`GoSnackbar`	Node	komunikat, który sam się umieszcza
`GoSpinner`	Control	czekanie, którego końca nie widać
`GoBadge`	PanelContainer	kropka nieprzeczytanych, etykietka NOWE, 99+

Formularze i listy

Klasa	Klasa bazowa	Co robi
`GoField`	VBoxContainer	wiersz, który może być błędny
`GoInputGroup`	HBoxContainer	pole wprowadzania zespawane ze swoim przyciskiem
`GoCombobox`	Button	lista wyboru, która szuka
`GoCodeInput`	VBoxContainer	kody kuponów i prezentów
`GoTable`	VBoxContainer	sortowalne nagłówki, wybieralne wiersze
`GoPagination`	HBoxContainer	strony albo wiersz Więcej

Kształty, których gry naprawdę używają

Klasa	Klasa bazowa	Co robi
`GoRewardCalendar`	VBoxContainer	codzienna obecność
`GoRadar` · `GoDonut`	Control	statystyki na pierwszy rzut oka
`GoCarousel`	VBoxContainer	banery i wybór postaci
`GoKbd`	HBoxContainer	podpowiedzi klawiszy, które nie kłamią

Ponad ekranem

Klasa	Klasa bazowa	Co robi
`GoDrawer`	CanvasLayer	panel boczny
`GoPopover`	RefCounted	karta przypięta do miejsca
`GoContextMenu`	RefCounted	przytrzymanie i prawy przycisk myszy
`GoConsole`	CanvasLayer	konsola dewelopera

Go HUD Skill

gohud zawiera umiejętność AI: całe API, gotowe do uruchomienia szablony i podgląd. Wklej jeden blok do swojego agenta — zainstaluje gohud i będzie wiedział, jak go używać.

Go HUD Skill

Czytelność się mierzy, a nie ocenia na oko

„Ładne” to kwestia gustu; „czytelne” da się zmierzyć. Blady szary tekst wygląda dobrze na dobrym monitorze i znika na telefonie w słońcu — wybieranie na oko prędzej czy później to gwarantuje.

python3 addons/gohud/tools/check_contrast.py

Każda para kolorów i etykieta każdego stanu przycisku na panelu, na którym leży, jest mierzona względem WCAG, we wszystkich czternastu motywach. Półprzezroczyste kolory są najpierw składane na swoim prawdziwym tle — mierzenie ich wprost daje lepszy współczynnik, niż pokazuje ekran.

Kolory tekstu są więc wyprowadzane, a nie wybierane: builder bierze wpis z palety jako punkt wyjścia i przesuwa jego jasność, aż przekroczy próg na każdej powierzchni, na której może wylądować. Zmień paletę, a kontrast pójdzie za nią. Zasady i pułapki, które za nimi stoją →

Kontrole, wydania i ta strona

Jeden punkt wejścia uruchamia wszystkie kontrole; każda część widzi coś, czego nie widzą pozostałe.

bash addons/gohud/tools/check_all.sh

Kontrola	Co wyłapuje
`run_tests.sh` w czterech rozmiarach ekranu	Zachowanie i układ widżetów, pozycje RTL, fokus klawiatury, kontrast skórki w czasie działania, każdy preset
`new_project_check.sh`	Ukryte zależności od projektu-gospodarza; z `--zip` wydanie w postaci wysyłkowej, z `--export` build webowy
`check_contrast.py`	Kontrast WCAG każdego pliku motywu, wliczając stany przycisków i półprzezroczyste panele
`check_generated.py` · `check_scaffold.sh`	Wygenerowane motywy zgadzają się ze swoimi paletami; jednorazowy motyw buduje się i przechodzi kontrolę kontrastu
`check_package.py`	Wersja brana z package.json, przenoszenie wpisów changelogu i zawartość ZIP-a, w kopiach tymczasowych
`check_site.py`	Linki tej strony, kotwice, język stron, słowniczek i tabele pokręteł

Ostatni zapisany przebieg — 2026-09-13, Godot 4.7.2, macOS, renderer Compatibility. 438 z 438 kontroli w 390×844, 844×390, 768×1024 i 1280×800 w pustym projekcie; ponownie 438 z 438 z autoloadem GoRuntime; eksport webowy; zero niepowodzeń kontrastu w sześciu motywach. Fizyczne urządzenia z Androidem czy iOS nie były częścią tego przebiegu.

Wydawanie wersji

cat addons/gohud/package.json       # { "version": "1.1.0" }
bash addons/gohud/tools/release.sh  # wszystkie kontrole → ZIP → ten ZIP w pustym projekcie
bash addons/gohud/tools/package.sh  # 1.1.0 → builds/1.1.0/gohud-1.1.0.zip

Wersja to ta zapisana w package.json — pakowanie nigdy jej nie podbija. Aby wydać nową wersję, najpierw zmień ten numer. Udany przebieg ustawia plugin.cfg i GoUi.VERSION na tę wartość, a przy pierwszym pakowaniu danej wersji przenosi notatki z sekcji Unreleased w CHANGELOG.md do datowanego wpisu. Ponowne pakowanie tej samej wersji buduje jej ZIP od nowa i zastępuje poprzedni. Nieudany przebieg nie zmienia niczego. ZIP pomija tę witrynę, testy, narzędzia i package.json.

Ta witryna

python3 addons/gohud/tools/make_site.py            # słowniczek i tabele pokręteł skórek, generowane ze źródeł
python3 addons/gohud/tools/check_site.py           # linki, kotwice, język, słowniczek, generowane tabele
bash addons/gohud/tools/site_shots.sh /tmp/shots   # zrzuty każdej strony na komputerze i telefonie

Strony to zwykły HTML w www/ — angielski w katalogu głównym, koreański w ko/. Workflow GitHub Actions publikuje ten folder jako korzeń witryny.

Interfejs gry napędzany jednym zasobem

Nowość: arcade, komiks, Material 3 i wygląd dla dzieci

Material 3 — dla ekranów aplikacji

Kids — pudełko z zabawkami

Comic — gruby tusz

Arcade — malowane klawisze

Arcade: malowane klawisze i grube plansze

Każdy klawisz malowany

Nocą: arcade_dark

Jak działa wygląd arcade

Powierzchnia

Czytelne etykiety

Okna

Komiks: gruby tusz i twardy cień

Każdy widżet w tuszu

Nocą: comic_dark

Jak działa wygląd komiksowy

Jeden StyleBox dla każdej powierzchni

Naciśnięty znaczy płaski

Resztę obrysowuje skórka

Okna dostają pole tytułu

Czytelny w dzień i w nocy

Bez zmian w układzie

Trzy ustawienia i jedno wywołanie

Jak to wygląda w grze

Co zdejmuje z twoich barków

Każdy wymiar to token

Rozmiar widoczny ≠ rozmiar klikalny

Wycięcia i klawiatury

Wstecz zamyka jedną rzecz

Powiadomienia nie kradną wejścia

O ikony prosi się po nazwie

Czternaście wyglądów, jedna linijka

Czytelność z pomiaru

Instalacja gohud

Szybki start

Zmień wygląd — kolory i kształt

Kolekcja średniowieczna

Ten sam ekran na telefonie i na komputerze

Ten sam arkusz, inny wygląd

Skórki — tam, gdzie motyw nie sięga

Widżety

Czekanie, mówienie, liczenie

Formularze i listy

Kształty, których gry naprawdę używają

Ponad ekranem

Go HUD Skill

Czytelność się mierzy, a nie ocenia na oko

Kontrole, wydania i ta strona

Wydawanie wersji

Ta witryna

Nocą: `arcade_dark`

Nocą: `comic_dark`