Dự án 8: Hào quang hồi máu 8 frame lặp liền mạch

Khác với tia va chạm hay vệt chém (phát một lần), hào quang hồi máu là hiệu ứng lặp: nó kéo dài suốt thời gian nhân vật được hồi. Thử thách của hiệu ứng lặp là đường nối: frame cuối phải dẫn trơn tru về frame đầu, không được có "cú giật" mỗi lần vòng lại. Mẹo của nghề: mỗi hạt trong hiệu ứng đi theo một chu kỳ riêng, lệch pha nhau – khi hạt A vừa biến mất ở trên đỉnh thì hạt B vừa mọc lên từ dưới chân. Ngôn ngữ hình khối cũng quan trọng: dấu cộng và màu xanh lá là ký hiệu "hồi phục" người chơi hiểu ngay.

Hình mẫu

Thời gian ước tính: khoảng 75 phút. 8 frame × 83 ms = 0,67 giây mỗi vòng, phát ở 12 fps. Không có pha báo trước hay tan biến trong vòng lặp – hai pha đó do Unity làm (mờ dần vào và ra) khi bật tắt hào quang.

Chuẩn bị

• Canvas: 512 × 256 px (lưới 4 × 2 ô 128 px), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Thứ tự đọc frame: hàng trên trái sang phải (F1–F4), rồi hàng dưới (F5–F8).
• Công cụ chính: Ellipse Tool (U), Custom Shape (dấu cộng – có sẵn trong bộ Legacy Shapes, hoặc tự dựng bằng hai hình chữ nhật), Gradient (Dải màu chuyển) Tool (G) cho cột sáng, Brush (Cọ vẽ) Tool Hard Round, Layer Style Outer Glow, guide ngang để đo độ cao.
• Thiết bị: mọi hình dựng bằng Shape, rất hợp với chuột. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) có lợi khi chấm các hạt sáng nhỏ có kích thước khác nhau theo lực nhấn (Size Jitter (Dao động kích thước) › Control: Pen Pressure (Lực nhấn bút)). Dùng chuột: bật Brush Settings (Cài đặt cọ) › Scattering (Tán xạ) và Size Jitter 60% – mỗi cú nhấp ra một hạt cỡ khác nhau.
• File mẫu: "Khung 8 frame hào quang" – đặt dưới cùng làm nền đen. Elip hồng là vòng chân (tâm y = 102 trong ô), hai đường dọc xám giới hạn vùng hạt bay, đường ngang xám trên cùng (y = 18) là nơi hạt biến mất.

Các bước

1. Tạo file và guide độ cao: FileTệp›NewTạo mới, 512 × 256 px, Transparent; Gridline Every 128 Pixels. Đặt file mẫu dưới cùng. Tạo 8 Group F1…F8. Kẻ guide ngang ở y = 102 (chân) và y = 18 (đỉnh) cho hàng trên, y = 230 và y = 146 cho hàng dưới.
2. Lên kế hoạch chu kỳ hạt: trên giấy hoặc một layer ghi chú, lập bảng 5 dấu cộng: mỗi dấu cộng có một vị trí x cố định (38, 85, 61, 95, 31 px) và một độ lệch pha (0, 0,3, 0,55, 0,8, 0,7). Ở frame thứ i, độ cao của dấu cộng = chân − (i/8 + pha, lấy phần lẻ) × 84 px. Nghe toán học nhưng đây là cách đảm bảo lặp liền mạch: sau 8 frame mọi dấu cộng quay đúng về chỗ cũ.
3. Vòng chân (F1): Ellipse Tool vẽ elip 88 × 24 px tâm (64, 102) trong ô F1. Fill none, Stroke 8 px #0f6b3a. Nhân đôi hai lần: Stroke 4,5 px #4ee88a và 2 px #d9ffe0 (Linear Dodge (Add) (Cộng sáng)). Ba lớp nét chồng nhau là ramp của một vòng sáng.
4. Cột sáng mờ: layer dưới vòng chân, Rectangular Marquee (Khung chọn) (M) chọn vùng rộng như vòng chân, từ y = 18 tới y = 102. Gradient Tool (G) kiểu Linear, từ #4ee88a Opacity (Độ mờ đục) 55% ở đáy lên trong suốt ở đỉnh. Blend Mode (Chế độ hòa trộn) Linear Dodge (Add). Cột sáng chỉ là gợi ý – rất mờ, không che nhân vật.
5. Dấu cộng mẫu: tạo dấu cộng bằng Rectangle Tool: hai thanh 6 × 18 px bo góc 3 px vuông góc nhau, gộp lại. Ba lớp: viền #0f6b3a (Stroke 3 px Outside), thân #4ee88a, lõi #d9ffe0 thu nhỏ 60%. EditChỉnh sửa›Define Custom Shape để lưu.
6. Đặt dấu cộng cho F1: theo bảng ở bước 2, đặt 5 dấu cộng ở các độ cao tính được. Dấu cộng mới mọc gần chân (pha 0–15%) và sắp biến mất gần đỉnh (pha 80–100%) phải nhỏ lại – co theo tỉ lệ để chúng "mọc ra" và "tan đi" chứ không bật tắt đột ngột.
7. Hạt sáng nhỏ: thêm 4 hạt tròn 2–4 px #0f6b3a với lõi #ffe98a, cũng chạy theo chu kỳ riêng, lượn sóng nhẹ trái phải (x lệch ±3 px). Hạt vàng xen giữa dấu cộng xanh làm hào quang ấm áp hơn.
8. Nhân sang F2–F8: nhân đôi Group F1 sang từng ô (Ctrl+J rồi dời đúng 128 px). Trong mỗi frame, dời mỗi dấu cộng và hạt lên 1/8 quãng đường (khoảng 10,5 px); cái nào vượt đỉnh y = 18 thì chuyển xuống chân và bắt đầu nhỏ lại. Không vẽ lại – chỉ dời và co.
9. Vòng chân "thở": trong các frame, co giãn elip theo nhịp: F1 100%, F2 104%, F3 106%, F4 104%, F5 100%, F6 96%, F7 94%, F8 96% (Free Transform (Biến đổi tự do) quanh tâm). Vòng phồng lên rồi thu lại đúng một lần mỗi chu kỳ – nhịp thở nhẹ nhàng của phép hồi phục.
10. Quầng sáng: layer dưới cùng mỗi frame: elip mềm (Soft Round 90 px dẹt bằng Ctrl+T) #4ee88a Opacity 40% quanh vòng chân, Linear Dodge (Add). Thêm Outer Glow nhẹ cho các dấu cộng (Size 6 px).
11. Kiểm tra đường nối lặp: WindowCửa sổ›TimelineDòng thời gian › Create Frame Animation, 8 frame mỗi frame 0,08 giây, Looping Forever. Nhấn Space và nhìn chằm chằm vào lúc F8 chuyển về F1: không dấu cộng nào được "nhảy" xa hơn 11 px. Nếu có, frame F8 đã dời sai – mỗi bước dời phải đều nhau.
12. Kiểm tra với nhân vật: đặt tạm một sprite nhân vật 64 px lên giữa ô, chân trên vòng elip. Hào quang phải "ôm" nhân vật: dấu cộng bay quanh thân, không che mặt. Phần cột sáng phía trước nhân vật có thể tách thành layer riêng để Unity vẽ trước nhân vật – nâng cao.
13. Xuất và đưa vào Unity 6: ẩn nền, xuất PNG → vfx_heal_aura.png đúng 512 × 256 px. Trong Unity 6: Sprite Mode Multiple, Sprite Editor › Grid By Cell Size 128 × 128, Pivot (Điểm neo) Custom Y 0,2 (vòng chân), Apply. Kéo 8 sprite vào Hierarchy tạo clip HealAura.anim, Samples 12, giữ Loop Time. Đặt GameObject HealAura làm con nhân vật, material Particles/Unlit Additive, Sorting Layer VFX. Script hồi máu: khi bắt đầu hồi, SetActive(true) và tween alpha 0 → 1 trong 0,2 giây; khi kết thúc, alpha 1 → 0 rồi tắt.

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

• Tách trước – sau: chia hào quang thành hai sheet: nửa sau (cột sáng, hạt phía sau thân) ở Sorting Layer dưới nhân vật, nửa trước (vòng chân phía trước, vài dấu cộng) ở trên – nhân vật như đứng trong hào quang.
• Particle System thay cho dấu cộng: giữ sheet chỉ còn vòng chân và cột sáng; dấu cộng phát bằng Particle System (texture một dấu cộng, Shape Circle, Velocity Y 1,2, Color over Lifetime mờ dần) – mật độ chỉnh được theo lượng máu hồi.
• Biến thể buff khác: đổi dấu cộng thành mũi tên lên (tăng sức mạnh, màu cam) hay khiên nhỏ (tăng phòng thủ, màu xanh lam) – cùng chu kỳ, cùng vòng chân.