Dự án 10: Chuẩn bị file PSD cho animator – tách bộ phận, đặt tên, pivot

Có hai cách làm nhân vật chuyển động trong game 2D: vẽ từng frame (frame-by-frame), hoặc tách nhân vật thành các bộ phận rồi để animator gắn xương (bone) và xoay từng bộ phận – cách mà gói 2D Animation của Unity hỗ trợ. Cách thứ hai tiết kiệm hàng trăm giờ vẽ, nhưng chỉ khi file của họa sĩ được chuẩn bị đúng. Một file PSD "gộp hết vào ba layer" hay "tay dính liền vào thân" sẽ bị animator gửi trả lại ngay. Dự án này dạy bạn những gì animator mong nhận: mỗi bộ phận chuyển động là một layer, phần bị che được vẽ thêm, khớp xoay được đánh dấu và tên layer rõ ràng.

Hình mẫu

Thời gian ước tính: khoảng 3 giờ – 30 phút lên danh sách bộ phận, 90 phút tách và vẽ thêm phần bị che, 30 phút sắp thứ tự, đặt tên và đánh dấu pivot, 30 phút kiểm tra bằng cách xoay thử.

Chuẩn bị

• Canvas (khung vẽ): 1024 × 1024 px, Resolution (Độ phân giải) 72, RGB Color, nền Transparent. Nhân vật đứng thẳng nhìn nghiêng 3/4 hoặc chính diện, tay hơi tách khỏi thân, cao khoảng 800 px – còn chỗ trống quanh để xoay tay chân.
• Công cụ chính: Lasso (Dây thòng lọng) Tool (L), LayerLớp›NewTạo mới›Layer via Cut (Shift+Ctrl+J), Brush (Cọ vẽ) Tool (B), Lock Transparent Pixels (Khóa vùng trong suốt) (phím /), Free Transform (Biến đổi tự do) (Ctrl+T) với điểm tham chiếu (reference point), Group (Ctrl+G), Ellipse Tool cho dấu pivot.
• Thiết bị: vẽ thêm vai, hông bị che cần nét tay khớp với phần đã có – bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (Sidecar, Astropad) giúp làm nhanh. Dùng chuột: chọn vùng bằng Lasso đa giác, tô bằng Alt+Backspace, rồi bật Lock Transparent Pixels để tô bóng bên trong mà không lem ra ngoài – kết quả vẫn sạch.
• Nhân vật: dùng một nhân vật bạn đã vẽ ở các chặng trước (tốt nhất có line và màu tách layer). File tham khảo ở cuối bài là bảng quy ước đặt tên để bạn đặt tên bộ phận thống nhất.

Các bước

1. Hỏi animator cần gì: ở studio, việc đầu tiên là hỏi danh sách động tác (đi, chạy, nhảy, tấn công) và danh sách bộ phận. Động tác vung kiếm cần tách cẳng tay khỏi cánh tay; chỉ đi bộ thì tay nguyên khối là đủ. Bài này dùng tối thiểu: đầu, tóc trước, tóc sau, thân, 2 tay, 2 chân.
2. Gộp line và màu theo bộ phận: nếu bản vẽ của bạn có layer line và layer màu riêng, nhân bản file (chr_hero_rig_v01.psd) rồi gộp line + màu thành một layer pixel cho mỗi vùng. Animator làm việc với bộ phận, không phải với bước vẽ.
3. Tách bộ phận: Lasso Tool (L) khoanh quanh cánh tay sát mép, Shift+Ctrl+J (Layer via Cut) – cánh tay sang layer mới, để lại lỗ trên thân. Làm tương tự cho mỗi bộ phận. Đặt tên ngay sau khi cắt.
4. Vẽ thêm phần bị che: khi tay xoay lên, chỗ vai bị cắt sẽ lộ lỗ. Trên layer body, vẽ tiếp phần vai và nách nằm dưới tay; trên layer tay, kéo dài đầu cánh tay thành nửa hình tròn (khớp cầu). Tương tự cho hông và đầu chân. Đây là bước phân biệt file chuyên nghiệp.
5. Lấp lỗ trên thân: ẩn tay và chân, nhìn layer body – không được có lỗ trong suốt. Bật Lock Transparent Pixels (phím /) khi tô màu thân để không lem; vẽ thêm vùng lỗ bằng màu áo và bóng phù hợp.
6. Tay xa tối hơn: layer arm_L (tay xa người xem) giảm Brightness khoảng 15% bằng Hue/Saturation (Sắc độ/Độ bão hòa) kẹp (Ctrl+Alt+G) hoặc tô sẵn màu #2a8f86. Bộ phận phía sau tối hơn giúp chiều sâu đọc đúng khi chuyển động.
7. Sắp thứ tự trước sau: theo bảng trên: tóc trước, mặt, đầu, tay gần, thân, tay xa, chân, tóc sau. Thứ tự layer trong PSD chính là thứ tự vẽ (sorting order) mà Unity dùng khi import – sai thứ tự là tay xa đè lên ngực.
8. Đánh dấu pivot: tạo Group pivot_guides, trong đó mỗi khớp một dấu chữ thập đỏ #e8423b nhỏ: cổ, hai vai, hông, hai khớp háng. Animator dựa vào đây để đặt xương. Ẩn Group này trước khi giao file cuối (hoặc ghi chú cho animator tự ẩn).
9. Thử xoay trong Photoshop: chọn layer arm_R, Ctrl+T, kéo điểm tham chiếu (vòng tròn nhỏ ở giữa khung) tới dấu pivot vai, xoay 45°. Có lỗ hở ở vai? Vẽ thêm. Xong thì nhấn Esc để hủy xoay – file giao phải ở tư thế gốc.
10. Đặt tên rõ ràng: mọi layer theo quy ước: head, hair_front, hair_back, face, body, arm_L, arm_R, leg_L, leg_R. _L, _R là phía của nhân vật. Gom tất cả vào Group hero_rig. Tên layer sẽ thành tên sprite trong Unity.
11. Dọn file: gộp Layer Style vào pixel (chuột phải > Rasterize (Chuyển thành điểm ảnh) Layer Style), xóa layer ẩn không dùng, xóa adjustment layer – mỗi layer còn lại là một bộ phận pixel thuần. Bộ nhập PSD của engine đọc pixel của layer, hiệu ứng ngoài có thể không hiện đúng.
12. Lưu đúng định dạng: FileTệp›Save AsLưu thành bản khác chọn Large Document Format (.psb) – định dạng mà gói 2D PSD Importer của Unity lâu nay hướng dẫn dùng; phiên bản gói mới cũng nhận .psd. Lưu cả bản .psd để nộp bài. Tên: chr_hero_rig_v01.psb.
13. Import vào Unity 6: cài gói 2D PSD Importer và 2D Animation (Package Manager). Kéo file .psb vào Assets/Art/Characters/Hero; trong Inspector bật Use as Rig (Character Rig), Pixels Per Unit (Số pixel mỗi đơn vị) theo spec sheet, Apply. Mở Skinning Editor từ Sprite Editor: các bộ phận hiện đúng thứ tự, tạo xương từ hông ra vai, cổ, tay, chân theo dấu pivot của bạn, rồi Auto Geometry và Auto Weights. Kéo prefab vào Scene, xoay thử một xương tay – không lộ lỗ là thành công.

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

• Tách chi tiết hơn: tách cánh tay thành arm_upper_R, arm_lower_R, hand_R để animator làm động tác vung vũ khí.
• Sprite Swap: vẽ thêm 3 biểu cảm khuôn mặt cùng kích thước trong Group face_variants; trong Unity dùng Sprite Library để đổi mặt khi nhân vật bị đánh hoặc vui.
• Animation idle: trong Unity 6, tạo Animation Clip 2 giây: thân nhấp nhô 4 px, đầu nghiêng 3°, tay lắc nhẹ – idle đầu tiên từ file của chính bạn.