Dự án 12: HUD game đối kháng

Game đối kháng (fighting game) là nơi HUD (Heads-Up Display – lớp giao diện phủ trên màn chơi) bị "soi" nhiều nhất: hai người chơi vừa đánh vừa liếc thanh máu của nhau. HUD phải đối xứng hoàn hảo (công bằng cho hai bên), gọn ở mép trên và mép dưới (không che nhân vật), và phân biệt được hai phe bằng màu. Bạn sẽ học cách thiết kế một bên rồi lật cho bên kia, và cách tách HUD thành các mảnh để Unity tự co giãn thanh máu.

Hình mẫu

Thời gian ước tính: khoảng 5 giờ. Phần máu còn lại màu vàng, phần vừa mất màu đỏ – trong game phần đỏ tụt chậm phía sau để người chơi thấy cú đòn vừa rồi mạnh cỡ nào.

Chuẩn bị

• Canvas: 1920 × 1080 px (16:9), RGB Color. Thêm một ảnh chụp cảnh đấu (hoặc vẽ khối nhân vật xám) làm layer nền tham khảo, đặt tên REF.
• Khung mẫu: "Khung bố cục HUD" trên cùng, Multiply (Nhân (làm tối)). Vùng an toàn 5% (96 px ngang, 54 px dọc) – không đặt gì quan trọng ra ngoài vì một số TV cắt viền.
• Công cụ chính: Polygon Tool và Pen Tool (Bút tạo đường) cho thanh hình bình hành, Path Selection, Layer Style (Stroke, Gradient (Dải màu chuyển) Overlay (Phủ chồng), Inner Shadow), Type Tool, EditChỉnh sửa›TransformBiến đổi›Flip HorizontalLật ngang.
• Thiết bị: HUD dựng hoàn toàn bằng Shape và Layer Style nên chuột là đủ, thậm chí tiện hơn để gõ thông số. Bút chỉ cần khi vẽ tay chân dung nhân vật trong khung – khi đó bật Pen Pressure (Lực nhấn bút) cho line art.

Các bước

1. Tạo file ⌘ Cmd+N 1920 × 1080 px. Đặt khung mẫu, khóa lại. Kéo guide dọc ở x = 960 (trục đối xứng) và các guide theo khung: thanh máu y 80–152, siêu cấp y 940–1026.
2. Chỉ làm bên trái trước: tạo Group P1. Mọi thứ của người chơi 1 nằm trong đây; người chơi 2 sẽ là bản lật của nó – đảm bảo công bằng tuyệt đối.
3. Khung thanh máu: Pen Tool vẽ hình bình hành dài 560 × 72 px, hai đầu xiên 20 px (phía chân dung và phía đồng hồ). Fill #1b1a24, Stroke Inside 6 px #f2b632. Đặt tên Bar Frame.
4. Phần máu (tách riêng): hình bình hành nhỏ hơn 12 px mỗi phía, Fill #ffd23f, LayerLớp›Layer Style›Gradient Overlay từ #fff4a6 (trên) tới #e8a521 (dưới). Đặt tên HP Fill. Đây sẽ là một sprite riêng để Unity cắt theo lượng máu.
5. Phần máu vừa mất: nhân đôi HP Fill, đổi thành #ff3b5c, đặt dưới HP Fill, tên HP Damage. Trong hình mẫu chỉ lộ một đoạn ở đầu ngoài – trong game nó tụt chậm phía sau phần vàng.
6. Khung chân dung lục giác: Polygon Tool, Number of Sides 6, vẽ lục giác 200 × 200 px ở góc trên – trái vùng an toàn. Fill màu phe #ff5a5f, Stroke 6 px vàng kim. Bên trong đặt chân dung nhân vật (vẽ đầu đơn giản hoặc ảnh), kẹp vào một lục giác nhỏ hơn bằng ⌘ Cmd+⌥ Option+G.
7. Tên và chấm thắng vòng: Type Tool gõ tên "LINH" font đậm nghiêng 40 px, Stroke 4 px tối, ngay dưới thanh. Hai hình tròn 28 px gần đồng hồ: chấm rỗng (viền vàng) và chấm đã thắng (tô vàng).
8. Thanh siêu cấp: ở đáy trái, hình bình hành 640 × 60 px viền #31d0ff, bên trong 3 đoạn bằng nhau (mỗi đoạn là một "cấp"). Đoạn đã đầy tô #31d0ff với vệt sáng trên; vòng tròn số cấp "2" ở đầu trong.
9. Đồng hồ giữa: ngoài Group P1, vẽ hình khiên 160 × 170 px căn giữa x = 960: Fill tối, Stroke vàng kim. Gõ "60" bằng font số đậm 90 px, căn giữa. Đồng hồ là thứ duy nhất không lật.
10. Ánh sáng và chiều sâu: LayerLớp›Layer Style›Inner Shadow cho Bar Frame (đen, Distance 4 px) để thanh như lõm xuống; dải sáng 4 px trên đỉnh HP Fill; Drop Shadow nhẹ cho cả Group để HUD tách khỏi cảnh đấu sáng.
11. Lật cho người chơi 2: nhân đôi Group P1 (⌘ Cmd+J), đổi tên P2, EditChỉnh sửa›TransformBiến đổi›Flip HorizontalLật ngang và kéo sang đối xứng qua guide x = 960. Sửa lại: màu phe thành #3d8bff, layer chữ "LINH" bị lật thì xóa và gõ lại "BÁO" căn phải; chấm thắng vòng và số cấp cũng gõ lại cho đúng chiều.
12. Kiểm tra trên cảnh thật: bật layer REF. HUD không được che đầu nhân vật khi nhảy cao; nếu chạm, thu gọn chiều cao thanh hoặc đẩy lên sát vùng an toàn. Thu về 50% để kiểm tra chữ và số vẫn đọc được trên màn hình nhỏ.
13. Xuất từng mảnh: lưu PSD. Với mỗi mảnh (Bar Frame, HP Fill, HP Damage, khung chân dung, đồng hồ, đoạn siêu cấp, chấm thắng vòng): chuột phải layer › Export As (Xuất ra (tùy chỉnh))…, PNG, Transparency (Độ trong suốt) bật. Chỉ xuất mảnh của P1 và đồng hồ – P2 dùng lại sprite của P1. Không xuất chữ và số.
14. Đưa vào Unity 6: Texture Type Sprite (2D and UI). Canvas › Canvas Scaler: UI Scale Mode Scale With Screen Size, Reference Resolution (Độ phân giải) 1920 × 1080, Match 0.5. Nhóm P1 neo (Anchor) góc trên – trái, P2 góc trên – phải, đồng hồ trên – giữa. HP Fill là Image Type Filled, Fill Method Horizontal: P1 Fill Origin Right (máu co về phía đồng hồ), P2 dùng cùng sprite với Scale X −1 hoặc Fill Origin ngược lại. HP Damage cũng Filled, script giảm Fill Amount chậm hơn. Tên, số đồng hồ và cấp siêu cấp là TextMeshPro.

Nâng cao (tùy chọn)

• Hiệu ứng "nguy kịch": khi máu dưới 20%, HP Fill nhấp nháy sang đỏ cam – làm thêm sprite HP Fill màu #ff6a3d.
• Thanh choáng (stun): thanh mảnh 300 × 16 px dưới thanh máu, màu tím – nhiều game đối kháng hiện đại dùng thêm thanh này.
• Màn K.O.: chữ "K.O." to 400 px với Stroke dày và Outer Glow đỏ, xuất riêng để Unity phóng to dần khi kết thúc vòng.