Dự án 11: Cây đung đưa trong gió 8 frame

Cảnh nền đứng im làm thế giới game như tranh in. Một cái cây đung đưa nhẹ là đủ cho người chơi cảm thấy có gió. Cây là ví dụ hoàn hảo của overlapping action nhiều tầng: gốc đứng yên, thân nghiêng theo gió, tán lá đi trễ thân một nhịp, chóp lá và lá rơi trễ thêm nhịp nữa. Bạn cũng gặp lại ease: cây chậm lại ở hai biên trái – phải và nhanh nhất khi đi qua giữa, như con lắc. Kỹ thuật này dùng cho cỏ, bụi rậm, rong biển, đèn lồng treo.

Hình mẫu

Thời gian ước tính: khoảng 70 phút. Nhịp: 8 frame × 100 ms = 800 ms một vòng (10 fps). Gió nhẹ có thể đặt Animator Speed 0,6 – vòng 1,3 giây – mà không cần vẽ lại.

Chuẩn bị

• Canvas: 1024 × 256 px (8 frame × 128 × 256 px), Resolution (Độ phân giải) 72, RGB, Transparent. Cả hai cạnh là lũy thừa của 2.
• Công cụ chính: Brush (Cọ vẽ) Tool với cọ lá (Brush Settings (Cài đặt cọ) › Shape Dynamics (Biến đổi hình dạng), Scattering (Tán xạ)), Puppet Warp (Uốn cong) (EditChỉnh sửa›Puppet Warp) uốn thân và tán, Free Transform (Biến đổi tự do), Clipping Mask (Mặt nạ cắt), Smart Object (Đối tượng thông minh).
• Thiết bị: tán lá nhiều cụm vẽ bằng bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (Sidecar/Astropad) cho mép lá tự nhiên – bật Pen Pressure (Lực nhấn bút) cho Size. Dùng chuột: dựng tán bằng các hình tròn (Ellipse) chồng nhau, thêm mép lá bằng cọ lá có Scattering – một cú click là một chùm lá, rất hợp với chuột. Uốn bằng Puppet Warp cũng là thao tác chuột.
• File mẫu: "Khung 8 frame cây" – vạch hồng y = 242 là mặt đất, chấm hồng ở x = 64 là gốc cố định, đường xanh là dáng thân từng frame (lệch tối đa ±10 px ở ngọn), cung xám là quỹ đạo của tán.

Các bước

1. Vẽ cây gốc ở tư thế thẳng: file riêng 128 × 256 px. Thân cong nhẹ từ gốc (rộng 12 px) tới ngọn (rộng 5 px), một cành nhỏ bên phải. Tán gồm 6 cụm tròn: 2 cụm dưới, 1 cụm giữa lớn, 2 cụm trên, 1 cụm chóp. Tô theo bảng màu: lá giữa phủ cả tán, lá tối ở nửa dưới – phải mỗi cụm, lá sáng ở trên – trái.
2. Tách ba tầng: để mỗi tầng chuyển động riêng, tách thành 3 layer (hoặc Smart Object): TRUNK (thân và cành), CANOPY (5 cụm lá chính), TIPS (cụm chóp và các lá rời ở mép). Đây là chuẩn bị cho overlapping action.
3. Lập bảng lệch pha: vòng 8 frame tương ứng 360°, mỗi frame 45°. Thân nghiêng theo sin(góc); tán đi trễ 1 frame (45°); chóp trễ 2 frame (90°). Viết ra giấy: F1 thân 0, tán hơi trái, chóp trái nhiều; F3 thân phải nhất; F4 tán phải nhất; F5 chóp phải nhất… Chính độ trễ này tạo cảm giác lá "bị kéo theo" thân.
4. Hai biên (key pose): F3 – thân nghiêng phải nhất (ngọn lệch +10 px), F7 – nghiêng trái nhất (−10 px). Dùng EditChỉnh sửa›Puppet Warp trên layer TRUNK: ghim 3 điểm (gốc, giữa thân, ngọn), giữ chặt ghim gốc, kéo ghim ngọn sang ngang 10 px. Thân cong mềm như cần câu, không gãy như que.
5. Gốc cố định: ở mọi frame, ghim gốc của Puppet Warp không được dời. So với chấm hồng của file mẫu – gốc lệch 1 px là cả cây trôi trên mặt đất.
6. Khung giữa: F1 và F5 thân thẳng (đi qua giữa, nhanh nhất), F2 và F4 lệch +7 px, F6 và F8 lệch −7 px. Vì hàm sin chậm ở biên, F2 – F3 – F4 gần nhau còn F1 – F5 xa nhau: đây là ease tự nhiên của dao động.
7. Tán đi trễ: đặt layer CANOPY theo ngọn thân nhưng cộng thêm độ lệch của frame trước: ở F3 thân lệch phải nhất nhưng tán mới lệch như F2 thân; ở F4 tán mới tới biên phải. Dùng Free Transform dời và nghiêng tán (Skew 3–5°) chứ không chỉ dời ngang.
8. Chóp và lá rời trễ hơn nữa: layer TIPS trễ thêm một frame so với tán, biên độ lớn hơn 1,5 lần. Ở mép tán, vài lá lật mặt sáng ra khi gió thổi tới (tô #e0f080 ở frame tán lệch xa nhất).
9. Soát onion skin: kéo tạm F2 và F4 chồng lên ô F3, Opacity (Độ mờ đục) 30%, Color Overlay (Phủ chồng) hồng – xanh lá. Ở thân, ba nét gần nhau (biên); ở tán, F4 còn tiếp tục đi xa hơn F3 – đó là dấu hiệu overlapping đúng.
10. Lá rơi (secondary action): một chiếc lá nhỏ rơi lượn qua 8 frame: mỗi frame xuống 5 px, lắc trái phải theo đường zigzag và xoay ±30°. Ở frame 8 lá ra khỏi khung dưới để vòng lặp tiếp tục với lá mới từ tán.
11. Đặt vào sheet: sheet 1024 × 256 px, mỗi frame một Group ở ô của nó (X tương đối 128 px). Cỏ dưới gốc vẽ một lần, nhân 8 – cỏ có thể lắc 1 px theo tán nếu muốn.
12. Timeline (Dòng thời gian): 8 frame 0,1 giây, Forever. Xem: cây phải đung đưa như có gió liên tục, không giật ở F8 → F1. Nếu thấy tán "trôi" so với thân, giảm độ lệch của tán còn 70%.
13. Xuất và Unity 6: Export As (Xuất ra (tùy chỉnh)) PNG → tree_sway.png 1024 × 256 px. Sprite (2D and UI), Multiple, PPU 64 → Sprite Editor › Grid By Cell Size 128 × 256, Pivot (Điểm neo) Bottom (gốc cây) › Apply. Clip Sway, Samples 10, Loop Time. Đặt cả hàng cây trên Tilemap nền, mỗi cây Animator bắt đầu ở frame khác: script animator.Play("Sway", 0, x * 0.05f % 1f) theo vị trí x – gió như lan dần qua hàng cây. Sorting Layer Background và Order in Layer theo chiều sâu.

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

• Gió giật: clip thứ hai 6 frame biên độ gấp đôi, lá bay ra nhiều hơn; phát khi có sự kiện bão trong màn chơi.
• Bụi cỏ phản ứng với người chơi: clip 4 frame cỏ rạp xuống rồi bật lại (overshoot) khi nhân vật đi qua – dùng OnTriggerEnter2D.
• Rig thay sheet: với cây lớn, dùng 2D Animation (dự án 15): 3 xương dọc thân + 2 xương tán, Sprite Skin uốn cây mượt hơn mà texture chỉ một ảnh.