Dự án 8: Hiệu ứng nổ VFX sprite 6 frame

VFX (visual effects – hiệu ứng hình ảnh) làm cho cú đánh "có lực": vụ nổ, tia sét, bụi bay. Hiệu ứng 2D kiểu hoạt hình không cần vẽ đẹp từng frame – nó cần nhịp đúng: bùng lên thật nhanh, tan đi thật chậm. Trong dự án này bạn làm vụ nổ 6 frame, mỗi frame 64 × 64 px, xếp thành sheet 384 × 64 px.

Hình mẫu

Thời gian ước tính: khoảng 3 giờ: 30 phút đường cong kích thước, 1,5 giờ lửa và khói, 1 giờ xem thử, sửa và xuất.

Chuẩn bị

• File vẽ: vẽ ở gấp 4: mỗi frame 256 × 256 px, cả sheet 1536 × 256 px; cuối cùng thu về 384 × 64 px.
• Brush (Cọ vẽ): Hard Round (cọ tròn cứng) – phong cách cel không dùng cọ mềm cho khối lửa. Chỉ ánh lóe ở frame 1 được phép dùng cọ mềm.
• Thiết bị: tàn lửa và tia bay đẹp khi nét thon đầu. Bút XP-Pen/Huion/Wacom: bật Pen Pressure (Lực nhấn bút) cho Size. Chuột: vẽ khối lửa bằng Lasso (Dây thòng lọng) + tô (Alt+Backspace) – cách này còn nhanh hơn cọ; tia bay dùng Line Tool. iPad qua Sidecar/Astropad: Apple Pencil (Bút chì) như bút thường.
• File mẫu: "Lưới VFX 6 × 64": dấu cộng xanh là tâm nổ (32, 36), vòng tím nét đứt là giới hạn – khối lửa lớn nhất không vượt vòng này để không bị cắt ở mép frame.
• Bảng: WindowCửa sổ›TimelineDòng thời gian để xem thử chuyển động.

Nhịp của vụ nổ

Các bước

1. Tạo file 1536 × 256 px, Transparent. Mở "Lưới VFX 6 × 64", ImageHình ảnh›Image SizeKích thước ảnh 400% với Resample (Lấy mẫu lại) Nearest Neighbor (Điểm lân cận) (hard edges), kéo sang file chính làm layer trên cùng Opacity (Độ mờ đục) 40%.
2. Đường cong kích thước: layer Size Plan: trong mỗi frame vẽ một vòng tròn xanh theo bán kính ở bảng trên (nhân 4). Nhìn cả dãy: to nhanh ở 1 → 3, nhỏ dần chậm ở 4 → 6. Đây là "xương sống" của hiệu ứng – mọi khối lửa và khói bám theo nó.
3. Mỗi frame một Group: tạo Group F1 … F6 (Ctrl+G), trong mỗi Group có layer Fire, Smoke, FX. Giữ tâm nổ cố định tại dấu cộng xanh ở mọi frame – tâm nhảy lung tung thì vụ nổ trông như bị rung.
4. Khối sáng trước: trong Fire của F1–F3 chỉ tô một màu vàng nhạt cho toàn khối: F1 là ngôi sao 6 cánh, F2 là khối tròn méo, F3 là khối to có mép lượn sóng. Dùng Lasso vẽ đường bao mềm, Alt+Backspace tô, viền 6 px.
5. Màu nóng → lạnh từ trong ra ngoài: kẹp layer vào Fire (Ctrl+Alt+G) và vẽ các vòng lồng nhau: ngoài cùng đỏ #ff4d2e, rồi cam, vàng, lõi #fff6d5 hơi lệch lên trên – trái. Càng về frame sau, lõi trắng càng nhỏ và phần đỏ càng nhiều – lửa đang nguội đi.
6. Khói: layer Smoke đặt dưới Fire từ F3 (khói bắt đầu ló ra sau lưng lửa). F4: khói là cụm 4 hình tròn lớn #6b6475 bọc quanh, lửa chỉ còn ở giữa – dưới. F5: khói tối #4a4453, lửa là một đốm đỏ nhỏ. F6: 3–4 cụm khói nhỏ tách rời nhau, Opacity 75%.
7. Khối cho khói: layer kẹp vào Smoke, vẽ các hình tròn nhỏ sáng hơn #8c8598 ở phía trên – trái mỗi cụm khói. Khói dâng lên: mỗi frame dời cụm khói lên 8–12 px (ở file 4x).
8. Tia và tàn lửa: layer FX: F1 có 4 tia ngắn quanh ngôi sao; F3 có 5 mảnh vụn nhỏ bay ra xa gần mép frame; F4–F5 vài đốm tàn lửa #ffb13b. Mảnh vụn phải bay ra xa hơn theo từng frame, không đứng yên.
9. Xem thử bằng Timeline (Dòng thời gian): WindowCửa sổ›TimelineDòng thời gian › Create Frame Animation. Tạo 6 frame, ở mỗi frame chỉ bật Group tương ứng. Bấm vào con số thời gian dưới mỗi frame để đặt theo bảng nhịp (0,05 – 0,12 giây), Looping: Once. Phát bằng Space.
10. Sửa nhịp: nếu vụ nổ trông "mềm", rút ngắn F1–F2 hoặc làm F3 to hơn; nếu tan quá đột ngột, thêm một cụm khói ở F6. Hiệu ứng tốt thường gây cảm giác giật mạnh ở đầu và kéo dài ở cuối.
11. Thu về 64 px: lưu bản 4x (Shift+Ctrl+S explosion_4x.psd). Trên bản chính ImageHình ảnh›Image SizeKích thước ảnh: Width 384, Height 64, Resample Bicubic (Nội suy mượt) Sharper (reduction). Ẩn lưới mẫu và layer Size Plan.
12. Xuất PNG: gộp mỗi frame (hoặc bật tất cả Group), FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG → explosion.png đúng 384 × 64 px, nền trong suốt.
13. Đưa vào Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 64, Filter Mode (Chế độ lọc ảnh) Bilinear, Sprite Editor › Slice › Grid By Cell Size 64 × 64 › Apply. Chọn 6 sprite con, kéo vào Scene để Unity tạo Animation Clip. Chọn file clip trong Project, ở Inspector bỏ tích Loop Time (vụ nổ chỉ phát một lần); trong cửa sổ Animation đặt Samples 12 (nếu không thấy ô Samples, mở menu ⋮ của cửa sổ Animation › Show Sample Rate).

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

• Particle System: trong Unity dùng module Texture Sheet Animation (Mode Grid, Tiles X 6, Y 1) cho Particle System phát nhiều vụ nổ nhỏ cùng lúc, mỗi hạt một kích thước.
• Vòng sóng xung kích: thêm một vòng tròn trắng mảnh lan rộng ở F2–F4 trên layer riêng, Opacity giảm dần.
• Bộ hiệu ứng cùng phong cách: dùng cùng bảng màu và nhịp để làm "trúng đòn" 4 frame (hit spark) 256 × 64 px.