Bạn học Photoshop trên máy nào? Phím tắt và hướng dẫn sẽ hiển thị đúng theo lựa chọn của bạn.

Lộ trình › Animation sprite nâng cao › Bài 226/248

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.

Nâng cao 70 phút ★★★ Vừa Hướng dẫn cho Windows · đổi sang macOS

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.

File mẫu để luyện tập

Tải về rồi mở bằng Photoshop: FileTệp›OpenMở (Ctrl+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

Sáu frame: F1 nhân vật loạng choạng ra sau, F2 khuỵu gối mắt chéo, F3 đổ ngửa theo đường cung, F4 đập lưng xuống đất có bụi, F5 nảy nhẹ lên, F6 nằm yên mắt chéo
Sáu frame: F1 nhân vật loạng choạng ra sau, F2 khuỵu gối mắt chéo, F3 đổ ngửa theo đường cung, F4 đập lưng xuống đất có bụi, F5 nảy nhẹ lên, F6 nằm yên mắt chéo

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) (Ctrl+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àuMã hexDùng cho
#3f74c0Áo
#2c3f7aQuần
#ffd2b0Da
#4a2c3aTóc
#ff5c5cKhăn quàng
#d8d4ccBụi khi chạm đất

Các bước

Sáu giai đoạn: ba tư thế chính loạng choạng, chạm đất và nằm yên, khung đổ người theo cung quanh gót, onion skin ba frame, tô màu, thêm bụi và sáng tối, ghép sheet 6 frame
Sáu giai đoạn: ba tư thế chính loạng choạng, chạm đất và nằm yên, khung đổ người theo cung quanh gót, onion skin ba frame, tô màu, thêm bụi và sáng tối, ghép sheet 6 frame
  1. 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.
  2. Tạo file: 768 × 128 px Transparent, Gridline 128 px, đặt file mẫu trên cùng. 6 Group F1…F6.
  3. 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.
  4. F3 – đổ theo cung: nhân đôi F2, Ctrl+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".
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.png 768 × 128 px.
  13. 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ọi OnDeathFinished() để tắt điều khiển, tắt Collider và mở màn hình Game Over sau 1 giây.
Mẹo: Xoay quanh gót bằng Free Transform: trên thanh Options bật ô Reference Point (ô vuông 9 chấm), rồi giữ Alt bấm vào gót chân – điểm xoay nhảy tới đó. Gõ góc vào ô Rotate để có đúng −28°, −60°, −90°.
Lỗi hay gặp: Xoay cả Group đã tô sáng tối, khiến bóng tối "nằm" trên lưng khi nhân vật nằm ngửa. Ánh sáng thuộc về thế giới, không thuộc về nhân vật – tô lại bóng sau khi xoay.

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

Đổ như cây bị đốn

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.

Ease in bằng timing

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.

Bỏ Loop Time để giữ frame cuối

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.

Kiểm tra nhanh

1 Khi nhân vật ngã ngửa, đỉnh đầu di chuyển theo quỹ đạo nào?
2 Vì sao các frame đổ người được đặt thời gian ngắn dần (100 → 50 ms)?
3 Làm sao để clip Death trong Unity dừng lại ở frame nằm yên?

Bài tập: Sheet ngã gục 6 frame

Làm trong Photoshop rồi nộp file. Máy chấm kiểm tra các yêu cầu kỹ thuật và chỉ cách sửa từng lỗi; giáo viên chấm thêm phần thẩm mỹ.

Làm bài tập