Dự án 14: Vụ nổ pixel 8 frame chỉ với 7 màu

Vụ nổ là phần thưởng thị giác cho mỗi con quái bị hạ, mỗi thùng thuốc nổ, mỗi phát tên lửa. Trong pixel art, vụ nổ đẹp không nhờ nhiều màu mà nhờ nhịp điệu: bùng lên cực nhanh, rồi tan thật chậm. Bảng chỉ 7 màu được sắp theo "nhiệt độ": trắng (nóng nhất) → vàng → cam → đỏ → đỏ sẫm → khói. Theo thời gian, mỗi vùng của vụ nổ "nguội" dần, bước xuống một nấc trong bảng – quy luật đơn giản đó tạo nên toàn bộ hoạt ảnh. Khi lửa tắt, khói không biến mất đột ngột mà tan bằng dither: các ô pixel thưa dần.

Hình mẫu

Thời gian ước tính: khoảng 150 phút. Đọc thời lượng dưới mỗi frame: 40 ms ở đầu, 120 ms ở cuối – tổng cả vụ nổ chưa tới 0,7 giây.

Chuẩn bị

• Canvas: 512 × 64 px (8 frame 64 × 64), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Cả hai cạnh là lũy thừa của 2.
• Công cụ chính: Elliptical Marquee (Khung chọn) bỏ Anti-alias (Khử răng cưa) (khối tròn của lửa và khói), Pencil (Bút chì) Tool 1 px (⇧ Shift+B) để làm mép lửa gồ ghề, Eraser (Tẩy) Mode Pencil cho dither khói, WindowCửa sổ›TimelineDòng thời gian chế độ Frame Animation.
• Phóng to không mờ: Image Interpolation Nearest Neighbor (Điểm lân cận), ViewHiển thị›ShowHiện›Pixel GridLưới điểm ảnh, Grid mỗi 64 px chia 8.
• Thiết bị: mép lửa gồ ghề và cuộn khói vẽ bằng bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil cho cảm giác tự nhiên (vẽ trên layer phác). Nhưng chuột làm được hoàn toàn: dựng khối bằng vùng chọn tròn rồi chấm từng pixel ở mép – đây là cách nhiều họa sĩ pixel dùng thật. Tắt lực nhấn với bút.
• File mẫu: "Dải 8 ô 64 × 64": mỗi ô có một vòng hồng là bán kính gợi ý của quả cầu lửa (5, 11, 17, 22, 24, 25, 26, 27 px) và tâm nổ ở (32, 34).

Các bước

1. Tạo file: ⌘ Cmd+N 512 × 64 px, Transparent. Đặt file mẫu, khóa lại. Mỗi frame một Group F1 … F8, trong mỗi group có layer Smoke (dưới) và Fire (trên).
2. Phác kích thước: layer phác, vẽ 8 hình tròn theo vòng gợi ý. Cầu lửa lớn rất nhanh ở frame 1–4 (5 → 22 px) rồi gần như dừng (24 → 27 px) – vụ nổ bùng mạnh rồi "phanh lại". Đây là đường cong tốc độ của cả hoạt ảnh.
3. Frame 1 – chớp: một khối tròn nhỏ bán kính 5 px #fff8e0 hơi méo (cắt 1–2 pixel ở mép). Chỉ một màu: mắt người chơi chỉ kịp thấy một tia chớp.
4. Frame 2 – chớp lớn: bán kính 11 px: lõi trắng chiếm 3/4, viền vàng #ffd84a mỏng. Mép gồ ghề: cứ 30–40° quanh vòng tròn đẩy ra hoặc lõm vào 1–2 px. Thêm 8–10 tia lửa 1–2 pixel vàng và cam văng ra ngoài.
5. Frame 3 – cầu lửa: bán kính 17 px. Từ tâm ra ngoài: trắng (45% bán kính) → vàng → cam → đỏ ở mép, và 1 vòng #7a1c2a ở mép ngoài. Các vùng không là vòng tròn đều: lõi trắng lệch lên trên (lửa bốc lên), mép đỏ gồ ghề thành 5–6 "múi".
6. Frame 4 – lớn nhất: bán kính 22 px, lõi trắng thu nhỏ còn 25%, vàng và cam chiếm phần lớn – vụ nổ bắt đầu nguội. Khói #3d3a55 xuất hiện thành 5–7 cụm tròn nhỏ ló ra sau mép lửa (layer Smoke). Tia lửa văng xa hơn và chuyển sang cam.
7. Quy tắc "nguội dần": từ frame 4 trở đi, ở mỗi frame mới, mỗi vùng màu bước xuống một nấc: trắng → vàng, vàng → cam, cam → đỏ, đỏ → khói. Sao chép frame trước sang ô mới, dùng Magic Wand (Đũa thần) (Tolerance 0, bỏ Contiguous, chỉ trong vùng chọn ô đó) chọn từng màu và tô màu kế tiếp – rồi chỉnh tay hình dạng.
8. Frame 5–6 – lửa thành khói: khói lớn dần thành các cụm bán kính 10–14 px bao quanh và đè lên lửa, mỗi cụm có mặt sáng #6a6888 phía trên – trái. Lửa còn lại co về giữa, chủ yếu là cam – đỏ, frame 6 chỉ còn một nhân lửa nhỏ trong làn khói.
9. Frame 7 – lửa tàn: lửa chỉ còn vài pixel đỏ – cam ở giữa hoặc tắt hẳn. Các cụm khói bốc cao hơn 2–3 px so với frame 6 (khói nóng bay lên) và tách rời nhau.
10. Frame 8 – khói tan bằng dither: cụm khói nhỏ lại, dùng Eraser Mode Pencil xóa theo hoa văn ô 2 × 2 xen kẽ (như bàn cờ với ô to 2 px) để còn khoảng một nửa pixel. Không xóa ngẫu nhiên – hoa văn đều cho cảm giác "tan" chứ không phải "rách".
11. Không viền: lửa và khói đều không có viền đen. Chỉ màu #7a1c2a ở mép lửa làm nhiệm vụ tách lửa khỏi nền sáng; khói tối #3d3a55 tách khỏi nền tối nhờ mặt sáng.
12. Thời lượng: WindowCửa sổ›TimelineDòng thời gian › Frame Animation, 8 frame với thời lượng 40 – 40 – 60 – 80 – 80 – 100 – 100 – 120 ms (Photoshop làm tròn thành 0,04 – 0,04 – 0,06 – 0,08…), Looping Once. Phát thử trên nền tối và nền sáng: phần bùng phải gần như tức thì, phần tan phải "thở" được.
13. Kiểm tra và xuất: bản sao › Indexed Color: đúng 7 màu (tối đa 8). Ẩn phác và mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG 100% → explosion.png đúng 512 × 64 px.
14. Unity 6: Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 16, Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None; Slice Grid By Cell Size 64 × 64, Pivot (Điểm neo) Center. Tạo clip Explosion.anim từ 8 sprite, bỏ Loop Time; trong cửa sổ Animation (Samples 60), đặt keyframe ở frame 0, 2, 4, 8, 13, 18, 24, 30 – tương ứng 40 → 120 ms. Thêm Animation Event ở cuối gọi Destroy(gameObject), lưu thành Prefab và sinh ra bằng Instantiate tại chỗ quái chết.

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

• Nổ phép thuật: nhân bản sheet và thay bảng màu bằng Magic Wand: trắng → xanh lơ → tím → tím sẫm, khói thành bụi lấp lánh – cùng hoạt ảnh, nguyên tố khác.
• Mảnh văng: vẽ 4 mảnh vỡ 8 × 8 px (gỗ, đá) và cho Particle System của Unity bắn chúng ra cùng lúc với frame 2, Renderer dùng Material Sprites-Default và Texture Sheet Animation chọn ngẫu nhiên mảnh.
• Vụ nổ nhỏ: làm bản 32 × 32 px 6 frame cho đạn chạm tường bằng cách chọn lọc frame 1, 3, 4, 6, 7, 8 và vẽ lại ở cỡ nhỏ – đừng thu nhỏ bằng Image Size (Kích thước ảnh).