Phân cấp thông tin HUD trên Mobile: Hiển thị gì trong Chiến đấu, Sảnh chờ và Modal

Lỗi HUD hiếm khi là “ta quên thanh máu”—chúng thường là quá nhiều phần tử cùng mức ưu tiên trên một màn hình: tab sảnh chờ xuất hiện trong chiến đấu, cửa hàng có thể chạm đè lên đoạn phim, hoặc HUD bên dưới vẫn nhận chạm khi modal đang mở. Bản mock thiết kế thường chỉ là một khung hình và không bao giờ ghi “ẩn tiền tệ trong chiến đấu”—bạn cần một đặc tả trạng thái × lớp để kỹ thuật có thể triển khai hiển thị, chặn nhập liệu và thứ tự vẽ.

Dưới đây dùng Unity UGUI (Prefab, Canvas.sortingOrder, raycast của Graphic) làm cách diễn đạt chính. Godot: CanvasLayer layer + Control mouse_filter; Cocos: thứ tự vẽ node + BlockInputEvents / blocker toàn màn hình—cùng tiêu chí và bảng. Chi tiết về Safe Area, văn bản nổi và thứ tự Canvas: Safe Area, số sát thương nổi. Thiết bị, mọi ngôn ngữ và bản Release: checklist trước khi phát hành mục 1, 2 và 5.

Tiêu chí không đạt (chỉ cần một điều = chưa đạt): trong luồng modal / đoạn phim / thanh toán, HUD bên dưới vẫn tương tác được (trừ khi đặc tả ghi “nửa màn hình vẫn thao tác được”); trong chiến đấu, quảng cáo không phải nội dung chiến đấu mà không thể đóng chặn vùng chơi; cùng một thông tin hiển thị hai lần (ví dụ tiền tệ trên thanh trên cùng cộng với UI tiền tệ lớn trong chiến đấu) mà không có ghi chú sản phẩm; điều khiển từ trạng thái trước vẫn còn (hiển thị hoặc vẫn chặn raycast); với các ngôn ngữ đa ngôn ngữ gây căng thẳng bố cục, bố cục tối giản trong chiến đấu vẫn bị cắt văn bản dài (DE/ES, v.v.).

---

Định nghĩa trạng thái trước, rồi đến điều khiển

Trạng thái game (ví dụ)	Mục tiêu HUD	Thường hiển thị	Thường ẩn / giảm bớt
Sảnh chờ / trang chủ	Điều hướng + tài nguyên + sự kiện	Tiền tệ trên cùng, tab dưới cùng, lối vào sự kiện	Kỹ năng chiến đấu, tâm ngắm
Chiến đấu / trong màn	Hành động + thông tin sinh tồn	Máu, kỹ năng, tạm dừng	Tab sảnh chờ, banner sự kiện toàn màn hình
Đoạn phim / CG	Không nhập liệu hoặc chỉ bỏ qua	Nút bỏ qua	Gần như toàn bộ HUD (hoặc chỉ bỏ qua)
Modal (cửa hàng, cài đặt)	Tập trung vào hộp thoại	Điều khiển trong modal	HUD bên dưới tắt raycast hoặc ẩn cả lớp
Thanh toán / tuân thủ	Hoàn tất luồng	Điều khoản, xác nhận	Lớp phủ quảng cáo trong game

Thống nhất enum trạng thái với thiết kế + kỹ thuật (ví dụ GameUIState.Lobby | Combat | Cinematic | Modal). Các root UI đăng ký theo máy trạng thái (nhóm Prefab Unity / nhánh scene Godot / prefab Cocos)—tránh rải rác SetActive / visible trên từng script nút.

---

Lớp và thứ tự sắp xếp (đặc tả trung lập với engine)

Ghi tài liệu từ dưới lên trên (số cao hơn = ở trước):

Lớp	Nội dung	Nhập liệu
L0	Nền toàn màn hình / UI scene lộ ra	Không
L1	HUD chiến đấu (máu, chỗ đặt joystick)	Có
L2	Văn bản nổi / gợi ý chiến đấu	Không raycast (số sát thương nổi)
L3	Toast hệ thống / chữ chạy	Thường không
L4	Modal / hộp thoại toàn màn hình	Có; chặn chạm L1–L3
L5	Mất mạng, cập nhật bắt buộc	Có; chặn tất cả

Unity: sortingOrder / nhiều Canvas; Godot: CanvasLayer layer; Cocos: thứ tự sibling dưới một Canvas hoặc Canvas phân lớp + mask. Khi modal mở, nâng L4 và tắt raycast L1 / mouse_filter / BlockInput—không chỉ “vẽ lên trên nhưng chạm vẫn xuyên qua.”

---

Ưu tiên thông tin (ví dụ chiến đấu)

Nếu chiến đấu chỉ có thể giữ N khối dễ đọc trên màn hình nhỏ, giới hạn mặc định:

Ưu tiên	Khối	Chiến lược giảm bớt
P0	Máu / liên quan điều kiện thất bại	Không ẩn
P0	Tạm dừng / thoát chiến đấu	Không ẩn
P1	Kỹ năng / hành động chính	Gộp thành ít nút hơn
P2	Văn bản mục tiêu ngắn	Biểu tượng + nhấn giữ để xem chi tiết
P3	Tiền tệ, lối vào sự kiện	Mặc định ẩn trong chiến đấu hoặc trong menu tạm dừng
P3	Lối vào chat	Thu gọn thành biểu tượng

Các bước giảm bớt phải vẫn dễ đọc trong các ngôn ngữ gây căng thẳng bố cục (DE/ES, v.v.)—không chỉ kiểm tra thu nhỏ tiếng Anh.

---

Nghiệm thu (5 bước)

1. Liệt kê trạng thái — Từ luồng chính, liệt kê các chuyển đổi (vào màn, mở cửa hàng, CG, kết nối lại).
2. Ảnh chụp mỗi trạng thái — Editor Play và thiết bị Release mỗi loại (mục trước phát hành 1 và 5); xác minh các node SetActive(false) / visible=false vẫn chặn nhập liệu.
3. Kiểm tra nhanh modal — Khi cửa hàng / cài đặt / thanh toán đang mở, chạm vào các nút HUD cũ không được làm gì (raycast trong suốt toàn màn hình hoặc mask BlockInput).

4. Kết hợp với Safe Area — Điều khiển P0 trong chiến đấu nằm trong vùng an toàn (Safe Area).
5. Commit tài nguyên có phiên bản — Bảng trạng thái điều khiển hiển thị (Unity ScriptableObject / Godot Resource / cấu hình Cocos)—không chỉ ẩn tạm thời trong Scene.

---

Những gì thiết kế nên bổ sung

Sản phẩm bàn giao	Mục đích
Wireframe theo từng trạng thái (ít nhất Sảnh chờ / Chiến đấu / Modal)	Kỹ thuật cấu hình hiển thị
Danh sách “có thể ẩn” trong chiến đấu trên mock	Tránh vẽ mọi phần tử trên một khung hình
Đặc tả modal: nền làm mờ, có cho chạm xuyên qua không?	Đặt chính sách raycast
Thứ tự z của lớp quảng cáo / sự kiện	Căn chỉnh với L4/L5

Nhà thiết kế không cần viết máy trạng thái—bảng + chú thích giảm bớt phỏng đoán.

---

Định tuyến sửa lỗi

Triệu chứng	Nguyên nhân khả dĩ	Hành động	Người phụ trách
Vẫn chạm được vào chiến đấu sau hộp thoại	Raycast bên dưới vẫn bật	Tắt raycast Graphic trên lớp modal / mask toàn màn hình	Kỹ thuật
Sự kiện toàn màn hình trong chiến đấu	Không có bảng trạng thái	Ẩn P3 trong chiến đấu; thiết kế phê duyệt	Kỹ thuật + thiết kế
HUD còn lại sau đoạn phim	Không có hook trạng thái Cinematic	Máy trạng thái ẩn HUD đồng nhất	Kỹ thuật
Hai chỗ hiển thị tiền tệ	Thanh sảnh chờ không tắt trong chiến đấu	Ẩn thanh trên cùng trong Combat hoặc gộp nguồn dữ liệu	Kỹ thuật + thiết kế
Ngôn ngữ dài bị cắt trong bố cục tối giản chiến đấu	Chưa kiểm tra DE/ES	Đường dẫn tràn ngôn ngữ	Thiết kế + kỹ thuật

---

FAQ

Hai Canvas cho sảnh chờ và chiến đấu?
Được—hoặc một Canvas với các nhóm. Điều quan trọng là hiển thị theo trạng thái + raycast, không phải số lượng Canvas.

Cửa hàng nửa màn hình—đó có phải modal không?
Có. Ghi rõ liệu bên dưới có chạm được không và logic chiến đấu có tạm dừng không.

Xung đột với UX “ít hơn là nhiều hơn”?
Bảng phân cấp là quy tắc sản phẩm, không phải thẩm mỹ; P3 có thể mở lại cho sự kiện qua cờ máy trạng thái.

Thanh máu trên đầu trong không gian thế giới 3D?
Chúng là thông tin chiến đấu, quản lý cùng L1; Quy tắc sắp xếp không gian thế giới căn chỉnh với số sát thương nổi và Safe Area.