Dự án 1: Quả bóng nảy squash & stretch 8 frame

Chặng này dạy bạn làm cho sprite sống chứ không chỉ "chuyển động". Bí quyết nằm ở 12 nguyên lý hoạt hình mà các họa sĩ Disney đúc kết từ thập niên 1930 – đến nay vẫn là ngôn ngữ chung của mọi animator game. Bạn không cần học thuộc cả 12 ngay: mỗi dự án tập trung vào hai, ba nguyên lý và áp dụng thẳng vào sprite sheet chạy được trong Unity. Dự án mở màn là bài tập mà trường hoạt hình nào cũng giao đầu tiên: quả bóng nảy. Không tay, không mặt, không quần áo – chỉ còn lại timing (bao nhiêu frame), spacing (mỗi frame cách nhau bao xa) và squash & stretch (bóp – kéo giãn). Làm đúng ba thứ đó, một hình tròn sẽ có trọng lượng.

Hình mẫu

Thời gian ước tính: khoảng 45 phút. Nhịp: F1 125 ms (giữ ở đỉnh) – F2 83 – F3 42 – F4 42 – F5 83 (giữ khi chạm đất) – F6 42 – F7 83 – F8 125 ms, tổng 625 ms rồi lặp lại. Để ý: frame gần đất ngắn nhất (bóng nhanh nhất), frame ở đỉnh dài nhất (bóng gần như dừng).

Chuẩn bị

• Canvas (khung vẽ): 1024 × 128 px (8 frame × 128 px), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Cả 1024 và 128 đều là lũy thừa của 2 nên Unity nén texture tối ưu.
• Công cụ chính: Ellipse Tool (U) giữ ⇧ Shift cho hình tròn, Free Transform (Biến đổi tự do) (⌘ Cmd+T) để bóp – kéo giãn, bảng Properties (WindowCửa sổ›PropertiesThuộc tính) để gõ kích thước chính xác, Clipping Mask (Mặt nạ cắt) (⌘ Cmd+⌥ Option+G), Timeline (Dòng thời gian) (WindowCửa sổ›TimelineDòng thời gian).
• Thiết bị: dự án này dựng hoàn toàn bằng Shape nên chuột làm tốt 100% – thậm chí chính xác hơn bút vì bạn gõ số. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) (qua Sidecar hoặc Astropad với Photoshop trên máy tính) chỉ cần cho vạch trang trí trên bóng. Lưu ý: Photoshop trên iPad chưa có bảng Timeline, nên nếu vẽ trên iPad hãy lưu PSD rồi mở trên máy tính để dựng hoạt hình.
• File mẫu: "Khung 8 frame bóng nảy" ở cuối bài – FileTệp›Place Embedded, đặt trên cùng, khóa. Vạch xanh đứt nét y = 33 là tâm bóng ở đỉnh, vạch hồng y = 120 là mặt đất, vòng đứt nét trong từng ô là kích thước bóng của frame đó (vòng hồng ở F5 là lúc chạm đất). "Bảng nhịp & spacing" để in ra giấy, luyện vẽ biểu đồ trước khi vào Photoshop.

Các bước

1. Vẽ biểu đồ spacing trước: trên giấy (hoặc file "Bảng nhịp & spacing") kẻ một đường dọc từ đỉnh xuống đất, đánh dấu vị trí tâm bóng của 8 frame: dày đặc ở đỉnh (F8 – F1 – F2 gần như chồng lên nhau), thưa dần khi xuống thấp. Đây là ease: trọng lực làm bóng chậm ở đỉnh và nhanh nhất khi sát đất. Animator chuyên nghiệp luôn vẽ biểu đồ này trước khi vẽ frame nào.
2. Tạo file và file mẫu: FileTệp›NewTạo mới (⌘ Cmd+N) 1024 × 128 px, Transparent. Photoshop›SettingsCài đặt›Guides, Grid & Slices: Gridline Every 128 Pixels, Subdivisions 1, bật ViewHiển thị›ShowHiện›GridLưới. Đặt file mẫu trên cùng, đổi tên GUIDE, khóa bằng biểu tượng ổ khóa trong bảng Layers.
3. Hai tư thế chính (key pose): làm việc theo kiểu pose to pose – vẽ khung quan trọng trước. Ellipse Tool, giữ ⇧ Shift, vẽ hình tròn 40 × 40 px tâm (64, 33) trong ô 1 – đây là F1 đỉnh. Fill #ff7a45, Stroke 2 px #1b1a24. Nhấn ⌘ Cmd+G gom vào Group F1. Nhân đôi Group (⌘ Cmd+J), đổi tên F5, dời sang ô 5 – đây sẽ là frame chạm đất.
4. Squash ở F5: chọn shape trong F5, bảng Properties gõ W 57 px, H 25 px (142% × 62%). Kéo cho đáy bóng chạm đúng vạch hồng y = 120. Kiểm tra thể tích: 1,42 × 0,62 ≈ 0,88 – gần 1, mắt người thấy "cùng một quả bóng". Nếu bạn chỉ bóp dẹt mà không nới rộng, bóng sẽ trông như bị xẹp hơi.
5. Khung trung gian khi rơi (F2–F4): nhân đôi F1 ba lần, dời vào ô 2, 3, 4. Đặt tâm theo biểu đồ spacing: F2 y ≈ 38 (mới nhích 8%), F3 y ≈ 53 (30%), F4 y ≈ 80 (70%). Tâm luôn ở x = 64 của ô – bóng nảy tại chỗ, Unity sẽ lo di chuyển nếu cần.
6. Stretch theo tốc độ: bóng càng nhanh càng kéo dài theo hướng bay. F2: W 39 × H 42 px; F3: W 35 × H 46 px; F4: W 31 × H 52 px (78% × 130%). Đây là cách hoạt hình "giả lập" vệt nhòe chuyển động (motion blur) mà mắt người thấy ở vật bay nhanh.
7. Khung trung gian khi bật lên (F6–F8): nhân đôi F4 sang ô 6, đặt y ≈ 73, kích thước W 34 × H 48 px (bóng vừa bật lên vẫn còn kéo dài). F7: y ≈ 50, W 38 × H 42 px. F8: y ≈ 37, tròn trở lại 40 × 40. F8 nối về F1 nên phải rất gần F1 – nếu không, vòng lặp sẽ "giật" ở đỉnh.
8. Soát bằng onion skin (mẹo cho Frame Animation): Photoshop chỉ có Onion Skin (Giấy can) thật ở chế độ Video Timeline. Mẹo nhanh: tạm kéo Group F4 và F6 chồng lên ô F5 (giữ ⇧ Shift khi dời để thẳng hàng), hạ Opacity (Độ mờ đục) hai Group còn 30%, thêm Layer Style › Color Overlay (Phủ chồng) hồng cho F4 và xanh lá cho F6. Ba hình phải nối thành một chuyển động liền: kéo dài → bẹp → kéo dài. Xong thì ⌘ Cmd+Z hoặc dời trả về ô cũ, bỏ Color Overlay.
9. Tô sáng tối: trong mỗi Group, tạo layer mới kẹp vào shape (⌘ Cmd+⌥ Option+G). Cọ Hard Round tô mặt tối #c2410c ở nửa dưới – phải, chấm điểm sáng #ffc29e hình bầu dục nhỏ ở trên – trái. Vì là Clipping Mask, sáng tối tự co giãn theo hình bóng khi bạn bóp – kéo. Ánh sáng giữ nguyên hướng ở mọi frame.
10. Vạch trang trí: một dải cong #fff3e0 quanh thân bóng giúp mắt thấy bóng xoay nhẹ. Vẽ bằng Pen Tool (Bút tạo đường) (P) chế độ Shape, kẹp vào thân bóng. Ở F5 dải bị ép dẹt theo, ở F4 dải bị kéo dài – nhờ vậy squash & stretch đọc rõ hơn.
11. Bóng đổ mặt đất: layer dưới cùng mỗi Group: Ellipse dẹt #1b1a24 Opacity 25%, đặt trên vạch y = 120. Bóng ở cao thì bóng đổ nhỏ và mờ (rộng 18 px), bóng chạm đất thì bóng đổ to và đậm (rộng 50 px). Chi tiết nhỏ này cho người chơi biết độ cao chính xác.
12. Dựng Timeline có frame delay: WindowCửa sổ›TimelineDòng thời gian › Create Frame Animation. Trong menu bảng Timeline chọn Make Frames From Layers sẽ tạo frame cho từng layer – nhưng với Group, cách chắc chắn hơn là: frame 1 chỉ bật Group F1, bấm nút Duplicates selected frames, tắt F1 bật F2… cho đủ 8 frame. Bấm số thời gian dưới mỗi thumbnail chọn Other… gõ 0,125 – 0,083 – 0,042 – 0,042 – 0,083 – 0,042 – 0,083 – 0,125. Vòng lặp (Looping Options) chọn Forever, nhấn Space để xem. Vì mỗi Group nằm ở ô riêng, bản xem trước sẽ "trượt" qua phải – hãy bật tạm Move Tool (Công cụ Di chuyển) và dời cả 8 Group về ô 1 để xem tại chỗ, xem xong ⌘ Cmd+Z.
13. Xuất GIF xem thử và sheet PNG: GIF để gửi bạn bè góp ý: FileTệp›Export›Save for Web (Legacy) (⌥ Option+⇧ Shift+⌘ Cmd+S), định dạng GIF, Transparency (Độ trong suốt) bật, Looping Options Forever. Sheet cho game: ẩn GUIDE và lưới, đảm bảo 8 Group nằm đúng 8 ô, FileTệp›Export›Export AsXuất ra (tùy chỉnh) (⌥ Option+⇧ Shift+⌘ Cmd+W) PNG, Transparency bật → ball_bounce.png đúng 1024 × 128 px.
14. Đưa vào Unity 6: kéo PNG vào Project. Inspector: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 128, Filter Mode (Chế độ lọc ảnh) Bilinear, Compression None → Apply. Bấm Sprite Editor › Slice › Type Grid By Cell Size, Pixel Size 128 × 128, Pivot (Điểm neo) Bottom › Slice › Apply. Chọn 8 sprite con, kéo vào Hierarchy – Unity tạo file .anim và Animator Controller. Mở cửa sổ Animation (⌘ Cmd+6), menu ⋮ › Show Sample Rate, đặt Samples 24; kéo keyframe để F1, F8 chiếm 3 ô (125 ms), F2, F5, F7 chiếm 2 ô (83 ms), F3, F4, F6 chiếm 1 ô (42 ms). Tích Loop Time trong Inspector của clip.

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

• Ba quả bóng khác chất liệu: làm thêm bóng bowling (gần như không squash, chạm đất giữ 1 ô, nảy rất thấp) và bóng bay (stretch nhẹ, rơi chậm, spacing gần như đều). Đặt ba sheet cạnh nhau – cùng hình tròn nhưng khác timing cho ra ba trọng lượng khác nhau.
• Bóng nảy tiến về phía trước: canvas 1024 × 256 px, bóng đi theo các đường cung parabol nhỏ dần qua 3 lần nảy. Ở đây bạn gặp thêm nguyên lý arcs.
• Squash & stretch bằng code: trong Unity giữ một sprite tròn, viết script đổi transform.localScale theo vận tốc Rigidbody2D (x = 1 / y để giữ thể tích). Hãy so sánh với bản vẽ tay để thấy vì sao bản vẽ tay vẫn "có hồn" hơn.