Dự án 1: Tia va chạm (hit spark) 4 frame

Không có gì làm game hành động "đã tay" bằng một tia sáng bật ra đúng lúc kiếm chạm quái. Tia va chạm (hit spark) chỉ hiện chừng một phần sáu giây, nhưng não người chơi đọc nó là "trúng rồi!". Đây là dự án mở màn của chặng VFX vì nó gói gọn ba nguyên lý bạn sẽ dùng trong mọi hiệu ứng: báo trước (anticipation – một chấm sáng nhỏ), va chạm (impact – frame to và sáng nhất) và tan biến (dissipation – tia tách ra rồi biến thành hạt). Bạn cũng làm quen cách vẽ VFX chuẩn nghề: vẽ trên nền đen, dùng Blend Mode (Chế độ hòa trộn) Linear Dodge (Add) (Cộng sáng) và ramp màu lõi trắng → vàng → cam → cam tối.

Hình mẫu

Thời gian ước tính: khoảng 45 phút. Hiệu ứng phát ở 24 fps: F1, F3, F4 mỗi frame 42 ms, riêng F2 giữ 83 ms (2 nhịp) – frame va chạm được giữ lâu hơn để mắt kịp "chụp" lại. Tổng cộng chưa tới 0,21 giây.

Chuẩn bị

• Canvas (khung vẽ): 512 × 128 px (4 frame × 128 px), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Cạnh 512 và 128 đều là lũy thừa của 2 nên Unity nén texture tối ưu.
• Công cụ chính: Polygon Tool (U) với Star Ratio để dựng ngôi sao nhiều tia, Pen Tool (Bút tạo đường) (P) cho tia nhọn, Brush (Cọ vẽ) Tool (B) cọ Soft Round cho quầng sáng, Clipping Mask (Mặt nạ cắt) (⌘ Cmd+⌥ Option+G), Free Transform (Biến đổi tự do) (⌘ Cmd+T), FilterBộ lọc›Blur›Gaussian Blur.
• Thiết bị: các khối tia dựng bằng Shape nên chuột làm tốt hoàn toàn. Bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (qua Sidecar hay Astropad) giúp vẽ tia lửa thon đầu chỉ bằng một nét: 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), nhấn mạnh ở gốc rồi nhấc dần. Dùng chuột: vẽ đường bằng Pen Tool rồi chuột phải › Stroke Path, tích Simulate Pressure – Photoshop tự làm thon hai đầu.
• File mẫu: "Khung 4 frame nền đen" ở cuối bài – mở bằng FileTệp›Place Embedded, đặt dưới cùng làm nền đen, khóa layer. Vòng tròn đứt nét trong mỗi ô là giới hạn tia của frame đó; dải màu dưới ô cho biết pha: xanh = báo trước, hồng = va chạm, xám = tan biến.

Các bước

1. Tạo file và nền đen: FileTệp›NewTạo mới (⌘ Cmd+N), 512 × 128 px, Transparent. Photoshop›SettingsCài đặt›Guides, Grid & Slices: Gridline Every 128 Pixels, Subdivisions 2, bật ViewHiển thị›ShowHiện›GridLưới. Đặt file mẫu nền đen ở dưới cùng, đặt tên BG_black và khóa. Mọi hiệu ứng phát sáng phải được đánh giá trên nền tối – trên nền trắng bạn sẽ chọn sai màu.
2. Tạo 4 Group cho 4 frame: ⌘ Cmd+G bốn lần, đặt tên F1, F2, F3, F4. Mỗi frame chỉ được vẽ trong ô 128 × 128 của nó và có cùng một tâm (64, 64) – dấu cộng xám trong file mẫu. Tâm lệch giữa các frame sẽ làm tia "rung" khi phát.
3. Vẽ frame va chạm trước (F2): luôn bắt đầu từ frame mạnh nhất rồi suy ra các frame khác. Chọn Polygon Tool (U), trên thanh Options đặt Number of sides 8, bấm biểu tượng bánh răng và đặt Star Ratio 20%. Giữ ⇧ Shift kéo từ tâm ô F2 ra tới vòng đứt nét hồng (bán kính khoảng 58 px). Fill #c2410c. Đây là hình khối (shape language) của tia: nhọn, tỏa đều, nói rõ "lực đập".
4. Làm tia không đều: tia lửa thật không bao giờ dài bằng nhau. Dùng Direct Selection Tool (A) chọn từng đỉnh tia và kéo vài đỉnh vào trong 10–20%. Xoay cả ngôi sao khoảng −10° (⌘ Cmd+T) để không có tia nào nằm ngang hay dọc tuyệt đối – hình chéo trông năng động hơn.
5. Thêm 6 tia rời: Pen Tool (P) ở chế độ Shape vẽ các tam giác dài mảnh từ bán kính 38 px ra 60 px, xen giữa các tia chính. Fill cùng #c2410c. Gom chúng cùng ngôi sao vào layer F2_dark.
6. Lớp cam bão hòa: nhân đôi layer (⌘ Cmd+J), đặt tên F2_mid, ⌘ Cmd+T thu nhỏ còn 78% quanh tâm (giữ ⌥ Option khi kéo góc). Đổi Fill sang #ffb020. Mép cam tối lộ ra ở ngoài chính là "đuôi" nguội của tia lửa.
7. Lớp vàng sáng và lõi trắng: nhân đôi tiếp, thu còn 55%, Fill #fff3b0. Cuối cùng vẽ một hình tròn 16 px #ffffff ở tâm (Ellipse Tool, giữ ⇧ Shift+⌥ Option). Đặt Blend Mode của layer vàng và layer trắng là Linear Dodge (Add) trong bảng Layers. Bạn vừa tạo một ramp màu: càng vào tâm càng sáng và càng ít bão hòa – đó là cách mắt cảm nhận "nóng".
8. Quầng sáng (glow): layer mới ⌘ Cmd+⇧ Shift+N tên F2_glow đặt dưới các lớp tia, Blend Mode Linear Dodge (Add), Opacity (Độ mờ đục) 70%. Cọ Soft Round 110 px, màu #ffb020, chấm một lần ở tâm. Hoặc nhân đôi F2_mid, FilterBộ lọc›Blur›Gaussian Blur Radius 12 px. Glow phải nằm gọn trong ô – phần tràn sang ô kế bên sẽ bị Unity cắt mất.
9. F1 – báo trước: trong Group F1 vẽ một ngôi sao 4 tia nhỏ (Number of sides 4, Star Ratio 15%, bán kính khoảng 22 px) với ba lớp màu y như F2 và lõi trắng 8 px. Frame này nhỏ nhưng sáng: nó báo cho mắt biết "sắp có gì đó" ngay tại điểm va chạm.
10. F3 – tách tia: nhân đôi Group F2 (⌘ Cmd+J), đổi tên F3 và dời sang ô thứ ba đúng 256 px (Move Tool (Công cụ Di chuyển) V + ⇧ Shift và mũi tên, hoặc gõ X trong WindowCửa sổ›PropertiesThuộc tính). Xóa ngôi sao lớn, chỉ giữ một ngôi sao nhỏ 6 tia ở tâm. Thay 6 tia rời bằng 8 tia mảnh hơn, đẩy xa tâm hơn (bán kính 30–62 px) – tia bay ra ngoài và mảnh dần. Giảm Opacity glow còn 55%.
11. F4 – tan thành hạt: trong ô cuối, Brush Hard Round 5 px chấm 8–9 hạt #c2410c rải trên vòng bán kính 40–50 px, rồi chấm hạt #ffb020 2 px đè lên tâm mỗi hạt. Thêm một vòng tròn mảnh (Ellipse Tool, Fill none, Stroke 1 px #c2410c, Opacity 50%) – dư âm của sóng va chạm. Không còn lõi trắng: năng lượng đã hết.
12. Xem thử nhịp bằng Timeline (Dòng thời gian): WindowCửa sổ›TimelineDòng thời gian › Create Frame Animation. Tạo 4 frame, ở mỗi frame chỉ bật Group tương ứng (và BG_black). Bấm số giây dưới thumbnail: F1, F3, F4 chọn 0,04; F2 chọn Other… gõ 0,08. Nhấn Space để phát lặp. Nếu tia trông "giật" thì tâm các frame chưa trùng; nếu trông "nhạt" thì F2 chưa đủ to so với F1.
13. Kiểm tra trên nền thật: thêm tạm một layer xám #3a3f4a và một layer chụp màn hình game của bạn dưới các Group. Tia phải nổi rõ trên cả nền tối lẫn nền trung bình. Nếu tia "chìm" trên nền sáng, tăng độ dày lớp cam tối – viền tối tạo tương phản độ sáng (value contrast).
14. Xuất và đưa vào Unity 6: ẩn BG_black, lưới và nền thử; dời 4 Group về đúng 4 ô; FileTệp›Export›Export AsXuất ra (tùy chỉnh) (⌥ Option+⇧ Shift+⌘ Cmd+W), PNG, Transparency (Độ trong suốt) bật → vfx_hitspark.png đúng 512 × 128 px. Trong Unity 6: kéo vào Project, giữ Texture Type Default, tích Alpha Is Transparency, Apply. Tạo Material: Shader Universal Render Pipeline/Particles/Unlit, Surface Type Transparent, Blending Mode (Chế độ hòa trộn) Additive, kéo texture vào Base Map. Tạo Particle System: tắt Looping, Duration 0,25, Start Lifetime 0,21, Start Speed 0, Emission › Rate over Time 0, Bursts: Count 1; tắt Shape; bật Texture Sheet Animation: Mode Grid, Tiles X 4, Y 1, Animation Whole Sheet; Renderer › Material là material vừa tạo, Sorting Layer là VFX. Main › Stop Action Destroy để hiệu ứng tự xóa sau khi phát.

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

• Biến thể màu theo loại đòn: thêm Adjustment Layer (Lớp điều chỉnh) Hue/Saturation (Sắc độ/Độ bão hòa) trên cùng, kéo Hue −160 để có tia xanh băng cho đòn phép, +180 cho tia tím. Xuất thành ba sheet và để script chọn ngẫu nhiên.
• Tia lửa văng: thêm Particle System con phát 6–10 hạt bằng chính frame F4 làm texture, Renderer › Render Mode Stretched Billboard, Speed Scale 0,05 – hạt kéo thành vệt theo hướng bay.
• Chớp trắng trên quái: trong Unity cho Sprite Renderer của quái đổi sang màu trắng 1–2 frame khi trúng đòn (một material Unlit trắng). Kết hợp với hit spark, cảm giác đòn đánh nặng gấp đôi.