Dự án 12: Lướt (dash) với smear frame & afterimage

Một cú lướt quá nhanh để mắt thấy rõ – và đó là cơ hội để dùng hai "trò ảo thuật" của hoạt hình hành động. Smear frame: một frame duy nhất nhân vật bị kéo dài, nhòe thành vệt giữa vị trí cũ và mới; đứng riêng thì trông kỳ quặc, nhưng khi chạy ở 30 ms mắt đọc ra tốc độ. Afterimage: các bóng mờ của nhân vật đuổi theo phía sau. Cộng với anticipation ngắn, phanh trượt (follow-through) và khăn vung về trước khi dừng, bạn có một cú dash "đã tay" kiểu Hollow Knight, Dead Cells. Đây là dự án khó đầu tiên: nhân vật di chuyển xa trong khung, nhiều lớp hiệu ứng và phải phối hợp với code.

Hình mẫu

Thời gian ước tính: khoảng 100 phút. Nhịp: F1 67 ms – F2 33 ms (smear) – F3 50 – F4 50 – F5 67 – F6 67 – F7 83 – F8 100 ms, tổng 517 ms. Trong game, F3–F4 lặp trong suốt thời gian lướt (thường 0,15–0,25 giây).

Chuẩn bị

• Canvas: 512 × 512 px – lưới 2 cột × 4 hàng, mỗi ô 256 × 128 px (ô rộng vì nhân vật di chuyển ngang và cần chỗ cho vệt smear, afterimage). Resolution (Độ phân giải) 72, RGB, Transparent.
• Công cụ chính: Smudge (Ngón tay kéo màu) Tool (Strength 70–90%) và FilterBộ lọc›Blur›Motion Blur cho smear, Free Transform (Biến đổi tự do) (Scale ngang 130%), Layer Style Color Overlay (Phủ chồng) cho afterimage, Line Tool cho vạch tốc độ, Brush (Cọ vẽ) cho bụi.
• Thiết bị: vệt smear vẽ tay bằng bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (Sidecar/Astropad) cho nét quét một hơi rất tự nhiên – bật Transfer › Opacity (Độ mờ đục) › Pen Pressure (Lực nhấn bút). Dùng chuột: nhân đôi frame, Free Transform kéo dài ngang 130%, rồi Motion Blur 20 px theo phương ngang và dùng Layer Mask (Mặt nạ lớp) che lại phần đầu – kết quả gọn và đều.
• File mẫu: "Khung lưới dash 2 × 4" – mặt đất hồng ở y = 118 mỗi hàng, vạch vàng là vị trí thân (hông) từng frame: nhảy vọt từ F1 sang F2, rồi chậm dần tới F5 và dừng. Vùng xanh ở F2 là chỗ vẽ vệt smear.

Các bước

1. Ba tư thế chính: F1 – lấy đà: nhún thấp, người ngả về sau 8° (ngược hướng lướt), tay kéo ra sau. F3 – lướt: người đổ về trước 38°, chân sau duỗi thẳng, tay quét ra sau, đầu cúi chúi – dáng "mũi tên". F5 – phanh: người ngả về sau 22°, chân trước chống mạnh, gót trượt trên đất.
2. Tạo file lưới: 512 × 512 px Transparent. Guides (Đường gióng): ViewHiển thị›GuidesĐường gióng›New Guide Layout 2 Columns, 4 Rows, Gutter 0 – Photoshop chia đúng 8 ô 256 × 128. Đặt file mẫu trên cùng. 8 Group F1…F8 theo thứ tự trái sang phải, trên xuống dưới.
3. Vị trí theo spacing: nhân vật di chuyển trong khung: hông ở x ≈ 77 (F1) → 143 (F2) → 164 (F3) → 172 (F4) → 179 (F5–F8). Bước nhảy lớn nhất là F1 → F2 – khoảng cách đó quá xa để mắt nối, nên cần smear.
4. F2 – smear frame: nhân đôi F3 vào ô F2. Vẽ vệt phía sau nhân vật nối về vị trí F1: ba dải màu dài theo phương ngang – tóc #4a2c3a ở trên, áo #3f74c0 ở giữa, quần #2c3f7a ở dưới – thuôn nhọn về phía sau, Opacity 50–60%. Thân chính ở phía trước kéo dài ngang 115% (stretch).
5. Smear bằng chuột: nếu không vẽ tay, nhân đôi layer nhân vật F3, Free Transform W 160% với điểm neo ở mép trước, FilterBộ lọc›Blur›Motion Blur Angle 0°, Distance 20 px, hạ Opacity 55% và đặt dưới nhân vật chính. Dùng Layer Mask cọ mềm xóa bớt phần đè lên mặt – mặt nhân vật phải đọc rõ.
6. Kiểm tra smear trong chuyển động: đứng riêng, F2 trông kỳ lạ – đó là bình thường. Dựng nhanh Timeline (Dòng thời gian) F1 – F2 – F3 với 0,067 – 0,033 – 0,05 rồi xem: nếu thấy "giật cục" từ F1 sang F3 thì smear chưa đủ dài; nếu thấy vệt nhòe đọng lại, smear quá đậm.
7. F4 – lướt giữ: giống F3 nhưng khác nhẹ (tóc, khăn bay khác 1 frame, chân sau nhấc thêm) để khi F3 – F4 lặp lại không bị đứng hình.
8. Afterimage: trong F3 và F4, nhân đôi layer nhân vật hai lần, đặt dưới nhân vật chính, dời về sau 34 px và 62 px. Layer Style Color Overlay #9fd3ff, Opacity layer 45% và 25%. Bóng càng xa càng mờ. F5 chỉ còn một bóng mờ 30% – cú lướt đang tắt.
9. Vạch tốc độ: Line Tool 1,5 px màu #9aa3ae, 3 vạch ngang sau lưng ở F2–F4, dài 30–40 px. Vạch nằm sau afterimage. Ít mà rõ – quá nhiều vạch làm rối hình.
10. F5 – phanh: người ngả về sau, đầu gối trước gập, gót trượt. Bụi #d8d4cc bung lên trước mũi chân (cụm to) và vệt trượt mỏng phía sau. Khăn quàng vẫn đang bay về sau.
11. F6 – follow-through của khăn: thân đã gần đứng thẳng (−6°), nhưng khăn quàng vung qua đầu về phía trước – quán tính. F7 khăn rủ xuống trước ngực rồi F8 về sau lưng. Đây là chi tiết khiến cú dừng có trọng lượng.
12. Soát onion skin: chồng tạm F1 và F3 lên ô F2 (Opacity 30%, Color Overlay hồng – xanh lá): vệt smear phải lấp kín khoảng trống giữa hai vị trí. Chồng F4 và F6 lên F5: thân chậm dần, khăn còn chạy tiếp.
13. Timeline, xuất: 8 frame 0,067 – 0,033 – 0,05 – 0,05 – 0,067 – 0,067 – 0,083 – 0,1, Once. Export As (Xuất ra (tùy chỉnh)) PNG → hero_dash.png 512 × 512 px.
14. Unity 6 – clip, sự kiện và afterimage bằng code: Sprite Editor › Grid By Cell Size 256 × 128 › Slice, rồi bấm từng sprite và đặt Pivot (Điểm neo) Custom ngay dưới chân nhân vật của frame đó (X = vị trí hông ÷ 256: F1 0,3; F2 0,56; F3 0,64; F4 0,67; F5–F8 0,7; Y 0,08). Nhờ vậy nhân vật luôn đứng đúng tại transform, quãng đường thật do Rigidbody2D đảm nhận và không bị giật khi chuyển sang Idle. Clip Dash_Start (F1–F2), Dash_Loop (F3–F4, Loop Time), Dash_End (F5–F8). Animation Event cuối F1 gọi BeginDash(): đặt rb.linearVelocity = new Vector2(dir * 18f, 0), gravityScale 0. Sau 0,2 giây script chuyển sang Dash_End, Event ở F5 gọi EndDash() trả gravity. Afterimage động: trong lúc dash, cứ 0,04 giây tạo một GameObject có Sprite Renderer copy sprite hiện tại, màu #9fd3ff alpha 0,5, giảm alpha về 0 trong 0,2 giây rồi hủy (dùng object pool).

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

• Dash trên không: biến thể không có bụi và chân co lại ở F3–F4; khăn bay thẳng ra sau.
• Smear cho đòn chém: áp dụng frame smear cho tay cầm kiếm trong đòn tấn công: một frame cánh tay và lưỡi kiếm kéo thành hình quạt.
• Shader afterimage: thay Color Overlay bằng material Sprite Unlit có màu Additive và Shader Graph thêm viền phát sáng – afterimage như năng lượng.