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

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.

Cả sáu 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.

Đổ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

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.

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.

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

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ó.

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

Cả ba đề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 và GoSkinMedieval là hai lớp con có sẵn.

Widget

Toàn bộ các mảnh, gói trong một bảng. Chi tiết từng cái →

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

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ả sáu 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 →