Dự án 3: Đuốc cháy vòng lặp 6 frame

Lửa là thứ chuyển động không bao giờ lặp lại y hệt ngoài đời – nhưng trong game nó phải lặp sau vài frame. Bí quyết là làm cho vòng lặp bất quy tắc: chiều cao ngọn lửa không tăng đều 1 – 2 – 3 rồi giảm, mà nhảy cao thấp lộn xộn như 4 – 6 – 5 – 3 – 5 – 7. Mắt người chơi không tìm ra quy luật nên tin rằng lửa đang cháy thật. Dự án này cũng dạy nguyên tắc quan trọng của animation tiết kiệm: phần đứng yên vẽ một lần (cán đuốc), chỉ phần chuyển động mới vẽ lại mỗi frame.

Hình mẫu

Thời gian ước tính: khoảng 45 phút. Nhịp: 6 frame × 100 ms = 600 ms một vòng (10 fps). Lửa game thường chạy 8–12 fps – chậm hơn nhân vật – vì lửa nhanh quá trông như đang nhấp nháy lỗi.

Chuẩn bị

• Canvas: 384 × 128 px (6 frame × 64 × 128 px), Resolution (Độ phân giải) 72, RGB Color, Transparent. 384 không phải lũy thừa của 2 – Unity vẫn dùng tốt; nếu cần chuẩn, đặt lên sheet 512 × 128 và chừa 2 ô trống.
• Công cụ chính: Pen Tool (Bút tạo đường) (P) chế độ Shape cho hình giọt lửa, Brush (Cọ vẽ) Tool (B) Hard Round, Smudge (Ngón tay kéo màu) Tool để kéo đỉnh lửa, Clipping Mask (Mặt nạ cắt) (Ctrl+Alt+G), Blend Mode (Chế độ hòa trộn) Linear Dodge (Add) (Cộng sáng) cho lõi, Timeline (Dòng thời gian).
• Thiết bị: lửa đẹp nhất khi vẽ bằng nét tay: bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) (Sidecar/Astropad) – bật F5 › Shape Dynamics (Biến đổi hình dạng) › Size Jitter (Dao động kích thước) › Control Pen Pressure (Lực nhấn bút), vẽ từ gốc lên đỉnh và nhấc bút dần để đỉnh lửa thon. Dùng chuột: dựng giọt lửa bằng Pen Tool (3 điểm neo), sau đó dùng EditChỉnh sửa›Puppet Warp hoặc Smudge Tool Strength 60% để uốn đỉnh – vẫn đẹp và đều tay.
• File mẫu: "Khung 6 frame đuốc" – đặt trên cùng, khóa. Khung chữ nhật xám là vị trí cán (x 27–37, y 80–124), vạch hồng y = 70 là gốc lửa, vạch vàng là đỉnh lửa của từng frame (cao 40 – 48 – 45 – 37 – 46 – 51 px). Tạo layer nền #2a2f3a dưới cùng để vẽ – ẩn khi xuất.

Các bước

1. Phần đứng yên – cán đuốc: tạo file, đặt file mẫu, layer nền tối. Vẽ cán trong ô 1: Rounded Rectangle 9 × 44 px tại x 27, y 80, Fill #94603f, Stroke 1,5 px #1b1a24. Dây quấn ở đầu cán: hình thang 16 × 9 px #5a3a2a tại y 70–79. Gom thành Group HANDLE.
2. Nhân cán cho 6 ô: nhân đôi Group HANDLE 5 lần, mỗi lần dời đúng 64 px (Ctrl+T, bật biểu tượng tam giác Use relative positioning trên thanh Options, gõ X: 64 px). Cán phải trùng pixel ở mọi frame – lệch 1 px là cả cây đuốc rung.
3. Hai dáng lửa chính: vẽ F1 (cao 40 px, đỉnh thẳng) và F4 (thấp nhất 37 px, đỉnh lệch trái). Pen Tool chế độ Shape, vẽ giọt lửa: gốc tròn rộng 18 px trên vạch y = 70, đỉnh nhọn chạm vạch vàng. Fill #e0442a, Stroke 1,5 px #1b1a24. Đây là lớp ngoài cùng.
4. Khung trung gian bất quy tắc: F2 cao 48 px đỉnh lệch phải 3 px, F3 cao 45 px lệch trái 2 px, F5 cao 46 px lệch phải 2 px, F6 cao 51 px gần thẳng. Đừng sắp xếp tăng dần: chính sự lộn xộn này làm lửa có hồn. Nguyên tắc duy nhất: hai frame liền nhau không được chênh quá 11 px, kể cả F6 → F1 (51 → 40).
5. Lắc đỉnh, giữ gốc: gốc lửa (đáy giọt) gần như cố định trên dây quấn; chỉ đỉnh lắc. Lửa như một sợi dây treo ngược: gốc cố định, ngọn tự do. Dùng Direct Selection Tool (A) kéo điểm neo đỉnh, không kéo điểm gốc.
6. Lớp cam: trong mỗi frame, nhân đôi giọt đỏ (Ctrl+J), Free Transform (Biến đổi tự do) thu còn 78% với điểm neo ở đáy, Fill #ff8a20, bỏ Stroke. Đỉnh lớp cam lệch khác lớp đỏ 1–2 px – các lớp lửa không cùng nhịp làm lửa sống động.
7. Lớp vàng và lõi: nhân đôi tiếp, thu còn 55% Fill #ffd040, rồi 32% Fill #fff6c8. Đặt Blend Mode lớp vàng và lõi là Linear Dodge (Add) trên nền tối để lõi phát sáng thật. Lõi luôn nằm thấp, gần gốc – phần nóng nhất của lửa.
8. Soát onion skin: kéo tạm F1 và F3 chồng lên ô F2, Opacity (Độ mờ đục) 30%, Color Overlay (Phủ chồng) hồng – xanh lá. Gốc ba frame phải trùng nhau; đỉnh nhảy trái – phải – trái là đúng.
9. Tàn lửa (secondary action): layer trên cùng, Brush Hard Round 3 px #ffd040, chấm 2 tàn lửa mỗi frame. Mỗi tàn bay lên 6–8 px so với frame trước rồi biến mất ở mép trên; vị trí x lệch trái phải. Đây là động tác phụ: nhỏ nhưng làm cảnh có không khí.
10. Quầng sáng: layer dưới lửa, Blend Mode Screen, cọ Soft Round 50 px #ffb020 Opacity 25%, chấm một lần quanh ngọn lửa. Quầng to hơn ở frame lửa cao (F2, F6) và nhỏ hơn ở F4 – ánh sáng "thở" theo lửa.
11. Timeline: WindowCửa sổ›TimelineDòng thời gian › Create Frame Animation, 6 frame, chọn hết và đặt 0,1 giây. Ở mọi frame giữ bật HANDLE – trong Photoshop, layer bật ở tất cả frame sẽ đứng yên. Xem lặp: nếu thấy "nhịp" lặp lộ rõ, đảo thứ tự hai frame giữa (ví dụ F3 ↔ F5) rồi xem lại.
12. Kiểm tra trên tường thật: thêm tạm một layer tường đá #3a3f4a có vài viên gạch, đặt sau đuốc. Lửa phải nổi rõ; nếu chìm, tăng lớp đỏ viền dày hơn 1 px.
13. Xuất và đưa vào Unity 6: ẩn nền tối, file mẫu và tường, Export As (Xuất ra (tùy chỉnh)) PNG → torch_loop.png 384 × 128 px. Unity: Sprite (2D and UI), Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 64 → Sprite Editor › Slice › Grid By Cell Size 64 × 128, Pivot (Điểm neo) Bottom › Apply. Tạo clip 6 frame, Samples 10, Loop Time. Gắn thêm Light 2D (URP 2D Renderer) loại Point, màu #ffb020, Intensity 1,2, rồi viết script nhỏ dao động Intensity ±0,15 bằng Mathf.PerlinNoise – ánh sáng trên tường sẽ nhảy theo lửa.

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

• Lửa màu phép thuật: thêm Adjustment Layer (Lớp điều chỉnh) Hue/Saturation (Sắc độ/Độ bão hòa) trên cùng, Hue +180 cho đuốc xanh ma trơi trong hầm mộ. Đổi luôn màu Light 2D.
• Đuốc tắt: làm clip 4 frame Extinguish: lửa co lại, còn khói xám bay lên (áp dụng nhịp ease-out). Gọi khi người chơi dội nước.
• Lửa trại 8 frame: 3 ngọn lửa cạnh nhau, mỗi ngọn chạy lệch pha nhau 2 frame – một sheet nhưng như ba ngọn lửa độc lập.