Dự án 4: Cờ bay phấp phới 6 frame

Một lá cờ bay là ví dụ đẹp nhất của nguyên lý follow-through & overlapping action: phần gắn vào cán gần như đứng yên, càng ra đuôi chuyển động càng trễ và càng mạnh. Sóng trên lá cờ không lên xuống tại chỗ mà chạy từ cán ra đuôi. Bạn sẽ học một mẹo của animator: chia một chu kỳ sóng (360°) cho số frame (6) để mỗi frame dời sóng đúng 60° – vòng lặp tự khép kín, không cần căn chỉnh bằng mắt. Cùng kỹ thuật dùng cho tóc dài, áo choàng, đuôi rồng và rong biển.

Hình mẫu

Thời gian ước tính: khoảng 50 phút. Nhịp: 6 frame × 83 ms = 498 ms một vòng (12 fps). Gió mạnh hơn? Giữ 6 frame nhưng giảm còn 67 ms – không cần vẽ lại.

Chuẩn bị

• Canvas: 768 × 128 px (6 frame × 128 px), Resolution (Độ phân giải) 72, RGB Color, Transparent.
• Công cụ chính: Rectangle Tool, Free Transform (Biến đổi tự do) (Ctrl+T) chế độ Warp (Uốn cong) (chuột phải › Warp, hoặc biểu tượng lưới trên thanh Options), Warp kiểu Flag và Wave có sẵn trong ô Warp của thanh Options, Clipping Mask (Mặt nạ cắt) (Ctrl+Alt+G), Pen Tool (Bút tạo đường) cho nếp.
• Thiết bị: Warp và Shape điều khiển tốt bằng chuột. Bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (Sidecar/Astropad) giúp tô nếp sáng tối mềm hơn với Pen Pressure (Lực nhấn bút) ở Opacity (Độ mờ đục); dùng chuột thì tô nếp bằng Pen Tool rồi hạ Opacity layer.
• File mẫu: "Khung 6 frame cờ bay" – đặt trên cùng, khóa. Vạch xám đứng ở x = 20 là cán, khung xanh 84 × 44 px là lá cờ khi phẳng, vạch hồng là vị trí đỉnh sóng của frame đó – nó dời dần sang phải qua 6 frame.

Các bước

1. Cán cờ (phần tĩnh): trong ô 1 vẽ Rectangle 5 × 112 px tại x 18, y 8, Fill #c9a27a, Stroke 1,5 px #1b1a24; núm tròn 8 px #ffd84a trên đỉnh; chân cán 10 × 6 px #5a3a2a ở y 118. Gom Group POLE, nhân đôi sang 5 ô còn lại bằng X tương đối 128 px.
2. Lá cờ phẳng: Rectangle 84 × 44 px tại (24, 16), Fill #3f74c0, Stroke 1,5 px. Thêm biểu tượng: tròn 20 px #ffd84a và tròn 11 px #3f74c0 bên trong, đặt ở 1/3 chiều dài cờ. Chọn cả lá cờ và biểu tượng, chuột phải › Convert to Smart Object (Đối tượng thông minh) – từ giờ bạn uốn bằng Warp mà không làm hỏng hình gốc.
3. Hiểu sóng chạy: trên giấy vẽ một đường hình sin dài gấp đôi lá cờ. Lá cờ là "cửa sổ" nhìn vào đường sin đó; mỗi frame, đường sin trượt sang phải 1/6 bước sóng (60°). Sau 6 frame nó trượt đúng 1 bước sóng – hình trở lại như F1. Đó là lý do vòng lặp khép kín hoàn hảo.
4. Key pose F1 bằng Warp: nhân đôi Smart Object vào Group F1, Ctrl+T › Warp, chọn kiểu Flag Bend 30%. Kéo thêm các điểm điều khiển để mép trên và mép dưới cùng uốn một sóng: đỉnh sóng ngay chỗ vạch hồng của file mẫu, đáy sóng cách đó nửa lá cờ.
5. Biên độ tăng dần: sát cán, lá cờ gần như không lên xuống (2 px); ở đuôi lên xuống 9 px. Kéo các điểm điều khiển gần cán ít, gần đuôi nhiều. Đây chính là overlapping action – đuôi trễ và mạnh hơn gốc.
6. Key pose F4: F4 lệch F1 đúng nửa chu kỳ (180°): chỗ F1 là đỉnh sóng thì F4 là đáy sóng. Nhân đôi Smart Object vào Group F4, Warp sao cho mép cờ đối xứng ngược với F1 qua đường giữa. Hai frame này là khung xương của cả vòng.
7. Khung trung gian F2, F3, F5, F6: mỗi frame đỉnh sóng dời sang phải 1/6 bước sóng theo vạch hồng của file mẫu. Đỉnh sóng chạy ra khỏi đuôi thì một đỉnh mới xuất hiện từ phía cán. Đuôi cờ cũng hơi co lại khi bị gấp (chiều dài nhìn thấy ngắn đi 2–3 px ở frame gấp nhiều).
8. Soát onion skin: kéo tạm F2 và F4 chồng lên ô F3, Opacity 30%, Color Overlay (Phủ chồng) hồng – xanh lá. Ba đường mép cờ phải xếp như các lớp sóng biển đẩy về phía đuôi – không có frame nào "lùi" lại.
9. Rasterize (Chuyển thành điểm ảnh) và tô nếp: khi đã ưng dáng, chuột phải Smart Object › Rasterize Layer. Layer mới kẹp vào lá cờ: nếp sáng #76a8ea ở sườn sóng hướng lên trên (đón ánh sáng trời), nếp tối #2c3f7a ở sườn hướng xuống. Mỗi nếp là một dải dọc hơi cong theo hướng sóng.
10. Nếp chạy theo sóng: vì sóng dời 60° mỗi frame, các dải sáng tối cũng dời đúng chừng đó. Mẹo: vẽ dải sáng tối ở F1, nhân đôi sang F2 rồi dời sang phải đúng khoảng sóng đã dời, sửa lại phần chạm mép.
11. Biểu tượng co giãn theo nếp: biểu tượng tròn nằm trên vùng bị nghiêng sẽ bị bóp hẹp (elip) – ở sườn sóng hẹp lại 75%, ở đỉnh sóng tròn đầy. Đây là squash & stretch "thụ động": vật bị chất liệu kéo theo.
12. Timeline (Dòng thời gian) và kiểm tra gió: 6 frame, mỗi frame 0,083 giây, Forever. Xem lặp: sóng phải chạy đều một chiều từ cán ra đuôi. Thử đổi thành 0,067 – gió mạnh hơn mà không cần vẽ lại; 0,12 – gió nhẹ.
13. Xuất và đưa vào Unity 6: Export As (Xuất ra (tùy chỉnh)) PNG → flag_wave.png 768 × 128 px. Unity: Sprite (2D and UI), Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 128 → Sprite Editor › Grid By Cell Size 128 × 128, Pivot (Điểm neo) Custom X 0,16 Y 0,06 (chân cán) › Apply. Clip 6 frame, Samples 12, Loop Time. Ở checkpoint, viết script đổi animator.speed từ 0,5 lên 1,5 khi người chơi chạm vào – cờ bay mạnh lên báo đã lưu game.

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

• Áo choàng nhân vật: áp dụng y hệt cho áo choàng sau lưng khi đứng idle: gốc ở vai, sóng chạy xuống gấu áo, 6 frame.
• Cờ rách: cắt vài vết rách ở đuôi; phần rời ra trễ hơn phần chính thêm 1 frame – overlapping lồng trong overlapping.
• Shader thay sprite: trong Unity, Shader Graph với node Sine dịch UV theo thời gian có thể làm cờ bay mềm hơn; hãy so sánh với sprite vẽ tay để biết khi nào dùng cách nào.