gohud — bộ HUD & UI cho Godot 4

Mới: arcade, truyện tranh, Material 3 và một diện mạo cho trẻ em

Bốn họ mới gia nhập cùng mặc định, sci-fi và trung cổ — giờ đã có mười bốn diện mạo có sẵn, mỗi cái đều có bản tối và sáng. Mọi widget, cửa sổ bật lên và mảnh HUD đều nhận chúng mà không phải đổi code của bạn: đổi preset là cả màn hình đổi theo.

Màn hình gallery của gohud ở material_light — nút hình viên thuốc, thẻ tô nền và màu sắc Material 3 — `material_light`

Màn hình gallery của gohud ở material_dark — cùng các hình dạng Material 3 trên nền tối chuẩn — `material_dark`

Màn hình gallery của gohud ở kids_light — các nút kẹo thạch mập mạp màu bút sáp trên trang nền màu nắng — `kids_light`

Màn hình gallery của gohud ở kids_dark — cùng hộp đồ chơi đó trên trang nền xanh đêm — `kids_dark`

Màn hình gallery của gohud ở comic_light — viền mực đậm và bóng đổ sắc nét trên trang nền màu kem như giấy — `comic_light`

Màn hình gallery của gohud ở comic_dark — viền màu kem và màu chính vàng trên trang nền đêm — `comic_dark`

Màn hình gallery của gohud ở arcade_light — các phím sơn màu với dải chuyển màu và vệt bóng, một bảng HUD dày viền khung xanh lam trên trang nền xanh da trời — `arcade_light`

Màn hình gallery của gohud ở arcade_dark — vẫn những phím rực rỡ ấy trên trang nền đêm — `arcade_dark`

Material 3 — cho màn hình ứng dụng

Material 3 Expressive, đo đối chiếu với token M3 chính thức: nút hình viên thuốc với tấm nền 40dp nằm trong vùng chạm 48dp, hộp thoại và bảng trượt 28dp, thẻ tô nền, ô nhập có viền và thanh trượt Expressive. Các thành phần ứng dụng — thanh điều hướng, thanh ứng dụng trên cùng, FAB, thanh tìm kiếm, chip, tiến trình và bộ chọn ngày — theo token thành phần của M3, còn tiêu đề dùng font Roboto kèm theo. Dành cho cửa hàng, cài đặt, hộp thư và mọi màn hình nên mang cảm giác của một ứng dụng.

Trẻ em — hộp đồ chơi

Làm cho trẻ em: mọi phím, hàng và tấm nền là một viên kẹo thạch với viền dày và một gờ đặc lún xuống khi nhấn, mỗi loại điều khiển một màu bút sáp riêng. Ô nhanh là những khối kẹo, huy hiệu là nhãn dán, cần điều khiển là cầu vồng, cửa sổ có dải băng tiêu đề màu nắng và nút đóng tròn hình viên kẹo, và mỗi lần nhấn thì bẹp xuống. Kích thước và font của dự án bạn vẫn giữ nguyên như cũ.

Truyện tranh — nét mực đậm

Mọi mặt đều là một khung truyện tranh: màu bề mặt nằm trong một đường viền mực đậm, phía sau là một bóng đổ sắc nét biến mất khi mặt được nhấn. Một thiết lập bật hoặc tắt mọi bóng đổ, hai thiết lập nữa đặt độ dày viền và cỡ bóng, và một lệnh gọi làm điều tương tự cho riêng một widget. Cửa sổ có một ô tiêu đề màu vàng.

Arcade — phím sơn màu

Mọi phím đều được sơn — một dải chuyển màu, một vệt bóng trắng và một gờ lún xuống khi nhấn, nằm trong viền mực xanh navy — và mang nhãn chữ trắng viền mực: xanh lá để chơi, xanh lam cho mọi thứ khác, đỏ để xóa. Các bảng đều dày, là một khung màu bao quanh lòng bảng sáng màu, còn cửa sổ có dải băng tiêu đề vàng kim và một phím đóng tròn màu đỏ.

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

Material 3 chi tiết → · Trẻ em chi tiết → · Arcade, từng widget một ↓ · Truyện tranh, từng widget một ↓ · Cùng một cửa sổ bật lên trong cả mười bốn diện mạo →

Arcade: phím sơn màu và bảng dày

Diện mạo mới nhất khoác cho mọi màn hình dáng vẻ của một máy game thùng. Mọi phím đều được sơn — một dải chuyển màu từ đỉnh sáng xuống đáy đậm hơn, một nét vệt bóng trắng và một gờ lún xuống khi nhấn, tất cả nằm trong viền mực xanh navy — và nhãn của nó là chữ trắng viền mực. Mọi bảng đều dày: một khung màu có vệt bóng riêng, bao quanh lòng bảng sáng màu. arcade_light đặt bảng trắng trên trang nền xanh da trời; arcade_dark đặt bảng xanh navy trên trang nền đêm. Mọi ảnh bên dưới đều là một màn hình gohud thật — cùng một đoạn code, chỉ một dòng preset.

GoUi.use_preset(&"arcade_light")   # hoặc &"arcade_dark"

Màn hình gallery của gohud ở arcade_light — các phím sơn xanh lá, xanh lam, đỏ và tím oải hương cùng một bảng HUD khung xanh lam trên trang nền xanh da trời — `arcade_light` · gallery

Một bảng trượt dưới ở arcade_light — một bảng dày có khung trồi lên từ mép dưới, với các hàng hình nắp phím — `GoSheet`

Một coach mark ở arcade_light — một khung chú thích có khung chỉ vào một phím — `GoCoachMark`

Một ngăn kéo bên ở arcade_dark — một bảng xanh navy gồm các hàng điều hướng phủ trên màn hình bị làm tối — `GoDrawer`

Một popover ở arcade_dark — một bong bóng có khung neo vào phím đã mở nó — `GoPopover`

Một hộp cảnh báo ở arcade_dark — dải băng Level up! vàng kim, một phím đóng màu đỏ và một phím Great xanh lá trên một bảng xanh navy khung xanh lam — `GoDialogs.alert()`

Một snackbar ở arcade_light — một bảng trắng khung nâu dọc mép dưới, kèm hành động Undo — `GoSnackbar`

Mọi phím đều được sơn

Các nút ở arcade_light — Chơi xanh lá, Chi tiết xanh lam, một phím trắng có viền, Xóa màu san hô, Xóa vĩnh viễn màu đỏ, một phím gọn màu tím oải hương và một phím xám bị vô hiệu hóa, mỗi phím được sơn dải chuyển màu, vệt bóng và gờ trong viền xanh navy — `GoStyle.button()`

Tab ở arcade_light — tab được chọn là một phím sơn xanh lam, các tab còn lại là phím tím oải hương — `GoStyle.tabs()`

Một điều khiển phân đoạn ở arcade_light — các phím sơn tách rời, phím được chọn màu xanh lam và lún xuống — Phím phân đoạn

Công tắc và ô đánh dấu ở arcade_light — rãnh bóng màu xanh lá khi bật, tím oải hương khi tắt, một ô có dấu tích xanh lá — Công tắc và ô đánh dấu

Các thẻ ở arcade_light — lòng bảng sáng màu bên trong khung xanh lam dày có vệt bóng và gờ — `GoStyle.card()`

Một biểu mẫu ở arcade_light — một ô nhập trắng lõm xuống, một công tắc và một phím Lưu xanh lá — `GoForm`

Một lưới lựa chọn ở arcade_light — các nắp phím, ô được chọn viền vàng kim trên nền phớt xanh lá — `GoStyle.choice_grid()`

Một lưới ô ở arcade_light — kho đồ gồm các nắp phím bóng loáng kèm số lượng — `GoSlotGrid`

Các hàng danh sách ở arcade_light — mỗi hàng là một nắp phím sáng màu có biểu tượng — Hàng danh sách

Một bộ chọn ngày ở arcade_light — các ngày hình nắp phím, ngày được chọn là một phím sơn màu — `GoDatePicker`

Một thanh trượt ở arcade_light — một ống bóng loáng xanh lam trong rãnh viền mực và một núm tròn hình nắp phím — `GoStyle.slider()`

Một nhóm nút chọn ở arcade_light — các nắp phím tròn, nắp được chọn có một chấm xanh lam — `GoStyle.radio_group()`

Các chip lọc ở arcade_light — chip hình nắp phím, chip được chọn phớt xanh lam kèm dấu tích, và các chip có thể gỡ bỏ với dấu chéo — `GoStyle.filter_chip()`

Một thanh tìm kiếm ở arcade_light — một ô nhập trắng lõm xuống trong viền mực, có biểu tượng tìm kiếm và biểu tượng lọc — `GoSearchBar`

Một bộ chia bước ở arcade_light — mỗi bước là một nắp phím sáng màu, bước đang mở hiện phím Next xanh lá — `GoStepper`

Một bảng xếp hạng ở arcade_light — các hàng xen kẽ là nắp phím nổi lên — `GoTable`

Một thanh điều hướng dưới ở arcade_light — biểu tượng của tab được chọn nằm trên một viên thuốc xanh lam hình nắp phím, một huy hiệu đếm màu đỏ — `GoNavBar`

Một bộ chọn giờ ở arcade_light — giờ và phút trên các nắp phím lớn, các phím AM và PM phía trên mặt đồng hồ — `GoTimePicker`

Một ô nhập mã ở arcade_light — tám ô hình nắp phím, ô đang được gõ viền vàng kim — `GoCodeInput`

Một bộ chọn dạng bánh xe ở arcade_light — số lượng được chọn nằm trên một dải hình nắp phím, các số khác mờ dần ở trên và dưới — `GoWheelPicker`

Về đêm: `arcade_dark`

Trên trang nền tối, mực trở thành chính trang nền, đậm hơn nhiều, còn các màu sơn vẫn rực rỡ như cũ.

Các nút ở arcade_dark — vẫn những màu sơn rực rỡ ấy trên trang nền đêm — `GoStyle.button()` về đêm

Thanh HUD ở arcade_dark — các ống HP đỏ, MP xanh lam và XP xanh lá trong rãnh lõm — `GoBar`

Thẻ HUD ở arcade_dark — lòng bảng xanh navy trong khung xanh lam dày phủ trên game — `GoStyle.hud_panel()`

Ô nhanh ở arcade_dark — các nắp phím kèm số lượng, một ô đang hồi chiêu viền vàng kim — `GoSlot`

Một cần điều khiển ảo ở arcade_dark — một đế bóng loáng trong vòng mực với bốn mũi tên và núm hình nắp phím — `GoJoystick`

Cảnh báo ở arcade_dark — các bảng nhỏ khung vàng, xanh lá, đỏ và xanh lam — Cảnh báo

Nút hành động nổi ở arcade_dark — các phím sơn vàng kim có vệt bóng — `GoFab`

Lịch phần thưởng ở arcade_dark — các ngày hình nắp phím, hôm nay viền vàng kim — `GoRewardCalendar`

Một điều khiển phân đoạn ở arcade_dark — phím Day được chọn sơn xanh lam, Week và Month tím oải hương, mọi nhãn đều màu trắng — Phím phân đoạn

Một chế độ xem tab ở arcade_dark — các phím tab sơn màu phía trên các hàng mục là nắp phím xanh navy — `GoTabView`

Một danh sách cuộn ở arcade_dark — các hàng mục trên nắp phím xanh navy và một hàng chip lọc, chip được chọn màu xanh lam — `GoScroll`

Công tắc và ô đánh dấu ở arcade_dark — rãnh bóng màu xanh lá khi bật, tím oải hương khi tắt — Công tắc và ô đánh dấu

Các chip độ hiếm ở arcade_dark — những tấm nhỏ sơn màu từ Common đến Cursed — `GoStyle.chip()`

Một lưới ô ở arcade_dark — kho đồ gồm các nắp phím xanh navy với biểu tượng trắng và số lượng — `GoSlotGrid`

Một thanh trượt khoảng ở arcade_dark — một đoạn xanh lam giữa hai núm bóng loáng trong rãnh tối — `GoRangeSlider`

Phân trang ở arcade_dark — trang hiện tại là một phím sơn xanh lá — `GoPagination`

Các huy hiệu ở arcade_dark — những tấm màu san hô viền mực phía trên các biểu tượng — `GoBadge`

Diện mạo arcade hoạt động thế nào

Bề mặt

Mỗi phím và mỗi bảng là một GoStyleBoxArcade: một viền mực, một thân chuyển màu, một gờ và một vệt bóng, được vẽ bên trong chính hình chữ nhật của điều khiển — phím giữ nguyên kích thước qua mọi trạng thái, và khi nhấn chỉ lún xuống mà thôi.

Nhãn luôn đọc được

Nhãn trắng có viền mực đọc được trên mọi màu sơn mà đường viền tách nó ra — WCAG tính đường viền là một phần của chữ. Mỗi màu sơn được dịch đi cho đến khi nhãn của nó vượt 4.6:1 ở mọi độ cao của dải chuyển màu.

Cửa sổ

Tiêu đề cửa sổ nằm trên một dải băng vàng kim, chữ trắng viền mực, cạnh một phím đóng tròn màu đỏ. Hộp thoại, bảng trượt, ngăn kéo và popover đều là những bảng dày có khung.

Một phím có thể mang màu riêng — một phím cửa hàng màu cam trong menu tạm dừng:

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

Arcade chi tiết → · Cùng một cửa sổ bật lên trong cả mười bốn diện mạo →

Truyện tranh: nét mực đậm và bóng đổ sắc nét

Diện mạo truyện tranh vẽ mọi mặt như một khung trong truyện tranh — màu bề mặt nằm trong một đường viền mực đậm, với một bóng đổ đặc, sắc nét lệch xuống dưới và sang phải. comic_light viền mực đen trên trang nền màu kem như giấy với màu chính xanh coban; comic_dark viền mực màu kem trên trang nền đêm với màu chính vàng. Mọi ảnh bên dưới đều là một màn hình gohud thật — cùng một đoạn code, chỉ một dòng preset.

GoUi.use_preset(&"comic_light")   # hoặc &"comic_dark"

Màn hình gallery của gohud ở comic_light — phím, hàng và thanh viền mực với bóng đổ sắc nét trên trang nền màu kem như giấy — `comic_light` · gallery

Màn hình gallery của gohud ở comic_dark — nét mực màu kem và màu chính vàng trên trang nền đêm — `comic_dark` · gallery

Một bảng trượt dưới ở comic_light — tấm nền viền mực trồi lên từ mép dưới với các hàng viền mực — `GoSheet`

Một coach mark ở comic_light — ô chú thích viền mực chỉ vào một nút — `GoCoachMark`

Một ngăn kéo bên ở comic_dark — tấm nền viền mực chứa các hàng điều hướng trên màn hình bị làm tối — `GoDrawer`

Một popover ở comic_dark — bong bóng viền mực neo vào nút đã mở nó — `GoPopover`

Nút, công tắc, tab, thanh trượt, thẻ, biểu mẫu, bảng, bộ chọn và chip đều khoác nét mực — bạn không phải tạo kiểu cho từng cái một. Nhấn một phím là bóng đổ của nó biến mất: mặt phím lún vào đúng chỗ, như một con dấu. Mặt bị vô hiệu hóa mất bóng đổ và mờ đi, nên những gì nhấn được nổi bật hẳn so với những gì không nhấn được.

Các nút ở comic_light — phím chính, phụ, có viền, nguy hiểm, gọn, trơn và bị vô hiệu hóa, mỗi phím có viền đen đậm và bóng đổ sắc nét — `GoStyle.button()` — đủ mọi loại

Công tắc và ô đánh dấu ở comic_light — rãnh và núm viền mực, các ô viền mực có dấu tích — Công tắc và ô đánh dấu

Nút radio ở comic_light — các vòng viền mực, vòng được chọn có chấm tô đầy — Nút radio

Tab ở comic_light — tab được chọn là một tấm nền viền mực, các tab còn lại nằm trên một đường gạch chân bằng mực — `GoStyle.tabs()`

Một điều khiển phân đoạn ở comic_light — các ô viền mực, ô được chọn tô đầy — Nút viên thuốc phân đoạn

Một thanh trượt ở comic_light — rãnh viền mực, phần tô màu nhấn mảnh và núm viền mực — `GoStyle.slider()`

Danh sách thả xuống ở comic_light — các phím viền mực có mũi tên chevron — Danh sách thả xuống

Một thẻ ở comic_light — tấm nền trắng với viền đậm và bóng đổ sắc nét — `GoStyle.card()`

Một biểu mẫu ở comic_light — ô nhập viền mực có gợi ý, một công tắc và phím Lưu viền mực — `GoForm`

Hàng danh sách ở comic_light — mỗi hàng là một dải viền mực với biểu tượng, phụ đề hoặc nhãn nguy hiểm — Hàng danh sách

Một bảng ở comic_light — hàng tiêu đề trên một đường kẻ mực, và mỗi hàng điểm số là một dải viền mực — `GoTable`

Một bộ chọn ngày ở comic_light — các ô ngày viền mực, ngày được chọn tô đầy — `GoDatePicker`

Một bộ chọn giờ ở comic_light — ô giờ và phút viền mực, phím AM và PM và một mặt đồng hồ — `GoTimePicker`

Một stepper ở comic_light — các hàng bước viền mực, bước đã xong có dấu tích và bước sắp tới mờ đi — `GoStepper`

Chip lọc và chip nhập ở comic_light — các viên thuốc viền mực, bộ lọc được chọn tô màu kèm dấu tích — Chip lọc

Một thanh điều hướng ở comic_light — đường kẻ mực ở trên, tab hiện tại trong một viên thuốc viền mực và một huy hiệu trên Alerts — `GoNavBar`

Một nhóm nhập ở comic_light — ô nhập và phím Send hàn liền thành một hình viền mực — `GoInputGroup`

Một nút tách ở comic_light — một hành động và một mũi tên menu thành hai nửa viền mực — `GoSplitButton`

Phân trang ở comic_light — trang hiện tại là một phím viền mực với bóng đổ sắc nét — `GoPagination`

Về đêm: `comic_dark`

Trên trang nền tối, viền đen sẽ biến mất, nên comic_dark vẽ viền màu kem và đổ một bóng mờ nhạt cùng sắc mực đó. Các mảnh HUD — ô nhanh, thanh, cần điều khiển và lịch phần thưởng — cũng theo cùng quy tắc.

Các nút ở comic_dark — viền màu kem, màu chính vàng và bóng đổ sắc nét mờ nhạt trên trang nền đêm — `GoStyle.button()` về đêm

Ô nhanh ở comic_dark — các khối viền mực có số lượng chồng và thời gian hồi chiêu, các ô đang sáng viền vàng — `GoSlot`

Thanh HUD ở comic_dark — HP, MP và XP trong các rãnh viền mực màu kem — `GoBar`

Một cần điều khiển ảo ở comic_dark — vòng màu kem và một núm đổ bóng — `GoJoystick`

Cảnh báo ở comic_dark — các tấm nền thông tin, thành công, cảnh báo và nguy hiểm viền mực màu kem — Cảnh báo

Một lưới ô ở comic_dark — kho đồ gồm các khối viền mực — `GoSlotGrid`

Một lịch phần thưởng ở comic_dark — các ô ngày viền mực, ngày đã nhận có dấu tích và hôm nay viền vàng — `GoRewardCalendar`

Chip độ hiếm ở comic_dark — các viên thuốc viền mực, mỗi viên tô màu riêng — Chip

Một thanh trượt khoảng ở comic_dark — hai núm viền mực trên một rãnh viền mực — `GoRangeSlider`

Một thanh tìm kiếm ở comic_dark — thanh viền mực với biểu tượng tìm kiếm và bộ lọc — `GoSearchBar`

Nút hành động nổi ở comic_dark — các phím vàng viền mực màu kem với bóng đổ sắc nét — `GoFab`

Diện mạo truyện tranh hoạt động thế nào

Một StyleBox cho mọi mặt

Mọi mặt đều là một GoStyleBoxComic: một lớp tô, một đường viền và một bóng đổ, vẽ bên trong chính hình chữ nhật của điều khiển. Mỗi lần vẽ, nó đọc độ dày viền và cỡ bóng từ GoConfig, nên một thiết lập đổi cả màn hình cùng lúc.

Nhấn là phẳng

Phím được nhấn bỏ bóng đổ và dịch vào đúng chỗ của nó. Khi di chuột qua, bóng vẫn còn; khi được focus, có thêm một vòng mực bên trong không bao giờ che đường viền; mặt bị vô hiệu hóa mất bóng và mờ đi.

Skin viền mực phần còn lại

GoSkinComic viền mực những gì code vẽ: ô nhanh, chip, huy hiệu, avatar, notice, thanh điều hướng, FAB, các ô ngày và cần điều khiển, với núm đổ bóng.

Cửa sổ có ô tiêu đề

Tiêu đề cửa sổ nằm trên một ô màu vàng, như ô lời dẫn trong truyện tranh, cạnh một nút đóng tròn viền mực. Hộp thoại, bảng trượt, ngăn kéo và popover là những tấm nền viền mực đặc, không trong suốt.

Dễ đọc cả ngày lẫn đêm

Cả hai bảng màu đều vượt qua cùng các bài kiểm tra độ tương phản WCAG như mọi preset khác, kể cả phím đang nhấn và phím bị vô hiệu hóa. Khi màu ô tiêu đề quá gần với màu trang nền, đường viền của nó chuyển về màu trang nền.

Không đổi bố cục

Đường viền và bóng đổ nằm gọn bên trong mỗi điều khiển và phần đệm giữ nguyên như theme đã đặt, nên một màn hình dàn trang bằng diện mạo khác vẫn giữ bố cục — và cả font của dự án bạn.

Ba thiết lập và một lệnh gọi

Ba thiết lập trong GoConfig đổi mọi mặt truyện tranh cùng lúc. Không có gì phải dựng lại — màn hình vẽ lại ngay khi bạn đặt chúng.

GoUi.config.comic_border_width = 2.0   # đường viền (dp) — mặc định là 3
GoUi.config.comic_shadow_size = 6.0    # bóng đổ (dp) — mặc định là 4
GoUi.config.comic_shadow = false       # không có bóng đổ ở bất cứ đâu

Một widget có thể đi theo cách riêng của nó, bất kể thiết lập nói gì. Truyền true làm đối số cuối để áp dụng cho mọi thứ bên trong nó.

GoStyle.comic_shadow(skip_button, false)     # nút này nằm phẳng
GoStyle.comic_shadow(card, true, true)       # thẻ này và mọi thứ bên trong vẫn giữ bóng đổ
GoStyle.comic_border(title, 5.0)             # viền dày hơn cho riêng cái này

Tự làm một diện mạo truyện tranh của riêng bạn. tools/new_theme.py inked --from comic_light sao chép bảng màu; đổi màu giấy, màu mực và màu chính rồi chạy tools/make_theme.py inked. Nét mực, bóng đổ và skin đều đi kèm.

Truyện tranh chi tiết → · Cùng một cửa sổ bật lên trong cả mười bốn diện mạo →

Trông thế nào khi vào game

Preset trung cổ và sci-fi — bảng nhân vật, túi đồ và nhiệm vụ; biểu mẫu, lưới và prompt card; tấm nền góc cạnh và điều khiển cảm ứng. Đổi preset chỉ tốn một dòng code.

Theme trung cổ của gohud — bảng nhân vật với thanh máu, mana và thể lực, một túi đựng các ô nhanh và sổ nhiệm vụ trong khung vàng rèn — **Trung cổ** — nhân vật, túi đồ và nhiệm vụ

Theme trung cổ của gohud — bảng nhập liệu với ô tên, công tắc, hộp kiểm và thanh trượt âm lượng, một lưới các ô, và prompt card mời vào tổ đội với Chấp nhận và Từ chối — **Trung cổ** — biểu mẫu, lưới và prompt card

Theme sci-fi của gohud — tấm điều khiển cảm ứng vát góc với cần điều khiển hình lục giác, công tắc Fixed / Follow / Relative và các nút hành động tròn — **Sci-fi** — tấm nền góc cạnh và điều khiển cảm ứng

Cả mười bốn preset và cách chuyển giữa chúng →

Những việc nó gánh thay bạn

Thứ ngốn nhiều thời gian nhất khi làm UI game không phải hình dáng của một cái nút — mà là tất cả những gì lệch dần giữa các thiết bị. gohud xử lý chỗ lệch đó ở một nơi duy nhất.

Mọi số đo đều là một token

Khoảng cách, góc bo và cỡ chữ được gọi theo tên chứ không viết thành số. Đổi theme là cả màn hình đổi theo.

Cỡ nhìn thấy ≠ cỡ bấm được

Nút đóng trông chỉ 36dp nhưng vùng chạm của nó là 48dp. Khi các ô chen nhau và vùng chạm chồng lên nhau, ô nào có tâm gần hơn sẽ nhận cú bấm.

Tai thỏ và bàn phím

Các mảnh HUD nằm gọn trong vùng an toàn, và ô nhập liệu tự nâng lên trên bàn phím ảo khi bàn phím hiện ra.

Back chỉ đóng một thứ

Phím Escape và nút Back của Android chỉ đóng lớp trên cùng. Các cửa sổ xếp chồng không biến mất cùng lúc.

Thông báo không cướp thao tác

Bấm xuyên qua một snackbar thì nút nằm dưới vẫn nhận được. Focus cũng không bị lấy mất.

Biểu tượng được gọi theo tên

Widget chỉ biết GoIconSet.CLOSE. Đổi bộ biểu tượng là mọi hình vẽ đổi theo mà không phải sửa một dòng code nào. Biểu tượng →

Mười bốn diện mạo, một dòng

GoUi.use_preset() đổi cùng lúc theme, skin và biểu tượng — khung bo tròn, khung vát góc kiểu sci-fi, khung rèn kiểu trung cổ, các thành phần ứng dụng của Material 3, kẹo thạch cho trẻ em, nét mực truyện tranh hay lớp sơn arcade.

Dễ đọc là thứ đo được

Mọi theme đều được đối chiếu với WCAG, kể cả các trạng thái của nút và những tấm HUD bán trong suốt đặt trên nền trắng tinh lẫn đen tuyền.

Mọi thứ đều chạy mà không cần bật plugin. Bật lên thì có thêm autoload GoRuntime theo dõi kích thước cửa sổ, tỉ lệ dp và chiều cao bàn phím, cùng vài mục project setting cho tài nguyên cấu hình và preset — đó là tiện ích, không phải điều kiện bắt buộc.

Cài đặt gohud

Hai lối vào. Để tác nhân AI làm hộ, hoặc thả thư mục vào dự án — không còn gì phải cấu hình.

Cài đặt

Bắt đầu nhanh

Năm dòng là có một màn hình đã gắn theme. Toàn bộ các bước nằm ở trang cài đặt.

Bắt đầu nhanh

Đổi diện mạo — cả màu sắc lẫn hình dáng

Một Theme chỉ đổi được dáng vẻ của những gì engine tự vẽ. StyleBoxFlat chỉ có duy nhất một kiểu góc là bo tròn, còn cần điều khiển, ô nhanh và coach mark thì do code vẽ ra — nên riêng theme không bao giờ đổi được hình dáng của chúng. Vì vậy gohud kèm sẵn preset: một theme, một skin và một bộ biểu tượng chọn thành một khối.

GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)   # theme, skin và biểu tượng cùng lúc

Preset	Diện mạo
`default_dark`	gohud nguyên bản — góc bo tròn, màu nhấn xanh dịu
`default_light`	Vẫn hình dáng đó trên bảng màu sáng
`scifi_dark`	Góc vát, viền neon lam và ánh sáng tỏa, cần điều khiển hình lục giác, khung ngắm góc
`scifi_light`	Vẫn hình dáng góc cạnh đó trong bảng màu bản vẽ kỹ thuật sáng
`medieval_dark`	Sắt tối và da thuộc, khung vàng cổ, đinh tán, biểu tượng khắc chìm, tiêu đề Cinzel
`medieval_light`	Giấy da, mực và đồng thau với vẫn những khung rèn đó
`material_light` Mới	Material 3 cho màn hình ứng dụng — nút hình viên thuốc, hộp thoại 28dp, thẻ tô nền, thanh điều hướng, FAB và thanh tìm kiếm của ứng dụng, Roboto
`material_dark` Mới	Cùng các hình dạng Material 3 trên nền tối chuẩn
`kids_light` Mới	Hộp đồ chơi cho trẻ em — phím kẹo thạch với viền dày và gờ lún xuống khi nhấn, màu bút sáp, trang nền màu nắng
`kids_dark` Mới	Cùng hộp đồ chơi đó trên trang nền xanh đêm
`comic_light` Mới	Khung truyện tranh — viền mực đậm và bóng đổ sắc nét trên mọi mặt, tấm nền trắng trên trang nền màu kem như giấy; bóng đổ, cỡ bóng và độ dày viền đều là thiết lập
`comic_dark` Mới	Cùng nét mực đó trên trang nền đêm — viền màu kem và màu chính vàng
`arcade_light` Mới	Một máy game thùng — mọi phím được sơn dải chuyển màu, vệt bóng và gờ, mang nhãn chữ trắng viền mực; các bảng dày có khung trên trang nền xanh da trời, dải băng tiêu đề vàng kim trên cửa sổ
`arcade_dark` Mới	Vẫn những phím rực rỡ ấy trên bảng xanh navy và trang nền đêm

Màn hình gallery của gohud với preset default_dark — góc bo tròn, màu nhấn xanh — `default_dark` — góc bo tròn, màu nhấn xanh dịu

Preset default_light — vẫn hình dáng đó trên bảng màu sáng — `default_light` — cùng hình dáng, bảng màu sáng

Preset scifi_dark — góc vát và neon lam — `scifi_dark` — góc vát, neon lam

Preset scifi_light — vẫn hình dáng góc cạnh đó trong bảng màu bản vẽ kỹ thuật — `scifi_light` — cùng hình dáng góc cạnh, bảng màu bản vẽ

Bốn ảnh đó là cùng một màn hình gallery. Không khác nhau một dòng code nào — chỉ khác tên preset. Góc nút, hình công tắc, hàng danh sách và viền ô nhập đều đổi theo cùng lúc.

Bộ sưu tập trung cổ

medieval_dark ghép sắt và da thuộc với vàng cổ; medieval_light dùng giấy da và mực. Khung menu mang một chiếc đinh tán và một hoa văn góc nhỏ, còn HUD luôn hiện thì giữ nét trầm; 16 biểu tượng khắc chìm vẽ lại các món đồ, và chỉ tiêu đề với phụ đề mới dùng font Cinzel kèm theo.

medieval_dark — bảng nhân vật, túi đựng ô nhanh và sổ nhiệm vụ — `medieval_dark` — sắt và da thuộc

medieval_light — vẫn các màn hình nhân vật, túi đồ và nhiệm vụ đó trên nền giấy da — `medieval_light` — giấy da và mực

Cả hai ảnh đều là examples/medieval/medieval.tscn, dựng từ các widget tiêu chuẩn. Hướng dẫn trung cổ và cách tạo vương quốc của riêng bạn →

Cùng một màn hình trên điện thoại và trên máy để bàn

Các ảnh gallery là điện thoại ở chế độ dọc. Bên dưới là cùng đoạn code đó ở 1280×800 — nội dung dừng lại ở bề ngang dễ đọc (480dp) rồi canh giữa, còn HUD vẫn nằm ở các góc. Biểu mẫu bước tránh các mảnh HUD nổi, nhưng không nhúc nhích khi nó vốn đã không vướng: cứ đẩy bừa thì trên màn hình rộng nội dung sẽ lệch khỏi tâm.

default_dark ở 1280x800 — nội dung canh giữa, HUD ở các góc — `default_dark` · 1280×800

scifi_dark ở 1280x800 — cùng bố cục với tấm nền vát góc và neon — `scifi_dark` · 1280×800

Cùng một bảng trượt, khác diện mạo

Một bảng trượt dưới ở default_dark — Mặc định — thẻ bo tròn, hàng tìm kiếm và chân trang cố định

Một bảng trượt dưới ở scifi_dark — viền nhấn neon chạy dọc mép trên — Sci-fi — viền nhấn ở mép trên, góc cắt, ánh sáng tỏa

Chọn một preset trong Project Settings → gohud → Theme → Preset, hoặc đặt GoConfig.preset. Điền thẳng theme, skin hay icons thì giá trị đó thắng preset, nên bạn có thể lấy một preset rồi ghi đè đúng một phần của nó.

Một theme mới chỉ là một file JSON. new_theme.py kingdom --from medieval_dark ghi ra một bảng màu liệt kê rõ từng giá trị kế thừa; make_theme.py kingdom dựng theme, phần hình vẽ cho các control và các núm chỉnh của skin, rồi preset hiện ra trong danh sách chọn. Mọi thiết lập và núm chỉnh →

Skin — nơi Theme không với tới

Skin nắm cần điều khiển, mặt các ô nhanh, vòng coach mark, chip, skeleton, alert, đường kẻ chia và tiêu đề mục. Kế thừa nó rồi chỉ ghi đè đúng phần bạn muốn đổi.

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

Lớp	Hình dáng nó tạo ra được
`GoStyleBoxCut`	Góc cắt chéo (vát), một cạnh nhấn dày lên, ánh sáng tỏa ra ngoài
`GoStyleBoxBracket`	Chỉ dấu ở bốn góc, không bao kín nội dung
`GoStyleBoxMedieval`	Khung rèn với đinh tán, hoa văn khắc ở góc, vệt sáng vát cạnh và vân vật liệu
`GoStyleBoxJelly`	Một viên kẹo thạch — viền dày, gờ đặc lún xuống khi nhấn, thân sáng hơn ở phía trên và một vệt bóng trắng
`GoStyleBoxComic`	Một khung truyện tranh — viền mực đậm và bóng đổ sắc nét, cả hai đều do `GoConfig` định cỡ ngay khi game đang chạy
`GoStyleBoxArcade`	Một phím hoặc một bảng kiểu arcade — thân chuyển màu, vệt bóng trắng, gờ lún xuống khi nhấn và viền mực; một bảng thêm khung màu dày bao quanh lòng bảng sáng màu

Cả sáu đều tuần tự hóa được vào một tài nguyên Theme — chính điều đó cho phép một theme đổi hình dáng, chứ không chỉ đổi màu. GoSkinSciFi, GoSkinMedieval, GoSkinMaterial, GoSkinKids, GoSkinComic và GoSkinArcade là các lớp con có sẵn.

Ô nhanh, cần điều khiển và chip do từng skin có sẵn vẽ — mặc định, trẻ em, Material, trung cổ và sci-fi — Những gì một skin vẽ — mặc định, trẻ em, Material, trung cổ, sci-fi

Ô nhanh, cần điều khiển và chip do skin truyện tranh vẽ — viền mực và bóng đổ sắc nét — …và skin truyện tranh

Ô nhanh, cần điều khiển và chip do skin arcade vẽ — nắp phím bóng loáng và một đế có bốn mũi tên — …và skin arcade

GoStyle.box() luôn trả về một StyleBoxFlat, vì phía gọi nhận nó rồi chỉnh bg_color hoặc corner_radius. Hãy dùng GoStyle.surface() khi cần giữ nguyên một hình dáng tùy biến.

Widget

Toàn bộ các mảnh, gói trong một bảng. Chi tiết từng cái → · Mọi widget kèm hình ảnh → · Cửa sổ bật lên và hộp thoại, hướng dẫn đầy đủ →

Lớp	Lớp cha	Làm gì
`GoSurface`	Control	Vỏ thẻ nổi — đặt ở giữa, ở đáy hoặc neo vào một control, đầu và chân trang cố định, thân cuộn được, kéo để đổi kích thước
`GoSheet`	CanvasLayer	Trang trồi lên từ đáy, nằm trên lớp riêng nên luôn ở trên HUD
`GoDialogs`	Node	Hộp thoại xác nhận và cảnh báo mà bạn `await`; `destructive` cho các thao tác không thể hoàn tác
`GoForm`	MarginContainer	Biểu mẫu giới hạn bề ngang, tránh bàn phím ảo và, với `avoid_hud`, tránh cả HUD
`GoScroll`	ScrollContainer	Cuộn bằng ngón tay; thanh cuộn nép vào phần đệm sẵn có của thẻ
`GoNotice`	PanelContainer	Snackbar không nhận thao tác cũng không nhận focus
`GoPromptCard`	PanelContainer	Một câu hỏi không chặn game lại
`GoCoachMark`	Control	Chuyến tham quan có hướng dẫn chỉ vào các control thật; bấm đúng mục tiêu là sang bước kế
`GoHudAnchor`	Control	Ghim các mảnh HUD vào một trong chín vị trí trong vùng an toàn
`GoBar`	Control	Thanh máu, mana và kinh nghiệm với chuyển động mượt
`GoSlot`	Button	Một ô nhanh — biểu tượng, số lượng, hồi chiêu và phím tắt trên cùng một mặt
`GoJoystick`	Control	Cần điều khiển ảo ở chế độ cố định, đi theo hoặc tương đối
`GoIconButton`	Button	Trông nhỏ, bấm rộng
`GoStyle`	static	Nút, hàng danh sách, ô nhập, chip, bảng, tab và nhiều thứ khác, làm ra theo một cách thống nhất

Chờ đợi, báo tin, đếm

Lớp	Lớp cha	Làm gì
`GoSnackbar`	Node	lời nhắn tự tìm lấy chỗ đứng
`GoSpinner`	Control	cuộc chờ chưa thấy điểm dừng
`GoBadge`	PanelContainer	chấm chưa đọc, nhãn MỚI, con số 99+

Biểu mẫu và danh sách

Lớp	Lớp cha	Làm gì
`GoField`	VBoxContainer	cái hàng có thể sai
`GoInputGroup`	HBoxContainer	ô nhập hàn liền với cái nút của nó
`GoCombobox`	Button	bộ chọn có tìm kiếm
`GoCodeInput`	VBoxContainer	mã coupon và mã quà tặng
`GoTable`	VBoxContainer	tiêu đề cột sắp xếp được, hàng chọn được
`GoPagination`	HBoxContainer	trang số, hoặc một hàng Xem thêm

Những hình dạng mà game thật sự dùng

Lớp	Lớp cha	Làm gì
`GoRewardCalendar`	VBoxContainer	điểm danh hằng ngày
`GoRadar` · `GoDonut`	Control	chỉ số nhìn một cái là thấy
`GoCarousel`	VBoxContainer	banner và màn chọn nhân vật
`GoKbd`	HBoxContainer	gợi ý phím không nói dối

Nằm đè lên màn hình

Lớp	Lớp cha	Làm gì
`GoDrawer`	CanvasLayer	bảng bên hông
`GoPopover`	RefCounted	tấm thẻ ghim vào một chỗ
`GoContextMenu`	RefCounted	nhấn giữ và bấm chuột phải
`GoConsole`	CanvasLayer	bảng điều khiển của lập trình viên

Go HUD Skill

gohud có sẵn một AI skill: toàn bộ API, mẫu chạy được ngay và trình mở xem trước. Dán một khối dưới đây vào tác nhân lập trình của bạn, nó sẽ cài gohud và biết cách dùng.

Go HUD Skill

Dễ đọc là đo được, không phải ước lượng bằng mắt

"Đẹp" là chuyện gu; "dễ đọc" thì đo được. Chữ xám nhạt trông ổn trên màn hình tốt và biến mất trên điện thoại giữa ban ngày — chọn bằng mắt thì sớm muộn cũng dính.

python3 addons/gohud/tools/check_contrast.py

Mọi cặp màu và nhãn của từng trạng thái nút trên chính tấm nền nó nằm lên đều được đo theo WCAG, trên cả mười bốn theme. Màu bán trong suốt được ghép lên nền thật của nó trước — đo thẳng vào chúng sẽ cho tỉ số đẹp hơn những gì màn hình thật sự hiển thị.

Vì vậy màu chữ là thứ suy ra, không phải chọn: trình dựng lấy màu trong bảng màu làm điểm xuất phát rồi đẩy độ sáng của nó lên cho tới khi vượt ngưỡng trên mọi bề mặt mà nó có thể rơi vào. Đổi bảng màu thì độ tương phản đi theo. Các quy tắc và những cái bẫy phía sau chúng →

Kiểm tra, phát hành và trang web này

Một điểm vào chạy mọi lượt kiểm tra; mỗi phần thấy được thứ mà các phần kia không thấy.

bash addons/gohud/tools/check_all.sh

Lượt kiểm tra	Bắt được gì
`run_tests.sh` ở bốn cỡ màn hình	Hành vi và bố cục widget, vị trí khi RTL, focus bàn phím, độ tương phản của skin lúc chạy, mọi preset
`new_project_check.sh`	Những phụ thuộc ngầm vào dự án chủ; với `--zip` là bản phát hành đúng như khi giao, với `--export` là một bản build Web
`check_contrast.py`	Độ tương phản WCAG của từng file theme, tính cả trạng thái nút và tấm nền bán trong suốt
`check_generated.py` · `check_scaffold.sh`	Theme sinh ra khớp với bảng màu của nó; một theme dùng xong bỏ dựng được và qua được kiểm tra tương phản
`check_package.py`	Phiên bản lấy từ package.json, việc chuyển mục changelog và nội dung file ZIP, trên các bản sao tạm
`check_site.py`	Liên kết, neo, ngôn ngữ trang, bảng thuật ngữ và bảng núm chỉnh của trang này

Lượt chạy gần nhất được ghi lại — 2026-09-13, Godot 4.7.2, macOS, renderer Compatibility. 438 trên 438 lượt kiểm tra ở 390×844, 844×390, 768×1024 và 1280×800 trong một dự án trống; lại 438 trên 438 khi có autoload GoRuntime; một bản export Web; không một lỗi tương phản nào trên cả sáu theme. Thiết bị Android hay iOS thật không nằm trong lượt chạy này.

Phiên bản phát hành

cat addons/gohud/package.json       # { "version": "1.1.0" }
bash addons/gohud/tools/release.sh  # toàn bộ kiểm tra → ZIP → file ZIP đó trong dự án trống
bash addons/gohud/tools/package.sh  # 1.1.0 → builds/1.1.0/gohud-1.1.0.zip

Phiên bản chính là số ghi trong package.json — việc đóng gói không bao giờ tự tăng nó. Muốn phát hành phiên bản mới, hãy đổi số đó trước. Một lượt chạy thành công đặt plugin.cfg và GoUi.VERSION theo giá trị đó, và chỉ ở lần đầu đóng gói phiên bản ấy mới chuyển phần ghi chú Unreleased trong CHANGELOG.md thành một mục có ngày tháng. Đóng gói lại cùng phiên bản sẽ dựng lại file ZIP và thay thế file cũ. Lượt chạy hỏng thì không đổi gì cả. File ZIP không chứa trang web này, phần kiểm thử, các công cụ và package.json.

Trang web này

python3 addons/gohud/tools/make_site.py            # bảng thuật ngữ và bảng núm chỉnh của skin, sinh ra từ mã nguồn
python3 addons/gohud/tools/check_site.py           # liên kết, neo, ngôn ngữ, bảng thuật ngữ, bảng được sinh ra
bash addons/gohud/tools/site_shots.sh /tmp/shots   # ảnh chụp mọi trang ở cỡ máy để bàn và điện thoại

Các trang là HTML thuần trong www/ — tiếng Anh ở thư mục gốc, tiếng Hàn trong ko/. Một workflow GitHub Actions xuất bản thư mục đó làm gốc của trang web.

Giao diện game, chạy bằng một tài nguyên duy nhất

Mới: arcade, truyện tranh, Material 3 và một diện mạo cho trẻ em

Material 3 — cho màn hình ứng dụng

Trẻ em — hộp đồ chơi

Truyện tranh — nét mực đậm

Arcade — phím sơn màu

Arcade: phím sơn màu và bảng dày

Mọi phím đều được sơn

Về đêm: arcade_dark

Diện mạo arcade hoạt động thế nào

Bề mặt

Nhãn luôn đọc được

Cửa sổ

Truyện tranh: nét mực đậm và bóng đổ sắc nét

Mọi widget đều được viền mực

Về đêm: comic_dark

Diện mạo truyện tranh hoạt động thế nào

Một StyleBox cho mọi mặt

Nhấn là phẳng

Skin viền mực phần còn lại

Cửa sổ có ô tiêu đề

Dễ đọc cả ngày lẫn đêm

Không đổi bố cục

Ba thiết lập và một lệnh gọi

Trông thế nào khi vào game

Những việc nó gánh thay bạn

Mọi số đo đều là một token

Cỡ nhìn thấy ≠ cỡ bấm được

Tai thỏ và bàn phím

Back chỉ đóng một thứ

Thông báo không cướp thao tác

Biểu tượng được gọi theo tên

Mười bốn diện mạo, một dòng

Dễ đọc là thứ đo được

Cài đặt gohud

Bắt đầu nhanh

Đổi diện mạo — cả màu sắc lẫn hình dáng

Bộ sưu tập trung cổ

Cùng một màn hình trên điện thoại và trên máy để bàn

Cùng một bảng trượt, khác diện mạo

Skin — nơi Theme không với tới

Widget

Chờ đợi, báo tin, đếm

Biểu mẫu và danh sách

Những hình dạng mà game thật sự dùng

Nằm đè lên màn hình

Go HUD Skill

Dễ đọc là đo được, không phải ước lượng bằng mắt

Kiểm tra, phát hành và trang web này

Phiên bản phát hành

Trang web này

Về đêm: `arcade_dark`

Về đêm: `comic_dark`