Dự án 6: Nhảy – lấy đà, bay, tiếp đất 8 frame

Cú nhảy là hoạt hình được người chơi platformer nhìn nhiều nhất – và là nơi nguyên lý anticipation (báo trước) phát huy rõ nhất. Trước khi bật lên, nhân vật phải nhún xuống: chuyển động nhỏ ngược chiều chuẩn bị cho chuyển động lớn. Bạn sẽ chia cú nhảy thành ba pha – lấy đà, bay, tiếp đất – vẽ theo kiểu pose to pose (3 tư thế chính trước, khung trung gian sau), cho khăn quàng bay theo đà (follow-through), rồi cắt sheet thành 4 clip để Unity chọn đúng clip theo vận tốc rơi. Cách chia này là chuẩn của các game như Celeste hay Hollow Knight.

Hình mẫu

Thời gian ước tính: khoảng 75 phút. Nhịp: F1 100 ms – F2 50 – F3 67 – F4 133 (giữ ở đỉnh) – F5 67 – F6 50 – F7 100 – F8 83 ms, tổng 650 ms. Lưu ý trong game, thời gian bay thật do vật lý quyết định: F4 và F5 sẽ được giữ (hold) bao lâu nhân vật còn trên không.

Chuẩn bị

• Canvas: 1024 × 128 px (8 frame × 128 px), Resolution (Độ phân giải) 72, RGB Color, Transparent. Nhân vật đứng cao khoảng 90 px, chân ở y = 118.
• Công cụ chính: Brush (Cọ vẽ) Tool (B) Hard Round 3 px cho nét phác, Lasso (Dây thòng lọng) Tool (L) + ⌥ Option+⌫ Delete tô mảng, Clipping Mask (Mặt nạ cắt) (⌘ Cmd+⌥ Option+G), Free Transform (Biến đổi tự do) (⌘ Cmd+T) và Puppet Warp (Uốn cong) (EditChỉnh sửa›Puppet Warp) để chỉnh dáng, Timeline (Dòng thời gian) (Frame Animation và Video Timeline cho onion skin thật).
• Thiết bị: phác tư thế nhanh nhất bằng bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (Sidecar/Astropad) – nét gesture một hơi cho dáng mềm. Dùng chuột: dựng nhân vật bằng các khối Ellipse và Rounded Rectangle (đầu, thân, tay, chân) mỗi khối một layer, rồi tạo dáng bằng xoay (Free Transform) quanh khớp – cách "cut-out" này cho kết quả sạch và bạn sẽ học sâu ở dự án 15. Nhớ: Photoshop trên iPad chưa có Timeline.
• File mẫu: "Khung 8 frame nhảy" – mặt đất hồng y = 118, vạch xanh y = 38 là đỉnh cú nhảy, gạch vàng chữ "hông" là độ cao hông từng frame. "Tấm onion skin" đặt trên cùng Opacity (Độ mờ đục) 60%: ô F1, F4, F7 có tư thế chính mờ xanh để bạn vẽ đè; các ô trung gian có tư thế trước (hồng) và sau (xanh lá) để bạn vẽ ở giữa.

Các bước

1. Xem tham khảo trước khi vẽ: tự quay video mình nhảy tại chỗ bằng điện thoại (hoặc xem video tham khảo). Dừng từng hình: để ý vai hạ thấp và tay vung ra sau trước khi bật, người duỗi dài lúc rời đất, và đầu gối gập sâu khi chạm đất. Animator giỏi luôn dùng tham khảo (reference).
2. Tạo file: 1024 × 128 px Transparent, Gridline Every 128 Pixels. Đặt "Khung 8 frame nhảy" và "Tấm onion skin" trên cùng, khóa cả hai. Tạo 8 Group F1…F8, mỗi Group có layer sketch.
3. Tư thế chính F1 – nhún lấy đà: phác bằng nét xanh #31a8ff 3 px. Hông hạ thấp xuống vạch vàng (y ≈ 97), đầu gối gập sâu, người đổ về trước 15°, hai tay vung ra sau. Đây là anticipation: chuyển động ngược chiều (xuống) trước chuyển động chính (lên). Càng nhún sâu, người chơi càng tin cú nhảy có lực.
4. Tư thế chính F4 – đỉnh: nhân vật cao nhất, hông ngang vạch y ≈ 38, hai chân co lên, tay dang ngang giữ thăng bằng. Đây là frame hold: ở đỉnh vận tốc gần bằng 0 nên frame được giữ lâu nhất (133 ms).
5. Tư thế chính F7 – tiếp đất nhún: giống F1 nhưng sâu hơn và người thẳng hơn – đầu gối gập, tay hạ xuống phía trước để giữ thăng bằng, thân bị ép thấp (squash). Mắt nhắm lại một chút: cú tiếp đất có lực.
6. Khung trung gian pha bay: F2 – bật người: hai chân duỗi thẳng ra sau, tay vung lên cao, cả người kéo dài (stretch) – đây là frame nhanh nhất (50 ms). F3 – bay lên: chân bắt đầu co, tay vẫn giơ cao. F5 – rơi: chân duỗi xuống tìm mặt đất, tay giơ lên, tóc và khăn bay ngược lên trời. F6 – chạm đất: hai bàn chân vừa chạm vạch hồng, người còn thẳng.
7. F8 – hồi về: đứng thẳng như tư thế idle, nhưng khăn quàng còn đung đưa sau lưng. F8 sẽ nối sang clip Idle nên dáng phải gần với frame Idle của nhân vật.
8. Đường cung (arcs): bật tạm một layer, đánh dấu chấm đỏ ở đỉnh đầu nhân vật trong cả 8 frame (khi xếp chồng tại chỗ). Các chấm phải nối thành đường cong mượt – lên thẳng rồi uốn ở đỉnh, không gãy khúc. Chấm nào lệch thì sửa frame đó.
9. Soát onion skin thật bằng Video Timeline: bảng Timeline › Create Video Timeline, đặt mỗi Group F1–F8 nối tiếp nhau dài 1 frame (dời cả 8 Group về ô 1 trước). Menu bảng Timeline › Enable Onion Skins, Onion Skin (Giấy can) Settings: Onion Skin Count 1, Max Opacity 50%. Bấm qua từng frame bằng phím mũi tên – bạn thấy frame trước và sau mờ mờ. Soát xong ⌘ Cmd+Z về sheet, hoặc làm trên một bản sao file.
10. Tô màu phẳng: mỗi Group: layer flat dưới sketch, dùng Lasso + ⌥ Option+⌫ Delete tô mảng da, áo, quần, tóc, giày theo bảng màu. Viền 2 px #1b1a24 bằng cọ Hard Round theo nét sketch, sau đó ẩn sketch. Tay và chân phía sau dùng màu tối hơn một bậc để tách lớp trước – sau.
11. Khăn quàng theo đà (follow-through): khăn luôn đi sau chuyển động của thân một nhịp: F1 khăn rủ sau lưng, F2–F3 khăn bị kéo xuống (người đang lên), F4 khăn nổi ngang, F5–F6 khăn bay ngược lên (người đang rơi), F7 khăn quất xuống phía trước, F8 khăn còn đung đưa. Đây là chi tiết khiến cú nhảy trông chuyên nghiệp.
12. Sáng tối và bụi: layer kẹp Multiply (Nhân (làm tối)) 40% màu #2c3f7a tô mặt khuất (ánh sáng từ trên – trái). Ở F7 thêm hai cụm bụi nhỏ hai bên chân (xám #d8d4cc), ở F2 hai vạch bụi chéo dưới chân. Bóng đổ dưới chân: bóng to khi đứng đất, nhỏ dần khi lên cao.
13. Timeline và xuất: trở lại Frame Animation, 8 frame với thời gian 0,1 – 0,05 – 0,067 – 0,133 – 0,067 – 0,05 – 0,1 – 0,083, Looping Once. Xuất GIF xem thử (FileTệp›Export›Save for Web (Legacy)). Ẩn file mẫu, Export As (Xuất ra (tùy chỉnh)) PNG → hero_jump.png 1024 × 128 px.
14. Đưa vào Unity 6 – bốn clip: Sprite (2D and UI), Multiple, PPU 64, Sprite Editor › Grid By Cell Size 128 × 128, Pivot (Điểm neo) Bottom. Tạo 4 clip: Jump_Start (F1–F3, không lặp), Jump_Apex (F4), Jump_Fall (F5, giữ một frame, Loop Time), Land (F6–F8). Animator: Parameter Float yVelocity, Bool isGrounded. Idle → Jump_Start khi isGrounded = false; Jump_Start → Jump_Apex (Has Exit Time bật, Exit Time 1); Jump_Apex → Jump_Fall khi yVelocity < −0,5; Jump_Fall → Land khi isGrounded = true (Has Exit Time tắt, Transition Duration 0); Land → Idle (Has Exit Time bật). Script đặt animator.SetFloat("yVelocity", rb.linearVelocity.y) mỗi frame. Mẹo game-feel: cho lực nhảy tác dụng ở cuối F1 bằng một Animation Event gọi hàm DoJump() – hoặc, nếu muốn phản hồi tức thì, nhảy ngay khi bấm và rút ngắn F1 còn 1 frame.

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

• Nhảy đôi (double jump): thêm 4 frame lộn vòng (xoay người 90° mỗi frame) phát khi nhảy lần hai – áp dụng arcs cho đầu và chân.
• Blend Tree theo vận tốc: thay Jump_Apex – Jump_Fall bằng một Blend Tree 1D theo yVelocity với 3 sprite: đang lên, đỉnh, đang rơi. Sprite tự chọn theo vận tốc – mượt kể cả khi độ cao nhảy thay đổi.
• Squash bằng code khi tiếp đất: ngoài frame vẽ tay, cho transform scale (1,15; 0,85) trong 0,08 giây khi chạm đất – thêm "độ nặng" mà không cần vẽ thêm.