Dự án 2: Làn khói nhỏ (smoke puff) 6 frame

Một làn khói nhỏ "phụt" ra dưới chân là chi tiết khiến cú nhảy, cú lướt hay một con quái biến mất trông có trọng lượng. Khác với tia lửa, khói không tự phát sáng: nó là vật thể mờ đục, nhận ánh sáng từ một phía và che bớt những gì phía sau. Vì vậy dự án này đổi cách làm: vẽ ở chế độ Normal, có mảng sáng – mảng tối như vẽ một chùm bóng bay, và trong game dùng material Alpha Blended. Bạn còn học nhịp "nhanh rồi chậm dần" (ease-out) – khói bung rất nhanh nhưng tan rất lâu.

Hình mẫu

Thời gian ước tính: khoảng 50 phút. Nhịp: 50 – 50 – 67 – 83 – 100 – 117 ms (tổng 467 ms). Hai frame đầu thuộc pha va chạm – khói bung mạnh; bốn frame sau là pha tan biến kéo dài.

Chuẩn bị

• Canvas: 768 × 128 px (6 frame × 128 px), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. 768 không phải lũy thừa của 2 – Unity vẫn dùng tốt, chỉ tốn hơn chút bộ nhớ; nếu muốn chuẩn, bạn có thể đặt 6 frame lên sheet 1024 × 128 và để trống 2 ô.
• Công cụ chính: Ellipse Tool (U) cho các cụm tròn, Brush (Cọ vẽ) Tool (B) cọ Hard Round và Soft Round, Eraser (Tẩy) Tool (E) cọ mềm, Clipping Mask (Mặt nạ cắt) (Ctrl+Alt+G), Lasso (Dây thòng lọng) Tool (L), FilterBộ lọc›Render›Clouds để thêm vân khói.
• Thiết bị: cụm khói dựng bằng hình tròn nên chuột làm được; dùng chuột thì tô mảng sáng bằng Lasso + Alt+Backspace. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) cho mép khói mềm tự nhiên nhất: bật F5 › Transfer › Opacity (Độ mờ đục) Jitter › Control: Pen Pressure (Lực nhấn bút), nhấn nhẹ ở mép để khói "loang" ra.
• File mẫu: "Khung 6 frame khói" – đặt trên cùng và khóa (file trong suốt, chỉ có nét hướng dẫn). Vòng đứt nét cho biết kích thước cụm khói ở từng frame; đường hồng y = 104 là gốc khói (mặt đất dưới chân nhân vật). Tạo thêm một layer nền xám #3a3f4a ở dưới cùng để vẽ – ẩn khi xuất.

Các bước

1. Tạo file: FileTệp›NewTạo mới, 768 × 128 px, Transparent. Gridline Every 128 Pixels. Layer nền BG_grey tô #3a3f4a (Alt+Backspace với màu Foreground (Màu tiền cảnh)), đặt file mẫu trên cùng và khóa. Tạo 6 Group F1…F6.
2. Hình khối của khói: khói là một chùm hình tròn chồng lên nhau, không phải đám mây xoắn rối. Trong Group F4 (frame to nhất) dùng Ellipse Tool vẽ 6 hình tròn: một tròn lớn ở giữa đường kính 34 px, hai tròn hai bên 24 px, hai tròn phía trên 22 px, một tròn dưới đáy. Đáy chùm chạm gốc y = 104.
3. Gộp thành một khối: chọn 6 shape trong bảng Layers, Ctrl+E gộp thành một layer F4_mid, Fill #c9c4bc. Bóng dáng nhìn như bông súp lơ là đúng – các múi tròn giúp người chơi nhận ra "khói" ngay ở 64 px.
4. Mảng tối: nhân đôi (Ctrl+J), đặt bản sao dưới và đổi tên F4_dark, Fill #57514c, dời xuống – phải 2–3 px. Phần lộ ra ở đáy và bên phải là mặt khuất sáng. Ánh sáng cố định từ trên – trái cho mọi frame.
5. Bóng giữa các múi: layer mới kẹp vào F4_mid (Ctrl+Alt+G), Blend Mode (Chế độ hòa trộn) Multiply (Nhân (làm tối)), màu #8e877f. Cọ Hard Round tô nửa dưới – phải của từng múi tròn. Mỗi múi là một quả cầu nhỏ có mặt tối riêng, đừng tô một mảng chung cho cả cụm.
6. Mảng sáng: layer kẹp thứ hai, Normal, màu #f5f3ef. Với mỗi múi, vẽ một hình tròn nhỏ hơn khoảng 55% đặt lệch lên trên – trái. Ở ba múi lớn nhất thêm chấm sáng #ffffff Opacity 60% – khói mới bung còn đặc nên có điểm sáng rõ.
7. Vân khói: layer kẹp thứ ba, D để màu mặc định rồi FilterBộ lọc›Render›Clouds, Blend Mode Soft Light (Ánh sáng dịu), Opacity 25%. Vân mây nhẹ phá bề mặt "nhựa" của các hình tròn mà vẫn giữ khối.
8. F1–F3 – bung ra nhanh: nhân đôi Group F4 ba lần, dời sang ô 1, 2, 3. Dùng Ctrl+T với điểm neo kéo xuống đáy chùm (gốc khói) rồi thu nhỏ: F1 45%, F2 70%, F3 88%. Thu nhỏ quanh đáy giữ khói luôn "mọc" từ mặt đất. F1 – F2 nằm thấp sát gốc, F3 đã nhích lên 4 px.
9. F5 – tách cụm: nhân đôi F4 sang ô 5. Với từng múi, Lasso chọn và Ctrl+T dời ra xa tâm 3–5 px, thu nhỏ 10%. Cả cụm nhích lên thêm 4 px. Hạ Opacity Group xuống 62%. Khói đang loãng ra – các múi rời nhau, để lộ khoảng trống.
10. F6 – tan: nhân đôi F5 sang ô cuối, xóa múi dưới đáy, dời các múi còn lại ra xa thêm, Opacity Group 38%. Dùng Eraser cọ Soft Round 30 px, Opacity 40% xóa nhẹ mép ngoài từng múi. Không còn chấm sáng trắng: khói loãng không còn mặt bóng.
11. Kiểm tra nhịp: WindowCửa sổ›TimelineDòng thời gian › Create Frame Animation, mỗi frame bật một Group. Đặt thời gian 0,05 – 0,05 – 0,07 – 0,08 – 0,1 – 0,12 giây. Khói phải bung "phụt" rất nhanh trong 0,1 giây đầu rồi lững lờ tan. Nếu trông như khói đang co lại, kích thước F5–F6 đang nhỏ hơn F4 quá nhiều – giữ chúng to bằng hoặc hơn F4, chỉ mờ đi.
12. Kiểm tra trên nhiều nền: bật tắt BG_grey, thử thêm một layer nền cỏ #6cbf5a và một nền đá tối #1e2127. Khói xám phải đọc được trên cả ba. Trên nền tối, mảng sáng #f5f3ef làm việc; trên nền sáng, mảng tối #57514c giữ hình.
13. Xuất và đưa vào Unity 6: ẩn mọi nền và file mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG Transparency (Độ trong suốt) → vfx_smoke_puff.png đúng 768 × 128 px. Trong Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 128, Apply. Sprite Editor › Slice › Grid By Cell Size 128 × 128, Pivot (Điểm neo) Bottom › Slice › Apply. Chọn 6 sprite con trong Project, kéo vào Hierarchy – Unity hỏi nơi lưu file .anim và tự tạo Animator. Mở cửa sổ Animation (Ctrl+6), menu ⋮ › Show Sample Rate, đặt Samples 12; kéo các keyframe cuối giãn ra để F5, F6 giữ 2 nhịp. Chọn file .anim, bỏ tích Loop Time. Sprite Renderer giữ material mặc định (Alpha) – không dùng Additive cho khói.

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

• Khói màu theo môi trường: kẹp Adjustment Layer (Lớp điều chỉnh) Color Balance (Cân bằng màu) lên cả 6 Group: kéo Midtones về vàng nâu cho bụi sa mạc, về xanh lam cho hơi lạnh ở màn băng.
• Phiên bản 8 frame vuông: xếp lại thành lưới 4 × 2 trên canvas 512 × 256 px (lũy thừa của 2) và thêm 2 frame tan lâu hơn cho cú tiếp đất nặng của boss.
• Bụi chạy: tạo bản nhỏ 64 × 64 px của F2–F5 làm hạt bụi sau gót nhân vật khi chạy, phát bằng Emission › Rate over Distance.