Một preset gói cả ba. Những trường bạn để trống sẽ lùi về giá trị mặc định.
| Lớp | Quyết định | Cách đổi |
|---|---|---|
Theme |
Màu sắc, kích thước, tỉ lệ chữ, và hình dáng của mọi thứ do engine vẽ — tấm nền của nút, ô nhập, tab, hình vẽ công tắc | Tự soạn một file .tres, hoặc sinh ra bằng tools/make_theme.py |
GoSkin |
Hình dáng của mọi thứ do code vẽ — cần điều khiển, mặt các ô nhanh, vòng coach mark, chip, skeleton, đường kẻ chia, tiêu đề mục | Kế thừa nó rồi chỉ ghi đè những phương thức bạn quan tâm |
GoIconSet |
Biểu tượng gọi theo tên — 84 hình mặc định, hoặc 16 hình khắc chìm của bộ trung cổ phủ lên chúng. Một gói texture hay một font biểu tượng; phía gọi viết y như nhau | Cung cấp một bộ, hoặc chỉ ghi đè vài cái tên |
StyleBoxFlat có —
đặt bán kính về không thì được góc vuông; giữa hai thứ đó không có gì cả. Góc cắt chéo,
một cạnh dày lên, ánh sáng tỏa ra ngoài: engine không vẽ cái nào trong số đó. Còn cần điều khiển và coach mark
thì được vẽ trong _draw(), nơi theme hoàn toàn không với tới.
Chọn một cái
GoUi.use_preset(GoThemePresets.SCIFI_DARK)
Đúng một dòng đó đổi cả theme, skin và biểu tượng. Từ trình soạn thảo thì dùng
Project Settings → Gohud → Theme → Preset; từ một tài nguyên cấu hình thì dùng GoConfig.preset.
Giữ riêng một trường cho mình
GoUi.use_preset(GoThemePresets.SCIFI_DARK)
GoUi.config.icons = my_icons # biểu tượng của bạn, còn lại là của preset
Đặt thẳng theme, skin hay icons thì giá trị đó thắng preset.
Mười bốn preset có sẵn
| Preset | Tấm nền | Skin · biểu tượng |
|---|---|---|
default_dark · default_light | Tấm nền StyleBoxFlat bo tròn trên một thang đổ bóng chia bậc; nút chính nhô lên rồi lún xuống khi bấm | GoSkin · 84 biểu tượng mặc định |
scifi_dark · scifi_light | Tấm nền GoStyleBoxCut vát góc với viền neon và ánh sáng tỏa; dấu focus bằng GoStyleBoxBracket | GoSkinSciFi — cần điều khiển hình lục giác · biểu tượng mặc định |
medieval_dark · medieval_light | Khung rèn GoStyleBoxMedieval — sắt và da thuộc, hoặc giấy da — với đinh tán và hoa văn góc trên các menu | GoSkinMedieval · 16 biểu tượng khắc chìm phủ lên bộ mặc định |
material_light · material_dark Mới | Material 3 Expressive cho màn hình ứng dụng — nút viên thuốc 40dp trong vùng chạm 48dp, hộp thoại 28dp, thẻ tô nền, ô nhập có viền, 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, bộ chọn ngày) theo token thành phần của M3 | GoSkinMaterial · biểu tượng mặc định |
kids_light · kids_dark Mới | Dành cho trẻ em — hộp đồ chơi: viền dày và một gờ đặc dưới mỗi phím, phím lún xuống khi nhấn; ô nhập lõm, tab bong bóng, thanh thạch; mỗi loại điều khiển một màu bút sáp riêng, ô nhanh như kẹo, huy hiệu dán, cần điều khiển cầu vồng và biểu đồ nhiều màu. Kích thước và phông chữ của dự án giữ nguyên. | GoSkinKids · biểu tượng mặc định |
arcade_light · arcade_dark Mới | Một máy game thùng do GoStyleBoxArcade vẽ: mọi phím được sơn dải chuyển màu từ trên xuống dưới, một vệt bóng trắng và một gờ lún xuống khi nhấn, trong viền mực xanh navy, nhãn là chữ trắng viền mực — màu chính xanh lá, phím xanh lam, nguy hiểm màu đỏ, phím nhỏ tím oải hương. Bảng dày với khung màu bao quanh lòng bảng sáng màu; dải băng tiêu đề vàng kim và phím đóng tròn màu đỏ trên cửa sổ. | GoSkinArcade · biểu tượng mặc định |
comic_light · comic_dark Mới | Khung truyện tranh do GoStyleBoxComic vẽ: viền mực đậm và bóng đổ sắc nét trên mọi mặt, bóng biến mất khi mặt được nhấn; công tắc, ô đánh dấu và núm thanh trượt đều được viền mực, cửa sổ có ô tiêu đề màu vàng. Độ dày viền, cỡ bóng và việc có hiện bóng hay không đều là thiết lập của GoConfig. | GoSkinComic · biểu tượng mặc định |
Cả mười bốn, đặt cạnh nhau
Cùng một màn hình gallery, chỉ đổi tên preset — không một dòng code widget nào khác đi. Mỗi ảnh là một chiếc điện thoại cầm dọc, 390×844.

default_dark
default_light
scifi_dark
scifi_light
medieval_dark
medieval_light
material_light
material_dark
kids_light
kids_dark
comic_light
comic_dark
arcade_light
arcade_darkTrung cổ: sắt, da thuộc và giấy da
medieval_dark ghép sắt tối và da thuộc với vàng cổ. medieval_light
dùng giấy da và mực. Cả hai đều dùng GoSkinMedieval, vẫn các widget sẵn có, và 16 biểu tượng
nguyên bản với chi tiết khắc chìm; biểu tượng điều hướng lùi về bộ gốc.
GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)
# Hoặc: GoUi.use_preset(GoThemePresets.MEDIEVAL_LIGHT)
Hãy chọn preset trước khi tạo UI. Giá trị đặt thẳng cho GoConfig.theme,
skin hay icons vẫn được ưu tiên. Mở
res://addons/gohud/examples/medieval/medieval.tscn rồi nhấn F6 để xem một bảng nhân vật,
túi đồ và sổ nhiệm vụ chạy thật. Các nút trong đó chuyển biến thể và mở chi tiết món đồ.


Khung menu có một chiếc đinh tán và hoa văn góc nhỏ; HUD luôn hiện thì giữ nét viền trầm.
Máu, mana và thể lực dùng phần tô màu đỏ, lam và ô liu. Cinzel chỉ dùng cho tiêu đề và phụ đề;
chữ thân bài giữ font của dự án chủ hoặc font mặc định. Font kèm theo có sẵn giấy phép của nó tại
assets/fonts/cinzel/OFL.txt.
Bộ khắc chìm vẽ lại bag, book, box, coin, crown,
flag, heart, key, map, potion, shield,
star, sword và user, đồng thời thêm scroll và seal.
Mọi cái tên khác lùi về bộ mặc định, nên close và settings giữ nguyên hình vẽ mặc định
ở mọi preset. Cinzel chỉ phủ chữ Latinh; hãy cấp cho tiêu đề đã bản địa hóa một font riêng qua
shape.fonts.
DPITexture; một ô nhanh thật dùng đúng skin; đổi núm chỉnh của một bản sao skin
thì thay đổi lan tới ô nhanh mà không phải đụng vào preset; và chuyển ngược lại thì hình dáng của bản mặc định lẫn sci-fi được khôi phục.
Dựng một vương quốc của riêng bạn
python3 addons/gohud/tools/new_theme.py kingdom --from medieval_dark
# Sửa themes/palettes/kingdom.json, rồi:
python3 addons/gohud/tools/make_theme.py kingdom
godot --headless --path . --import
# Trong GDScript, trước khi tạo các widget:
GoUi.use_preset(&"kingdom")
Theme JSON kế thừa được theme JSON khác. Giá trị bỏ trống thì giữ thiết lập của theme cha; kế thừa vòng tròn sẽ bị từ chối. Preset sinh ra giữ lại bộ biểu tượng của theme cha.
| Thiết lập | Tác dụng |
|---|---|
shape.material | 0: sắt · 1: da thuộc · 2: giấy da. Quyết định các vết trên bề mặt. |
shape.grain_alpha | Độ đậm của vân bề mặt. Đặt 0 để có mặt phẳng sạch. |
shape.ornament_scale · shape.bevel_strength | Cỡ hoa văn ở góc menu và độ mạnh của vệt sáng vát cạnh. |
shape.fonts | Gán các vai trò tiêu đề, phụ đề, chú thích, thân bài và nút vào các file font res:// nằm trong add-on. Vai trò bỏ trống thì giữ font kế thừa. |
skin.dials | Bán kính góc ô nhanh, đinh tán hiện hay ẩn, vân và vệt sáng. Bảng đầy đủ bên dưới liệt kê từng núm chỉnh. |
Material 3: diện mạo cho màn hình ứng dụng Mới
material_light và material_dark mang Material 3 Expressive vào gohud — hình dạng, kích thước và
kiểu chữ của các thành phần M3, với mọi con số được đọc từ bộ token M3 chính thức (material-web,
tokens/versions/latest). Hãy dùng chúng ở nơi một màn hình nên mang cảm giác của một ứng dụng hơn là menu game:
cửa hàng, hộp thư, trang tài khoản và cài đặt, bảng xếp hạng, một ứng dụng đồng hành.
GoUi.use_preset(GoThemePresets.MATERIAL_LIGHT)
# Hoặc: GoUi.use_preset(GoThemePresets.MATERIAL_DARK)

material_light
material_dark
GoDialogs · material_light
GoDialogs · material_darkNhững gì thay đổi
| Phần | Trong Material 3 |
|---|---|
| Nút | Hình viên thuốc (bo tròn hết cỡ). Tấm nền cao 40dp, canh giữa trong vùng chạm 48dp, nên vùng bấm không bị thu nhỏ; tấm nền của nút thu gọn là 32dp. Nhãn dùng Roboto với độ đậm 500. |
| Hộp thoại và bảng trượt | Góc 28dp (extra-large), đệm 24dp và tiêu đề 24sp — GoDialogs, GoSurface, GoSheet và mọi cửa sổ bật lên dựng trên chúng. |
| Thẻ | Thẻ tô nền với góc 12dp và đệm 16dp. |
| Ô nhập và thanh trượt | Ô nhập chữ có viền; thanh trượt Expressive với tay nắm cao. |
| Chip và nút phân đoạn | Góc 8dp (small). |
| Thành phần ứng dụng | GoNavBar, GoAppBar, GoFab, GoSearchBar, các chip, GoProgress và GoDatePicker theo token thành phần của M3. |
| Kiểu chữ | Roboto kèm theo cho tiêu đề, phụ đề, chú thích và nút. Chữ thân bài giữ font của dự án bạn, nên tiếng Hàn, tiếng Nhật, tiếng Trung hay tiếng Ả Rập vẫn hiển thị được. |
| Độ đục | Mọi tấm nền đều đục — bề mặt M3 là bề mặt đặc. (Tấm nền của mặc định, sci-fi và trung cổ đục 80%, để game lộ ra phía sau.) |
| Skin | GoSkinMaterial: ngăn kéo là side sheet dạng modal của M3, mặt của bảng điều khiển là floating toolbar của M3, banner nằm trên surface_container_low. |
tools/check_contrast.py đo cả hai diện mạo này như mọi diện mạo khác.
Roboto dùng giấy phép SIL Open Font License 1.1 (assets/fonts/roboto/OFL.txt) và chỉ được các preset
Material sử dụng.
Trẻ em: hộp đồ chơi Mới
kids_light (kem và đào với màu chính tím nho) và kids_dark (nền việt quất, màu chính vàng
nắng, các viên thuốc màu bạc hà) là diện mạo làm cho game và ứng dụng học tập của trẻ em — mập mạp, tươi sáng và mềm nhún,
đúng kiểu thứ mà một ngón tay nhỏ muốn bấm vào.
GoUi.use_preset(&"kids_light")
# Hoặc: GoUi.use_preset(&"kids_dark")

kids_light
kids_dark
GoDialogs · kids_light
GoDialogs · kids_darkNhững gì thay đổi
| Phần | Trong các diện mạo trẻ em |
|---|---|
| Mọi mặt | Một viên kẹo thạch, do GoStyleBoxJelly vẽ: viền dày, một gờ đặc dưới mọi thứ bạn bấm, thân sáng hơn ở trên và đậm hơn ở dưới, và một vệt bóng trắng ở góc trên bên trái. Phím, hàng danh sách, tiêu đề gập mở, ô nhập, thanh, thanh trượt và tấm nền đều khoác nó. |
| Khi nhấn | Gờ biến mất và mặt lún xuống đúng chỗ của nó, rồi bẹp như thạch — rộng và dẹt trong chốc lát, rồi nảy đàn hồi trở lại. Nó chạy trên mọi nút do gohud tạo ra; reduce_motion tắt nó đi. |
| Ô nhập, tab, thanh | Ô nhập chữ là cùng viên thạch đó lộn vào trong — một cái giếng lõm. Tab là bong bóng, thanh có vệt bóng như thạch. |
| Màu sắc | Mỗi loại điều khiển một màu bút sáp riêng, do cùng trình sinh màu của mọi diện mạo chọn ra, nên mọi ngưỡng tương phản vẫn đạt. |
| Cửa sổ | Một dải băng màu nắng (màu bạc hà vào ban đêm) phía sau tiêu đề cửa sổ — tiêu đề co lại, xuống tới 15, để nằm trên một dòng — và một nút đóng tròn hình viên kẹo mang màu bút sáp nguy hiểm với dấu chéo trắng. |
| Phần của skin | GoSkinKids: ô nhanh là những khối kẹo lún xuống trong lúc hồi chiêu, huy hiệu là nhãn dán, chip và viên thuốc điều hướng là những viên thạch nhỏ, avatar là kẹo tròn, cần điều khiển là cầu vồng, biểu đồ dùng màu bút sáp, alert và notice là những mẩu giấy dán có viền đặc. |
| Độ đục | Tấm nền, thẻ, notice và cửa sổ bật lên đều đục. |

Làm hộp đồ chơi của riêng bạn
python3 addons/gohud/tools/new_theme.py candy --from kids_light
# Sửa themes/palettes/candy.json, rồi:
python3 addons/gohud/tools/make_theme.py candy
GoUi.use_preset(&"candy")
Truyện tranh: nét mực đậm Mới
comic_light (tấm nền trắng trên trang nền màu kem như giấy, màu chính xanh coban) và comic_dark (tấm nền màu
đá phiến trên trang nền đêm, viền màu kem, màu chính vàng) vẽ mọi mặt như một khung truyện tranh — một đường viền mực đậm với
bóng đổ sắc nét phía sau.
GoUi.use_preset(&"comic_light")
# Hoặc: GoUi.use_preset(&"comic_dark")

comic_light
comic_dark
GoDialogs · comic_light
GoDialogs · comic_darkNhững gì thay đổi
| Phần | Trong các diện mạo truyện tranh |
|---|---|
| Mọi mặt | Do GoStyleBoxComic vẽ: màu bề mặt nằm trong một đường viền đậm màu mực, và một bóng đổ sắc nét lệch xuống dưới và sang phải. Phím, hàng danh sách, ô nhập, tab, thanh, thanh trượt, tấm nền và cửa sổ bật lên đều khoác nó. |
| Khi nhấn | Bóng đổ biến mất và mặt lún xuống đúng chỗ của nó. |
| Điều khiển | Công tắc, ô đánh dấu, nút chọn một và núm thanh trượt cũng được viền mực, mỗi cái có bóng đổ nhỏ của riêng mình. |
| Cửa sổ | Một ô tiêu đề màu vàng phía sau tiêu đề cửa sổ và một nút đóng tròn viền mực. |
| Phần của skin | GoSkinComic: ô nhanh, chip, huy hiệu, avatar, notice, thanh điều hướng, FAB và các ô ngày đều được viền mực; núm cần điều khiển đổ bóng; biểu đồ dùng các màu cơ bản đậm. |
| Độ đục | Tấm nền, thẻ, notice và cửa sổ bật lên đều đục; thẻ HUD đục 92%. |
Thiết lập mực và bóng
Ba thiết lập 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, bất kể thiết lập nói gì:
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

Làm truyện tranh của riêng bạn
python3 addons/gohud/tools/new_theme.py inked --from comic_light
# Sửa themes/palettes/inked.json, rồi:
python3 addons/gohud/tools/make_theme.py inked
GoUi.use_preset(&"inked")
Arcade: phím sơn màu và bảng dày Mới
arcade_light (bảng trắng trên trang nền xanh da trời) và arcade_dark (bảng xanh navy trên trang nền đêm)
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, nằm trong viền mực xanh navy — và mọi bảng đều dày, là một khung màu
bao quanh lòng bảng sáng màu.
GoUi.use_preset(&"arcade_light")
# Hoặc: GoUi.use_preset(&"arcade_dark")

arcade_light
arcade_dark
GoDialogs · arcade_light
GoDialogs · arcade_darkNhững gì thay đổi
| Phần | Trong các diện mạo arcade |
|---|---|
| Phím | Do GoStyleBoxArcade vẽ: thân chuyển màu, một vệt bóng trắng quanh góc trên bên trái, một gờ đậm hơn và viền mực xanh navy. Phím chính màu xanh lá, phím thường và tab được chọn màu xanh lam, phím nguy hiểm màu san hô và đỏ, phím nhỏ và các tab còn lại màu tím oải hương. |
| Nhãn | Chữ trắng viền mực trên mọi phím sơn màu. Mỗi màu sơn được dịch đi cho đến khi nhãn đó đọc được ở mọi độ cao của dải chuyển màu — từ 4.6:1 trở lên, tính đường viền là một phần của chữ, đúng như WCAG. |
| Khi nhấn | Gờ biến mất, phím lún xuống đúng chỗ của nó rồi bật trở lại. |
| Bảng | Tấm nền, thẻ, thẻ HUD và cửa sổ bật lên đều dày: một khung màu (6dp quanh cửa sổ, 4 quanh thẻ hoặc thẻ HUD, 3 quanh menu hoặc notice) có vệt bóng và gờ riêng, bao quanh lòng bảng sáng màu có một nét mực. Phần đệm của chúng tăng lên một chút để chứa khung, nên chữ không bao giờ chạm vào khung. |
| Ô nhập và thanh | Ô nhập văn bản và rãnh của thanh là những lòng lõm; phần lấp đầy của thanh là một ống sơn bóng loáng mang sắc tươi của màu nó. |
| Cửa sổ | Một dải băng vàng kim với tiêu đề trắng viền mực, và một phím đóng tròn màu đỏ có dấu chéo trắng. |
| Phần của skin | GoSkinArcade: ô nhanh và chip là nắp phím, ô đang hồi chiêu sáng viền vàng kim, huy hiệu là những tấm nhỏ sáng màu, cảnh báo được đóng khung theo màu của nó, thẻ được chọn sáng viền vàng kim, FAB là một phím vàng kim và cần điều khiển là một đế bóng loáng có bốn mũi tên. |
| Độ đục | Tấm nền, thẻ, notice và cửa sổ bật lên đều đục; thẻ HUD đục 94%. |
Sơn một phím bằng màu riêng
Theme sơn phím theo loại. Một menu mà mỗi phím muốn có màu riêng sẽ sơn từng phím một — mặt khi rê chuột lên sáng hơn một chút, mặt khi nhấn đậm hơn một chút, còn mặt bị vô hiệu hóa vẫn mờ:
menu.add_child(GoStyle.arcade_paint(GoStyle.button("Resume", _resume, GoStyle.Tone.PRIMARY), Color("#4ACB3E")))
menu.add_child(GoStyle.arcade_paint(GoStyle.button("Shop", _shop), Color("#FF8A1E")))
GoStyle.arcade_paint(stage_card, Color("#E3343D"), true) # khung của một bảng và mọi phím bên trong nó
arcade_paint() không làm gì cả.

Làm máy arcade của riêng bạn
python3 addons/gohud/tools/new_theme.py cabinet --from arcade_light
# Sửa themes/palettes/cabinet.json — các màu *_vivid là màu sơn — rồi:
python3 addons/gohud/tools/make_theme.py cabinet
GoUi.use_preset(&"cabinet")