Dự án 11: Bắn nước (water splash) 6 frame

Nước là hiệu ứng "tự nhiên" khó nhất vì ai cũng biết nước thật trông thế nào. Tin tốt: game không cần nước thật, chỉ cần nước đọc đúng chuyển động. Một cú bắn nước có câu chuyện rất rõ, đúng ba pha VFX: giọt rơi xuống (báo trước) → mặt nước bung lên thành vương miện có các mũi nhọn (va chạm) → cột nước bật ngược lên giữa, giọt văng ra theo đường cong rồi rơi xuống, mặt nước lan thành gợn sóng (tan biến). Nước không tự phát sáng nên dùng Alpha Blended như khói; điểm sáng của nó là các vệt phản chiếu trắng.

Hình mẫu

Thời gian ước tính: khoảng 75 phút. Nhịp 33 – 50 – 50 – 67 – 67 – 83 ms (tổng 350 ms). Giọt văng tuân theo trọng lực: bay lên chậm dần, dừng ở đỉnh, rơi xuống nhanh dần.

Chuẩn bị

• Canvas: 384 × 256 px (lưới 3 × 2 ô 128 px), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Pen Tool (Bút tạo đường) (P) cho vương miện và cột nước, Custom Shape giọt nước (hoặc Ellipse + Direct Selection kéo nhọn một đầu), Ellipse Tool cho gợn sóng, Brush (Cọ vẽ) Hard Round cho phản chiếu, Clipping Mask (Mặt nạ cắt), Layer Mask (Mặt nạ lớp).
• Thiết bị: các khối nước dựng bằng Pen và Ellipse – chuột làm tốt. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) giúp vẽ vệt phản chiếu cong và nhanh: một nét Hard Round 3 px có Pen Pressure (Lực nhấn bút), nhấn giữa nhấc hai đầu. Dùng chuột: vẽ vệt bằng Pen Tool rồi Stroke Path có Simulate Pressure.
• File mẫu: "Khung 6 frame nước" – đặt trên cùng, khóa (trong suốt). Đường hồng y = 100 là mặt nước, elip xám là bề rộng gợn sóng ở từng frame, đường dọc là trục giữa. Tạo layer nền thử #1e2a3a dưới cùng (ẩn khi xuất).

Các bước

1. Tạo file: FileTệp›NewTạo mới, 384 × 256 px, Transparent; Gridline Every 128 Pixels. File mẫu trên cùng, nền thử #1e2a3a dưới cùng. Tạo 6 Group F1–F6. Kẻ guide ngang y = 100 và y = 228 (mặt nước hai hàng).
2. Vương miện F3 – hình khối: bắt đầu từ frame cao nhất. Pen Tool Shape, Fill #0d4f8a: từ mặt nước bên trái (x = 30) vẽ thành vương miện đi lên, đỉnh có 5 mũi nhọn cao thấp xen kẽ (mũi giữa cao nhất, khoảng 34 px trên mặt nước), xuống mặt nước bên phải (x = 98). Phía dưới, khoét một vòng cung lõm ở giữa – vương miện là một vành nước rỗng ở giữa, không phải khối đặc.
3. Lớp nước chính và mép sáng: nhân đôi shape, thu nhỏ 92% quanh đáy, Fill #39a8e8, Opacity (Độ mờ đục) 90%. Kẹp layer (⌘ Cmd+⌥ Option+G) vẽ dải #c8f0ff dọc mép trái mỗi mũi – ánh sáng từ trên – trái. Giữ mặt tối bên phải: nước trong nhưng có khối.
4. Giọt nước văng: tạo Custom Shape giọt nước (một đầu tròn, một đầu nhọn) hoặc dùng Ellipse rồi kéo nhọn một điểm. Đặt 5 giọt ở F3 phía trên các mũi vương miện, đầu nhọn hướng ngược chiều bay (giọt bay lên thì đầu nhọn chỉ xuống). Mỗi giọt ba lớp: viền #0d4f8a, thân #39a8e8, chấm phản chiếu trắng ở trên – trái.
5. Phản chiếu trắng: layer mới trên cùng Group, Brush Hard Round 3 px #ffffff: một vệt cong ngắn trên mỗi mũi lớn và một chấm 2 px trên mỗi giọt. Ít nhưng sắc – phản chiếu là thứ khiến người chơi đọc ra "nước" ngay lập tức.
6. Gợn sóng mặt nước: Ellipse Tool vẽ elip theo elip xám của file mẫu (F3: 76 × 17 px), Fill none, Stroke ba lớp 3,2 px #0d4f8a / 1,6 px #39a8e8 / 0,8 px #c8f0ff. Elip nằm ở chân vương miện, nửa sau bị vương miện che.
7. F1 – giọt rơi: một giọt lớn (đầu nhọn hướng lên – đang rơi xuống) ngay trên mặt nước, một vệt dọc mờ phía trên giọt (vệt rơi), và gợn sóng elip nhỏ 36 × 9 px. Không có vương miện.
8. F2 – vương miện thấp: nhân đôi vương miện F3 sang ô 2, ⌘ Cmd+T neo ở đáy: rộng 70%, cao 50%. 3 giọt nhỏ ngay trên các mũi. Gợn sóng 56 × 13 px.
9. F4 – sụp và dâng: vương miện ở ô 4 bè rộng ra (130%) và thấp xuống (50%) – nước đang sụp. Giữa vương miện, Pen Tool vẽ một cột nước mảnh dâng lên 30 px (hình giọt kéo dài) – hiện tượng nước bật ngược thật. Giọt văng ở đỉnh quỹ đạo, xa nhất. Gợn sóng 92 × 19 px.
10. F5 – giọt rơi xuống: ô 5 (hàng dưới) không còn vương miện, chỉ cột nước thấp hơn và một giọt lớn tách ra trên đỉnh cột. Các giọt văng giờ đang rơi: đầu nhọn hướng lên, nằm thấp hơn F4 và xa tâm hơn. Thêm elip gợn sóng thứ hai nhỏ bên trong. Gợn ngoài 102 × 22 px.
11. F6 – gợn sóng tan: chỉ còn hai elip gợn sóng 112 × 23 px và 64 × 12 px, Opacity 70%, và 3 giọt nhỏ sắp chạm mặt nước. Không còn khối nước nào trên mặt.
12. Kiểm tra trọng lực: bật Timeline (Dòng thời gian) (0,03 – 0,05 – 0,05 – 0,07 – 0,07 – 0,08 giây). Theo dõi một giọt văng: khoảng cách nó đi giữa F2→F3 lớn, F3→F4 nhỏ (gần đỉnh), F4→F5 lớn dần khi rơi. Nếu giọt bay đều như bị kéo bằng dây, chỉnh lại vị trí cho đúng đường parabol.
13. Xuất và đưa vào Unity 6: ẩn nền thử và file mẫu, xuất PNG → vfx_water_splash.png đúng 384 × 256 px. Trong Unity 6: Sprite Mode Multiple, Sprite Editor › Grid By Cell Size 128 × 128, Pivot (Điểm neo) Custom Y 0,22 (mặt nước y = 100 trong ô 128), Apply. Kéo 6 sprite vào Hierarchy tạo clip Splash.anim, Samples 24 (giãn keyframe theo nhịp), bỏ Loop Time. Giữ material mặc định Sprite (Alpha). Trong script của vùng nước (Collider 2D Is Trigger), khi vật thể đi vào: tạo prefab Splash tại vị trí x của vật và y của mặt nước, phát âm thanh và tự xóa sau 0,35 giây.

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

• Bắn nước nhỏ khi bước chân: thu nhỏ F2 – F4 thành 3 frame 64 × 64 px cho bước chân trên vũng nước, phát mỗi lần chân chạm đất (Animation Event của clip chạy).
• Chất lỏng khác: đổi ramp sang xanh lá độc, tím thuốc, cam dung nham (dung nham phát sáng – dùng thêm Additive cho lõi), hay nâu bùn – cùng hình dạng, chất liệu mới.
• Giọt văng vật lý: thay giọt vẽ sẵn bằng Particle System: Burst 8 giọt, Start Speed 3–5, Gravity Modifier 1, Render Mode Stretched Billboard – mỗi cú bắn khác nhau một chút.