Dự án 15: Chia bộ phận nhân vật (cut-out) để rig xương bằng Unity 2D Animation

Sprite sheet vẽ từng frame cho hình đẹp nhất, nhưng mỗi hành động mới là cả chục frame vẽ lại. Cách thứ hai mà nhiều game 2D hiện đại dùng (từ game mobile tới Hollow Knight cho boss): hoạt hình cắt rời (cut-out) + xương (bone). Bạn vẽ nhân vật một lần, tách thành các bộ phận, rồi Unity xoay các bộ phận quanh khớp – hàng chục hành động chỉ từ một ảnh. Phần quyết định chất lượng nằm trong Photoshop: tách đúng chỗ, đặt tên chuẩn, vẽ chồng khớp tròn để khi xoay không lộ khe hở, và sắp thứ tự trước – sau hợp lý. Dự án cuối chặng này nối Photoshop với gói 2D Animation và 2D PSD Importer của Unity 6, và mọi nguyên lý bạn đã học (arcs, follow-through, ease) vẫn áp dụng khi tạo dáng bằng xương.

Hình mẫu

Thời gian ước tính: khoảng 120 phút (60 phút Photoshop, 60 phút Unity). Kết quả: một file PSB 12 layer và một prefab nhân vật có xương, tạo được dáng Idle, Wave, Run chỉ bằng cách xoay xương.

Chuẩn bị

• Canvas: 1024 × 1024 px, Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Nhân vật cao khoảng 800 px đứng giữa canvas – rig cần độ phân giải cao hơn sprite sheet vì bộ phận sẽ bị xoay và phóng to.
• Công cụ chính: Lasso (Dây thòng lọng) Tool / Pen Tool (Bút tạo đường) để tách, LayerLớp›NewTạo mới›Layer via Cut (⌘ Cmd+⇧ Shift+J), Brush (Cọ vẽ) Tool để vẽ bù phần khớp bị che, bảng Layers (đổi tên bằng nhấp đúp), Layer Group, FileTệp›Save AsLưu thành bản khác định dạng Large Document Format (.PSB).
• Thiết bị: vẽ bù phần khớp tròn bằng bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) cho mép mềm khớp với nét gốc; nếu vẽ toàn bộ trên Photoshop iPad, chuyển sang máy tính để lưu PSB và mở Unity. Dùng chuột: dựng mỗi bộ phận bằng Shape (Rounded Rectangle cho tay chân, Ellipse cho khớp) ngay từ đầu – nhân vật dạng hình khối như vậy rig rất đẹp và không cần vẽ bù.
• File mẫu: "Bảng bố cục cut-out" – 12 khung có tên layer chuẩn, chấm hồng là vị trí pivot (khớp xoay) và vòng hồng là vùng phải vẽ chồng khớp. Dùng để kiểm tra từng bộ phận sau khi tách (đặt tạm từng bộ phận vào khung tương ứng).
• Unity: project tạo bằng template Universal 2D đã có sẵn gói 2D Animation và 2D PSD Importer; nếu thiếu, mở WindowCửa sổ›Package Manager › Unity Registry và cài hai gói này.

Các bước

1. Vẽ nhân vật ở tư thế trung tính: đứng thẳng nhìn nghiêng 3/4, tay buông hơi tách khỏi thân, hai chân hơi dang – tư thế "chữ A" nhẹ. Tay chân không được che lẫn nhau nhiều, vì phần bị che bạn sẽ phải vẽ bù. Thiết kế hợp với rig: khớp tròn, áo không quá rộng ở nách, tóc gọn trong khối đầu.
2. Chọn chỗ cắt: cắt ngay giữa khớp (giữa vai, giữa khuỷu, giữa gối), không cắt ở mép áo. Bàn tay đi chung cẳng tay, bàn chân đi chung cẳng chân – ở kích thước game, xoay riêng cổ tay hiếm khi đáng công. Tổng cộng 12 bộ phận như bảng ở trên.
3. Tách layer: với mỗi bộ phận: Lasso Tool (hoặc Pen Tool › Make Selection) khoanh vùng, LayerLớp›NewTạo mới›Layer via Cut (⌘ Cmd+⇧ Shift+J) – bộ phận được cắt sang layer mới đúng vị trí. Lặp lại cho đủ 12. Nếu nhân vật vẽ nhiều layer (lineart, màu, bóng), trước tiên gộp mỗi bộ phận lại: chọn các layer và ⌘ Cmd+E, hoặc tách trên bản Merge Visible (Gộp các lớp đang hiện) (⌘ Cmd+⇧ Shift+⌥ Option+E).
4. Đặt tên layer chuẩn: nhấp đúp tên layer trong bảng Layers và gõ đúng tên trong bảng: Head, Torso, Arm_Upper_L… Tên tiếng Anh, không dấu, không khoảng trắng, hậu tố _L / _R cho trái – phải của nhân vật. Unity dùng tên layer làm tên GameObject và tên sprite; tên chuẩn giúp sau này đổi skin (bộ giáp khác) chỉ cần thay file mà xương vẫn khớp.
5. Vẽ chồng khớp tròn: đây là bước quan trọng nhất. Khi cánh tay dưới xoay quanh khuỷu, phần đầu của nó phải tròn và đủ dài để lấp chỗ trống. Ở mỗi khớp, vẽ thêm một nửa hình tròn ở đầu bộ phận phía dưới (đầu trên cẳng tay, đầu trên cẳng chân, chân cổ của Head) với tâm đúng điểm pivot, đường kính bằng bề rộng chi. Phần vẽ thêm nằm dưới bộ phận phía trên nên bình thường không thấy – chỉ lộ ra khi xoay.
6. Vẽ bù phần bị che: phần thân sau tay, phần hông sau đùi… lúc tách ra sẽ bị khuyết. Mở rộng các bộ phận phía sau: tô tiếp màu áo vào chỗ khuyết, nối nét viền. Kiểm tra bằng cách tạm ẩn từng layer phía trước: không được thấy lỗ trống.
7. Thử xoay trong Photoshop: chọn Arm_Lower_L, ⌘ Cmd+T, giữ ⌥ Option kéo điểm tham chiếu về khuỷu (chấm pivot của file mẫu), xoay 60°. Khớp phải liền, không hở – nếu hở, khớp tròn chưa đủ lớn hoặc tâm tròn lệch pivot. Esc để hủy xoay.
8. Sắp thứ tự trước – sau: trong bảng Layers từ dưới lên: tay phải (xa) Arm_Upper_R, Arm_Lower_R – chân phải (xa) – Scarf – Pelvis – Torso – chân trái (gần) – Head – tay trái (gần). Unity PSD Importer giữ đúng thứ tự này thành Order in Layer. Bộ phận xa tô tối hơn một bậc để tách lớp.
9. Gom Group và lưu: chọn 12 layer, ⌘ Cmd+G, đặt tên Group Character. Lưu hero_rig.psd (để nộp bài và chỉnh sửa), rồi FileTệp›Save AsLưu thành bản khác › Format Large Document Format › hero_rig.psb vào thư mục Assets của Unity project – Unity 6 tự dùng 2D PSD Importer cho file PSB.
10. Thiết lập PSD Importer: chọn hero_rig.psb trong Project, Inspector: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 200, chế độ nhập các layer thành sprite riêng (Individual Sprites / Mosaic), tích Use as Rig (bản cũ gọi là Character Rig) và Use Layer Grouping. Bấm Apply. Unity xếp 12 bộ phận vào một texture và nhớ vị trí gốc của chúng.
11. Dựng xương trong Skinning Editor: bấm Sprite Editor, ở menu thả xuống góc trên – trái chọn Skinning Editor. Chọn công cụ Create Bone: bấm ở giữa hông kéo lên ngực (xương Pelvis – gốc), tiếp tục kéo lên cổ (Torso), lên đỉnh đầu (Head). Bấm chuột phải để kết thúc chuỗi; chọn xương Torso rồi bấm từ vai kéo xuống khuỷu, khuỷu xuống cổ tay cho mỗi tay; chọn Pelvis rồi dựng chuỗi đùi – cẳng cho mỗi chân. Đổi tên xương trong bảng Bone cho khớp tên layer.
12. Geometry và weight cho cut-out: Auto Geometry › Generate For All Visible – mỗi sprite có lưới tam giác. Vì đây là cut-out (bộ phận cứng), mỗi sprite chỉ nên theo một xương: chọn sprite, mở Bone Influence, chỉ giữ xương cùng tên (ví dụ sprite Arm_Lower_L chỉ theo xương Arm_Lower_L), rồi Auto Weights. Bấm Preview Pose, xoay thử vài xương: bộ phận phải xoay quanh đúng khớp. Bấm Apply.
13. Đưa vào cảnh và tạo dáng: kéo hero_rig.psb vào Hierarchy – Unity tạo nhân vật có 12 GameObject con, mỗi cái có Sprite Renderer và Sprite Skin, cùng hệ xương. Thêm Sorting Group ở gốc để cả nhân vật sắp lớp như một khối. Mở Animation window (⌘ Cmd+6), tạo clip Idle, bấm nút ghi (Record) đỏ, xoay xương Torso và Head lên xuống vài độ ở 0 – 0,6 – 1,2 giây (ease in-out). Tạo thêm Wave (Arm_Upper_L 150°, cẳng tay vẫy qua lại có follow-through) và Run (đùi – cẳng chân và tay đối xứng lệch nửa chu kỳ).
14. IK cho chân và tay (tùy chọn nhưng nên làm): thêm component IK Manager 2D vào gốc nhân vật, bấm dấu + chọn Limb cho mỗi chân (Effector là xương cẳng chân) – Unity tạo Target. Kéo Target là cả chân gập đúng khớp gối, giúp bàn chân bám đất khi chạy. Đây là cách animator xương làm việc nhanh như vẽ pose.

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

• Mesh mềm cho bụng và tóc: với Torso và tóc, thay vì một xương cứng, dùng 2–3 xương và Weight Brush pha trộn – thân uốn cong mềm khi thở hoặc chạy.
• Đổi mặt bằng Sprite Swap: tách Head thành Head + Face, vẽ vài biểu cảm (dùng lại dự án 10) và đổi bằng Sprite Resolver trong clip.
• So sánh hai trường phái: làm lại cú nhảy của dự án 6 bằng rig. Nhận xét: rig nhanh hơn và mượt ở mọi fps, sprite sheet vẽ tay biểu cảm hơn ở smear, squash & stretch. Nhiều game kết hợp cả hai.