Dự án 7: Bị đánh (hurt) 3 frame + chớp trắng

Khi nhân vật trúng đòn, người chơi cần biết ngay lập tức – trước cả khi thanh máu tụt. Hoạt hình bị đánh là ngoại lệ thú vị của nguyên lý anticipation: đòn đánh là bất ngờ, nên frame đầu tiên đã là cú giật mạnh nhất, không có báo trước. Sau đó là follow-through: người co lại, nhăn mặt và hồi dần. Kết hợp với một frame chớp trắng (toàn thân trắng xóa trong 50 ms), cú đánh có "độ nặng" mà không cần hiệu ứng phức tạp. Đây là bộ ba hurt chuẩn của game hành động 2D.

Hình mẫu

Thời gian ước tính: khoảng 60 phút. Nhịp: F1 Giật 50 ms – F2 Chớp 50 ms – F3 Co 100 ms – F4 Hồi 83 ms, tổng 283 ms. Cả hoạt cảnh chưa tới 0,3 giây – đủ để đọc, không đủ để làm người chơi mất kiểm soát lâu.

Chuẩn bị

• Canvas: 512 × 128 px (4 ô × 128 px), Resolution (Độ phân giải) 72, RGB Color, Transparent. Dùng lại nhân vật của dự án 6 nếu có.
• Công cụ chính: Brush (Cọ vẽ) Tool (B), Lasso (Dây thòng lọng) Tool (L), Free Transform (Biến đổi tự do) (⌘ Cmd+T) xoay quanh gót chân, Puppet Warp (Uốn cong), Layer Style › Color Overlay (Phủ chồng) cho frame trắng, Polygon Tool (Star Ratio) cho tia va chạm.
• Thiết bị: nét mặt nhăn nhó và giọt mồ hôi vẽ bằng bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (Sidecar/Astropad) là nhanh nhất. Dùng chuột: tạo dáng bằng xoay các bộ phận (cut-out) và vẽ mắt "><" bằng Pen Tool (Bút tạo đường) hai đoạn thẳng – rất rõ ở kích thước 128 px.
• File mẫu: "Khung 4 ô bị đánh" – trên cùng, khóa. Vạch hồng y = 118 là mặt đất, đường xám dọc là trục trọng tâm khi đứng, đường xanh nghiêng là góc ngả người của từng frame (−24°, −24°, −14°, −4°).

Các bước

1. Hiểu lực đánh: đòn tới từ phía trước (bên phải), nên nhân vật bị đẩy về sau (bên trái). Ba thứ cho người chơi đọc ra lực: đầu ngửa ra sau (đầu là phần nhẹ, bị hất mạnh nhất), trọng tâm lệch khỏi chân, và tay vung lên theo quán tính.
2. Tạo file: 512 × 128 px, Transparent, Gridline 128 px. Đặt file mẫu trên cùng, khóa. Tạo 4 Group F1_Hit, F2_Flash, F3_Recoil, F4_Recover.
3. F1 – giật (key pose mạnh nhất): phác nhân vật ngả về sau theo đường −24° của file mẫu: chân sau lùi ra, chân trước gần thẳng, hông đẩy về trước, ngực và đầu ngửa ra sau thêm 12°, hai tay hất lên cao. Mắt nhắm chặt, miệng há. Trọng tâm (giữa hông) nằm ngoài chân đỡ – nhân vật mất thăng bằng, đó là cảm giác bị đánh.
4. Không có anticipation: đừng vẽ frame "chuẩn bị bị đánh". Nhân vật chuyển thẳng từ Idle sang F1 – sự đột ngột chính là thông điệp. Chỉ người ra đòn mới có anticipation.
5. F3 – co người (follow-through): sau cú giật, cơ thể co lại tự vệ: ngả −14°, vai rụt, tay co về trước ngực, đầu cúi. Mắt "><" (hai chữ V nằm ngang) và miệng méo – biểu cảm đau rõ ở 128 px. Thêm một giọt mồ hôi bay ra cạnh đầu.
6. F4 – hồi: ngả còn −4°, tay buông xuống, mắt lim dim, miệng mím. F4 gần với Idle để nối mượt; nếu game có combo bị đánh liên tiếp, F4 có thể nối ngược về F1.
7. Soát onion skin: kéo tạm F1 và F4 chồng lên ô F3 (Opacity (Độ mờ đục) 30%, Color Overlay hồng – xanh lá). Chân đỡ (bàn chân trước) gần như đứng yên qua 3 frame; chỉ thân trên ngả và hồi. Nếu chân trượt, cú đánh trông như bị đẩy trên băng.
8. Tô màu và sáng tối: tô phẳng theo bảng màu, viền 2 px. Ở F1, sáng tối hơi đậm hơn bình thường (Multiply (Nhân (làm tối)) 50%) và thêm tia va chạm vàng #ffd84a viền cam ngay chỗ trúng đòn trước ngực – Polygon Tool 6 cánh Star Ratio 40%. Thêm 3 vạch tốc độ ngắn phía sau lưng chỉ hướng bị đẩy.
9. F2 – frame chớp trắng: nhân đôi Group F1 sang ô 2, xóa tia va chạm và vạch tốc độ. Chuột phải Group › Merge Group (⌘ Cmd+E), rồi Layer Style › Color Overlay màu #ffffff, Opacity 100%. Toàn bộ nhân vật thành bóng trắng giữ đúng hình F1. Mắt người đọc khoảnh khắc này là "đau!".
10. Giữ PSD có thể sửa: thay vì Merge Group, bạn có thể đặt Color Overlay lên Group (Photoshop hỗ trợ Layer Style cho Group). Như vậy sửa F1 xong chỉ cần nhân đôi lại – không phải vẽ lại F2.
11. Timeline (Dòng thời gian): 4 frame 0,05 – 0,05 – 0,1 – 0,083, Looping Once. Bấm Play nhiều lần: cú đánh phải "đanh". Nếu thấy mềm, rút F3 còn 0,083; nếu thấy khó đọc, giữ F1 thêm 0,017 (thành 67 ms).
12. Xuất: ẩn file mẫu, Export As (Xuất ra (tùy chỉnh)) PNG → hero_hurt.png đúng 512 × 128 px. Lưu PSD giữ 4 Group.
13. Unity 6 – clip và chuyển trạng thái: Sprite Editor › Grid By Cell Size 128 × 128, Pivot (Điểm neo) Bottom. Clip Hurt 4 sprite, Samples 24, F1 1 ô, F2 1 ô, F3 2 ô, F4 2 ô, bỏ Loop Time. Animator: Trigger hurt, transition Any State → Hurt, Has Exit Time tắt, Duration 0, bỏ tích Can Transition To Self nếu không muốn bị đánh liên tục reset; Hurt → Idle có Has Exit Time.
14. Animation Event và game-feel: thêm Event ở frame đầu gọi OnHurtStart(): bật bất tử tạm thời 0,6 giây, đẩy nhân vật lùi (knockback) bằng rb.AddForce, và hit-stop – đặt Time.timeScale = 0 trong 0,05 giây thực (dùng WaitForSecondsRealtime). Event ở frame cuối gọi OnHurtEnd() trả quyền điều khiển. Trong thời gian bất tử, cho Sprite Renderer nhấp nháy (alpha 1 ↔ 0,3 mỗi 0,08 giây).

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

• Hai hướng bị đánh: vẽ thêm bộ hurt bị đánh từ phía sau (ngã chúi về trước). Trong Unity chọn clip theo dấu của hướng đòn đánh.
• Chớp đỏ thay trắng: nhân đôi F2, Color Overlay #ff5c5c – dùng cho sát thương độc hoặc lửa, để người chơi phân biệt loại đòn.
• Rung camera: kết hợp Cinemachine Impulse Source rung 0,1 giây cùng lúc F1 – cảm giác trúng đòn tăng gấp đôi.