Dự án 9: Chim vỗ cánh vòng lặp 6 frame

Vỗ cánh là vòng lặp sinh học kinh điển: cánh đập xuống tạo lực nâng nên thân nhô lên; cánh vung lên thì thân hạ xuống một chút. Hai chuyển động ngược pha này (hành động – phản lực) làm chú chim bay có trọng lượng thay vì như cái quạt gắn trên que. Bạn cũng học vẽ cánh xa (tối hơn, nhỏ hơn, sau thân) và cánh gần, cánh gập lại khi vung lên để giảm cản gió, và xếp sheet theo lưới nhiều hàng – cách tiết kiệm không gian texture khi số frame nhiều.

Hình mẫu

Thời gian ước tính: khoảng 65 phút. Nhịp: 6 frame × 83 ms = 498 ms một vòng – khoảng 2 lần vỗ mỗi giây, hợp với chim cỡ bồ câu. Chim nhỏ (chim sẻ) vỗ nhanh hơn: giảm còn 50 ms; chim lớn (đại bàng) chậm hơn: 120 ms.

Chuẩn bị

• Canvas: 384 × 256 px – lưới 3 cột × 2 hàng, mỗi ô 128 × 128 px. Đọc thứ tự trái sang phải, hàng trên rồi hàng dưới (F1–F3, F4–F6). Resolution (Độ phân giải) 72, RGB, Transparent.
• Công cụ chính: Pen Tool (Bút tạo đường) (P) cho cánh, Ellipse Tool cho thân và đầu, Free Transform (Biến đổi tự do) xoay cánh quanh vai (điểm tham chiếu ở vai), Clipping Mask (Mặt nạ cắt), Brush (Cọ vẽ) Hard Round cho lông.
• Thiết bị: cánh là hình khối riêng nên chuột làm tốt: vẽ cánh một lần bằng Pen Tool rồi xoay quanh vai bằng Free Transform cho từng frame. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) (Sidecar/Astropad) giúp vẽ lông cánh và sửa cánh cong khi gập ở F5 nhanh hơn.
• File mẫu: "Khung lưới chim 3 × 2" – dấu cộng xám là tâm thân từng frame (cao thấp khác nhau), đường hồng là góc cánh, cung xanh là quỹ đạo đầu cánh.

Các bước

1. Tạo file lưới: 384 × 256 px Transparent, Gridline 128 px. Đặt file mẫu trên cùng, khóa. 6 Group F1…F6, nhớ thứ tự lưới: F1–F3 hàng trên, F4–F6 hàng dưới.
2. Thân (phần ít thay đổi): trong ô 1, Ellipse 52 × 30 px cho thân, tròn 23 px cho đầu phía trước – trên, mỏ tam giác #ffb020, mắt chấm đen 4 px, đuôi hai mảnh hình giọt phía sau. Bụng #fff3e0 kẹp vào thân. Gom Group BODY.
3. Vẽ cánh một lần: Pen Tool vẽ cánh gần: gốc rộng ở vai (gần đầu), thuôn dần ra đầu cánh với 3 răng lông ở mép sau, dài khoảng 41 px. Fill #6a98e0, Stroke 1,5 px. Nhân đôi, đổi màu #4a6fa8, thu nhỏ 92% – cánh xa, đặt dưới BODY.
4. Hai key pose: F1 – cánh giơ cao gần thẳng đứng (góc −75°), thân ở vị trí thấp; F4 – cánh đập xuống thấp nhất (+45°), thân cao nhất (cao hơn F1 khoảng 10 px theo dấu cộng của file mẫu). Xoay cánh bằng Free Transform: kéo điểm tham chiếu về vai rồi gõ góc.
5. Khung trung gian pha đập xuống: F2 cánh −35°, F3 cánh ngang 5°. Thân nhô dần lên theo dấu cộng. Pha đập xuống là pha có lực – cánh duỗi thẳng tối đa để "vợt" không khí.
6. Pha vung lên – gập cánh: F5 cánh +15° nhưng gập lại: chỉ còn 75% chiều dài, đầu cánh cong vào trong (dùng Warp (Uốn cong) hoặc vẽ lại). Chim thật gập cánh khi vung lên để không đẩy ngược mình xuống. F6 cánh −40°, duỗi dần trở lại, thân hạ xuống để nối về F1.
7. Cung đầu cánh: chấm đỏ ở đầu cánh của cả 6 frame (xếp chồng tại chỗ). Các chấm tạo thành một vòng dẹt hình số 8 nghiêng – xuống theo cung ngoài, lên theo cung trong (vì cánh gập). Nếu các chấm chỉ đi lên xuống trên một đường, cánh đang đập như cái quạt.
8. Soát onion skin: kéo tạm F3 và F5 chồng lên ô F4, Opacity (Độ mờ đục) 30%, Color Overlay (Phủ chồng) hồng – xanh lá. Thân phải lên xuống ngược pha với cánh. Cánh xa luôn đi theo cánh gần nhưng hơi trễ và hơi ngắn hơn (phối cảnh).
9. Lông sáng tối: layer kẹp vào cánh gần: dải sáng #a8c8f8 dọc mép trước cánh (mép đón gió), dải tối #2c4f8f ở các răng lông mép sau. Đầu có đốm sáng phía trên. Mỗi frame sáng tối theo hướng cánh nhưng ánh sáng vẫn từ trên xuống.
10. Đuôi theo đà: đuôi nhích lên khi thân xuống và ngược lại, trễ thân một frame – overlapping action nhỏ làm chim mềm mại.
11. Timeline (Dòng thời gian): 6 frame 0,083 giây, Forever. Vì sheet là lưới, khi xem trước hãy dời tạm các Group về cùng một ô (hoặc xem file GIF). Thử 0,05 và 0,12 để cảm nhận chim nhỏ – chim lớn.
12. Xuất: ẩn file mẫu, Export As (Xuất ra (tùy chỉnh)) PNG → bird_flap.png 384 × 256 px. Kiểm tra đầu cánh F1 không chạm mép trên ô (chừa ít nhất 4 px).
13. Unity 6 – slice lưới: Sprite (2D and UI), Multiple, PPU 128, Sprite Editor › Slice › Grid By Cell Size 128 × 128, Pivot (Điểm neo) Center › Slice. Unity đặt tên sprite bird_flap_0 … bird_flap_5 theo thứ tự trái sang phải, trên xuống dưới – đúng thứ tự frame. Clip Fly, Samples 12, Loop Time. Cho chim bay bằng script dời transform.position theo đường sin nhẹ; lật hướng bằng Sprite Renderer › Flip X khi đổi chiều.

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

• Dơi và rồng: cánh màng (dơi, rồng) không gập kiểu lông vũ mà co lại như ô; vẽ lại F5 với màng chùng xuống. Dùng cùng nhịp 6 frame.
• Cất cánh: làm clip 4 frame chim nhún chân, bật lên và vỗ cánh đầu tiên – áp dụng anticipation như cú nhảy.
• Bay xa dần: sheet thứ hai 64 × 64 px cho chim ở hậu cảnh: ít chi tiết hơn, 4 frame, chỉ cần thấy cánh lên – xuống.