Dự án 8: Ngã gục (death) 6 frame
Nhân vật hết máu ngã ngửa – 6 frame 128 × 128 px trên sheet 768 × 128 px: học đổ người theo đường cung quanh gót chân, ease in khi ngã (nhanh dần), nảy nhẹ khi chạm đất, hold frame cuối, và cách Unity 6 giữ frame cuối, gọi Animation Event mở màn hình Game Over.
Photoshop hiển thị tiếng Anh. Từ có gạch chân chấm là thuật ngữ trên giao diện — chạm để xem nghĩa, hoặc tra Từ điển Anh–Việt.
Tải về rồi mở bằng Photoshop: (⌘ Cmd+O).
Một cú ngã đẹp kể được câu chuyện: nhân vật loạng choạng, mất trụ, đổ xuống theo đường cung và đập xuống đất có trọng lượng. Bạn sẽ gặp hai nguyên lý quan trọng: arcs – đầu nhân vật không rơi thẳng xuống mà vẽ một cung tròn quanh gót chân như cây bị đốn – và ease in – càng đổ càng nhanh vì trọng lực. Thêm một nhịp nảy nhẹ khi chạm đất và một frame hold dài ở cuối, cú ngã sẽ có sức nặng thay vì giống một tấm bìa đổ.
Hình mẫu
Thời gian ước tính: khoảng 70 phút. Nhịp: F1 100 ms – F2 83 – F3 67 – F4 50 – F5 83 – F6 400 ms (giữ), tổng 783 ms. Các frame đổ người ngắn dần (100 → 83 → 67 → 50): đó là ease in bằng timing.
Chuẩn bị
- Canvas: 768 × 128 px (6 frame × 128 px), Resolution (Độ phân giải) 72, RGB Color, Transparent. Nhân vật nằm dài khoảng 90 px nên chừa đủ chỗ: gót chân nằm ở x ≈ 76 mỗi ô, đầu đổ về bên trái.
- Công cụ chính: Free Transform (Biến đổi tự do) (⌘ Cmd+T) xoay với điểm tham chiếu kéo về gót chân (bật ô Reference Point trên thanh Options), Puppet Warp (Uốn cong), Brush (Cọ vẽ) Tool, Lasso (Dây thòng lọng) Tool, Ellipse Tool cho bụi.
- Thiết bị: xoay cả nhân vật bằng Free Transform làm tốt với chuột – bấm giữ ⇧ Shift khi xoay để bước 15°. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) (Sidecar/Astropad) giúp sửa dáng mềm (gối khuỵu, tay buông) sau khi xoay. Dùng chuột: dùng Puppet Warp ghim khớp vai, hông, gối rồi kéo – chính xác và không cần vẽ lại.
- File mẫu: "Khung 6 frame ngã" – mặt đất y = 118, chấm hồng "gót" là điểm xoay, cung xanh là quỹ đạo của đầu từ lúc đứng tới lúc nằm.
| Màu | Mã hex | Dùng cho |
|---|---|---|
#3f74c0 | Áo | |
#2c3f7a | Quần | |
#ffd2b0 | Da | |
#4a2c3a | Tóc | |
#ff5c5c | Khăn quàng | |
#d8d4cc | Bụi khi chạm đất |
Các bước
- Ba tư thế chính: phác F1 (loạng choạng, ngả −12°, đầu ngửa, mắt nhắm, tay hất), F4 (lưng vừa chạm đất, người nằm ngang, tay chân còn đang rơi) và F6 (nằm yên, tay chân duỗi thả lỏng, mắt hai dấu X). Ba hình này kể trọn câu chuyện; nếu chỉ có 3 frame, người chơi vẫn hiểu.
- Tạo file: 768 × 128 px Transparent, Gridline 128 px, đặt file mẫu trên cùng. 6 Group F1…F6.
- F2 – khuỵu gối: trọng tâm bắt đầu rơi: hai gối gập, hông hạ, thân ngả −28°. Mắt chuyển sang dấu X (hoặc xoáy) – báo hiệu "hết máu". Đây là khoảnh khắc người chơi hiểu nhân vật sẽ ngã, nên giữ 83 ms.
- F3 – đổ theo cung: nhân đôi F2, ⌘ Cmd+T, kéo điểm tham chiếu (hình tâm ngắm) về gót chân trước, gõ góc −60° trên thanh Options. Đầu đi theo cung xanh của file mẫu. Chân bị nhấc lên một chút vì người xoay quanh gót – đây là chi tiết tạo cảm giác "đổ như cây".
- Kiểm tra arcs: chấm đỏ ở đỉnh đầu trên F1, F2, F3, F4 (xếp chồng). Bốn chấm phải nằm trên cung tròn của file mẫu và cách nhau xa dần (ease in). Nếu chấm F3 nằm ngoài cung, đầu đang "rơi thẳng" – xoay lại quanh gót.
- F4 – chạm đất (contact): lưng bằng mặt đất, góc −90°. Tay và chân còn đang lơ lửng vì chúng rơi sau thân (follow-through). Khăn quàng văng lên phía trên đầu. Thêm 2 cụm bụi
#d8d4ccở hai đầu cơ thể. Frame nhanh nhất – 50 ms – vì đây là lúc va chạm. - F5 – nảy nhẹ: thân nhấc khỏi đất 3 px, góc −86° (đầu hơi bật lên), tay chân giờ mới chạm đất. Bụi to ra và mờ đi (Opacity (Độ mờ đục) 45%). Nảy chỉ 3 px thôi – người nặng nảy rất ít; nảy nhiều trông như cao su.
- F6 – hold: nằm yên, khăn rủ xuống đất, tay chân duỗi. Frame này giữ ít nhất 400 ms trong sheet, và trong game sẽ được giữ mãi cho tới khi hiện Game Over.
- Soát onion skin: kéo tạm F3 và F5 chồng lên ô F4, Opacity 30%, Color Overlay (Phủ chồng) hồng – xanh lá. Gót chân là điểm xoay nên phải gần như trùng nhau ở F1–F4; sau khi chạm đất thì cơ thể trượt nhẹ 2–3 px là tự nhiên.
- Tô màu và sáng tối: tô phẳng, viền 2 px. Khi nhân vật nằm, ánh sáng vẫn từ trên – trái của màn hình, không xoay theo người: mặt khuất giờ là phía dưới cơ thể. Đây là lỗi rất hay gặp khi xoay cả Group đã tô sáng tối – hãy tô lại layer bóng cho F3–F6.
- Bóng đổ: ở F1–F2 bóng đổ là elip nhỏ dưới chân; F3–F6 bóng dài ra theo thân nằm. Bóng đổ không xoay – nó luôn nằm trên mặt đất.
- Timeline (Dòng thời gian) và xuất: 6 frame 0,1 – 0,083 – 0,067 – 0,05 – 0,083 – 0,4, Looping Once. Xem: phải thấy nhanh dần khi đổ và một cú "phịch" khi chạm đất. Ẩn file mẫu, Export As (Xuất ra (tùy chỉnh)) PNG →
hero_death.png768 × 128 px. - Unity 6 – giữ frame cuối và Game Over: Sprite Editor › Grid By Cell Size 128 × 128, Pivot (Điểm neo) Custom đặt ở gót (X 0,59, Y 0,08). Clip Death, Samples 24, F1 2 ô, F2 2 ô, F3 2 ô, F4 1 ô, F5 2 ô, F6 1 ô; bỏ tích Loop Time – clip không lặp sẽ tự dừng ở frame cuối. Animator: Bool isDead, Any State → Death (Has Exit Time tắt, bỏ Can Transition To Self), không tạo transition ra khỏi Death. Thêm Animation Event ở F4 gọi
PlayThudSound()và ở F6 gọiOnDeathFinished()để tắt điều khiển, tắt Collider và mở màn hình Game Over sau 1 giây.
Nâng cao (tùy chọn)
- Ngã úp về trước: làm biến thể bị đánh từ sau lưng: xoay quanh mũi chân, đầu đổ về phía phải, tay chống xuống ở F4.
- Tan biến: sau F6, thêm 4 frame nhân vật nhấp nháy rồi tan thành hạt sáng (dùng lại kỹ thuật VFX), hợp với quái vật bị tiêu diệt.
- Ragdoll 2D: với nhân vật đã rig (dự án 15), thử thay clip Death bằng Hinge Joint 2D cho từng bộ phận – rồi so sánh: hoạt hình vẽ tay vẫn cho dáng ngã đẹp và có chủ đích hơn.
Mẹo & trick học nhanh
Người mất trụ xoay quanh điểm chạm đất (gót hoặc mũi chân). Đầu đi theo cung tròn, không rơi thẳng.
Không cần thêm frame: chỉ cần frame sau ngắn hơn frame trước (100 → 83 → 67 → 50 ms) là cú ngã nhanh dần.
Clip không lặp trong Unity tự dừng ở frame cuối – không cần frame thừa hay script giữ hình.