Dự án 2: Thanh máu và trái tim HP

Thanh máu (HP bar – health points, điểm máu) là thứ người chơi nhìn nhiều nhất trong trận đấu. Nó phải đọc được trong nửa giây: màu đỏ rõ, khung tối tương phản, trạng thái đầy – vơi dễ thấy. Bài học quan trọng nhất ở đây là tư duy asset cho engine: phần máu phải là một hình tách riêng để game tự co giãn, không vẽ chết vào khung.

Hình mẫu

Thời gian ước tính: khoảng 50 phút. Toàn bộ vẽ bằng Shape (hình vector) nên dễ sửa kích thước và màu về sau.

Chuẩn bị

• Canvas: 512 × 256 px, Background Contents: Transparent, RGB Color. Cả hai cạnh là lũy thừa của 2 – engine nén ảnh hiệu quả nhất.
• Bố trí trên canvas: hàng trên (y 0–64): khung thanh 384 × 64 px; góc phải trên (x 408): icon vòng tròn vàng 96 × 96 px; hàng giữa (y 80–144): phần máu 352 × 40 px; hàng dưới (y 160–256): 3 trái tim 96 × 96 px.
• Công cụ chính: Rectangle Tool (U) với góc bo trong bảng Properties, Ellipse Tool, Path Selection (A), Lasso (Dây thòng lọng) (L), Layer Style (hiệu ứng lớp).
• Thiết bị: bài này vẽ bằng Shape nên chuột hay bút đều như nhau.

Các bước

1. Tạo file ⌘ Cmd+N 512 × 256 px, Transparent. Bật thước ⌘ Cmd+R và kéo guide (đường gióng) từ thước trên xuống ở y = 64, 80, 144, 160 để chia 3 hàng.
2. Khung thanh: chọn Rectangle Tool U, trên thanh Options đặt chế độ Shape, Fill #2b2233, Stroke tắt. Bấm một lần lên canvas, nhập Width 384, Height 64. Trong WindowCửa sổ›PropertiesThuộc tính đặt X 0, Y 0 và bán kính góc 32 px cho cả 4 góc – thanh có đầu tròn.
3. Viền khung bằng Layer Style: LayerLớp›Layer Style›StrokeViền: Size 4 px, Position Inside, Color #1b1a24. Để viền ở Inside để hình không to ra ngoài kích thước 384 × 64.
4. Bóng và sáng của khung: layer mới, ⌘ Cmd+⌥ Option+G kẹp vào khung. Dùng Rectangular Marquee (Khung chọn) (M) chọn nửa dưới (cao 20 px), tô #1c1622 bằng ⌥ Option+⌫ Delete. Thêm một vệt 3 px #4a3d52 sát mép trên – mặt trên của khung "bắt sáng".
5. Phần máu (tách riêng): Rectangle mới 352 × 40 px, bán kính góc 20, Fill #ff3b5c, Stroke Inside 3 px #1b1a24, đặt ở X 16, Y 92 (hàng giữa). Đặt tên layer HP Fill.
6. Khối cho phần máu: layer kẹp vào HP Fill: nửa dưới 14 px tô #b5123f; phía trên một thanh bo tròn 6 px #ff8fa3 cách mép trái 12 px. Chính vệt sáng này làm thanh máu trông như ống thủy tinh chứa chất lỏng.
7. Trái tim từ hình cơ bản: ở hàng dưới, vẽ hình vuông 56 × 56 (⇧ Shift khi kéo Rectangle), xoay 45° bằng ⌘ Cmd+T (giữ ⇧ Shift để xoay theo bước 15°). Vẽ thêm 2 hình tròn đường kính 56 đặt ở hai cạnh trên của hình vuông. Chọn cả 3 layer shape, ⌘ Cmd+E để gộp thành một shape, rồi trên thanh Options chọn Path operations › Merge Shape Components. Chỉnh cho tim nằm gọn trong ô 96 × 96 ở x 0, y 160.
8. Tô tim đầy: Fill #ff3b5c, Stroke Inside 5 px viền tối. Layer kẹp: dùng Lasso vẽ vùng lưỡi liềm ở dưới – phải, tô #b5123f. Layer kẹp thứ hai: vệt cong sáng #ffc2cd ở thùy trái và một chấm trắng nhỏ.
9. Tim nửa và tim rỗng: chọn các layer tim, ⌘ Cmd+G thành Group Heart Full, nhân đôi 2 lần ⌘ Cmd+J, dời sang x 112 và x 224. Group thứ ba: đổi màu nền thành #3b2c3f, bóng #2a1f2e, vệt sáng #55425a → Heart Empty. Group giữa: đặt một tim rỗng bên dưới tim đầy, thêm Layer Mask (Mặt nạ lớp) cho tim đầy và tô đen nửa phải mask → Heart Half.
10. Icon đầu thanh: ở góc phải trên (x 408, y 0) vẽ hình tròn 96 × 96 màu #ffc53d có viền, bóng #d18a1a nửa dưới, và đặt một bản sao tim đầy thu nhỏ 70% vào giữa. Trong game icon này nằm đè lên đầu trái thanh máu.
11. Không vẽ chữ số: con số "72/100" thay đổi liên tục nên để game hiển thị bằng chữ (TextMeshPro trong Unity). Trong Photoshop chỉ gõ thử bằng Type Tool (T) để xem bố cục, rồi ẩn layer chữ trước khi xuất.
12. Kiểm tra độ đọc: thu nhỏ về 50% rồi 25% (⌘ Cmd+-). Ở 25% bạn vẫn phải phân biệt được tim đầy, nửa và rỗng. Nếu tim rỗng lẫn vào nền tối của game, làm viền tim rỗng sáng hơn.
13. Xuất PNG: ẩn guide (⌘ Cmd+;) và các layer chữ thử, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG, Transparency (Độ trong suốt) bật → hp_ui.png 512 × 256 px. Lưu PSD để sửa sau.
14. Đưa vào Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Apply. Sprite Editor › Slice › Type Automatic › Slice › Apply (các phần cách nhau bằng vùng trong suốt nên Unity tự tách). Trong Canvas: khung là một Image; phần máu là Image với Image Type Filled, Fill Method Horizontal, Fill Origin Left – script chỉ cần đổi Fill Amount từ 0 đến 1 theo máu. Tim dùng Image và đổi sprite theo số máu.

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

• Thanh "máu vừa mất": thêm một phần máu màu trắng #ffe0e6 cùng kích thước – trong game nó tụt chậm hơn phần đỏ, cho người chơi thấy vừa mất bao nhiêu máu.
• Thanh năng lượng (mana): nhân đôi phần máu, dùng Adjustment Layer (Lớp điều chỉnh) Hue/Saturation (Sắc độ/Độ bão hòa) (LayerLớp›New Adjustment Layer›Hue/SaturationSắc độ/Độ bão hòa) kẹp vào để đổi sang xanh dương.
• Tim pixel 16 × 16: vẽ lại 3 trạng thái tim bằng Pencil (Bút chì) 1 px như dự án 1 – dùng cho game phong cách retro.