Lộ trình › Hiệu ứng VFX cho game › Bài 164/218

Dự án 6: Vệt chém kiếm (slash trail) 5 frame

Vẽ vệt chém hình lưỡi liềm theo đường kiếm – 5 frame 256 × 256 px trên sheet 1280 × 256 px – luyện Pen Tool cho hình cong thon, ramp xanh băng có mép cắt trắng, nhịp đòn đánh nhanh, rồi gắn vào đòn tấn công của nhân vật bằng Animation Event trong Unity 6.

Nâng cao 70 phút ★★★ Vừa Hướng dẫn cho Windows · đổi sang macOS

Photoshop hiển thị tiếng Anh. Từ có gạch chân chấm là thuật ngữ trên giao diện — chạm để xem nghĩa, hoặc tra Từ điển Anh–Việt.

File mẫu để luyện tập

Tải về rồi mở bằng Photoshop: FileTệp›OpenMở (Ctrl+O).

Một nhát chém kiếm chỉ kéo dài chừng 0,3 giây – nhanh tới mức mắt không thấy lưỡi kiếm. Thứ người chơi thấy là vệt chém: một dải sáng hình lưỡi liềm vẽ lại quỹ đạo của lưỡi kiếm. Vệt chém đẹp có hình khối rất rõ: dày nhất ở cuối đường chém (nơi lưỡi kiếm vừa đi qua, năng lượng mạnh nhất) và thon nhọn ở đầu (nơi đã nguội). Mép ngoài sắc và trắng như lưỡi dao, mép trong mềm và tối dần. Dự án này dạy bạn làm chủ Pen Tool (Bút tạo đường) cho hình cong – kỹ năng dùng lại cho mọi vệt sáng, đuôi sao chổi, sóng năng lượng.

Hình mẫu

Năm frame vệt chém xanh băng: F1 tia mảnh báo trước ở đầu cung, F2 vệt lưỡi liềm dày dần, F3 vệt dài và dày nhất có tia lửa ở đuôi, F4 vệt mỏng dần và vỡ thành mảnh ở đầu, F5 chỉ còn vệt mảnh và hạt
Năm frame vệt chém xanh băng: F1 tia mảnh báo trước ở đầu cung, F2 vệt lưỡi liềm dày dần, F3 vệt dài và dày nhất có tia lửa ở đuôi, F4 vệt mỏng dần và vỡ thành mảnh ở đầu, F5 chỉ còn vệt mảnh và hạt

Thời gian ước tính: khoảng 70 phút. Nhịp 33 – 50 – 67 – 67 – 83 ms (tổng 300 ms) – khớp với một đòn chém trung bình. F2 – F3 là pha va chạm, F4 – F5 là tan biến.

Chuẩn bị

  • Canvas: 1280 × 256 px (5 frame × 256 px), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Muốn cạnh lũy thừa của 2, có thể xếp 5 frame trên lưới 4 × 2 của canvas 1024 × 512 và để trống 3 ô.
  • Công cụ chính: Ellipse Tool (U) để dựng cung tham chiếu, Pen Tool (P) cho hình lưỡi liềm, Path Selection (A), Layer Style Outer Glow và Inner Glow, FilterBộ lọc›Blur›Motion Blur, EditChỉnh sửa›TransformBiến đổi›WarpUốn cong.
  • Thiết bị: lưỡi liềm dựng bằng Pen Tool – chính xác nhất với chuột. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) cho phép một cách nhanh hơn: một nét cọ cong thật dứt khoát với Size Jitter (Dao động kích thước) › Control: Pen Pressure (Lực nhấn bút), bắt đầu nhẹ rồi nhấn mạnh dần về cuối – lực tay chính là độ dày vệt chém. Người dùng chuột vẽ đường cong bằng Pen rồi Stroke Path với Simulate Pressure cho kết quả tương tự.
  • File mẫu: "Khung 5 frame vệt chém" – đặt dưới cùng làm nền đen. Vòng đứt nét xám là cung chém (tâm là chấm vàng – vị trí cổ tay nhân vật); hai đường vàng đứt nét và cung màu cho biết vệt chém bắt đầu – kết thúc ở góc nào trong từng frame.
MàuMã hexDùng cho
#ffffffMép cắt trắng – cạnh ngoài vệt
#d6f6ffXanh băng – thân sáng
#4fd1ffCyan bão hòa – màu chính
#1b4b9aXanh tối – mép trong, đuôi vệt
#a46bffTia tím phụ (tùy chọn cho đòn phép)
#000000Nền đen tạm

Các bước

Sáu giai đoạn trên frame F3: phác cung chém, lưỡi liềm xanh tối bằng Pen Tool, lớp cyan, mép cắt trắng Linear Dodge (Add), quầng sáng Outer Glow và dải 5 frame
Sáu giai đoạn trên frame F3: phác cung chém, lưỡi liềm xanh tối bằng Pen Tool, lớp cyan, mép cắt trắng Linear Dodge (Add), quầng sáng Outer Glow và dải 5 frame
  1. Tạo file và cung tham chiếu: FileTệp›NewTạo mới, 1280 × 256 px, Transparent; Gridline Every 256 Pixels. Đặt file mẫu dưới cùng. Layer Guide_arc: Ellipse Tool vẽ đường tròn bán kính 118 px quanh chấm vàng của mỗi ô (Fill none, Stroke 1 px xám). Mọi vệt chém sẽ bám theo cung này – vệt chém là một phần của đường tròn quanh cổ tay.
  2. Lưỡi liềm F3 – mép ngoài: bắt đầu từ frame dài nhất. Pen Tool chế độ Shape, Fill #1b4b9a. Đặt điểm đầu ở góc 188° của cung (bên trái), kéo tay nắm dọc theo cung, điểm thứ hai ở đỉnh cung (270°), điểm cuối ở góc 352° (bên phải). Mép ngoài phải bám sát vòng tham chiếu.
  3. Lưỡi liềm F3 – mép trong: từ điểm cuối, quay ngược lại với đường cong lõm hơn: tại đỉnh cung, mép trong cách mép ngoài chừng 40 px; gần điểm cuối (bên phải) khoảng cách lớn nhất – 50 px; về phía điểm đầu khoảng cách thu về 0. Khép path ở điểm đầu. Kết quả: lưỡi liềm thon nhọn ở đầu, phình dày ở cuối – đó là hình khối "lực đang tới".
  4. Các lớp màu trong lưỡi liềm: nhân đôi shape (Ctrl+J) ba lần. Với mỗi bản, dùng Direct Selection (A) kéo mép trong lại gần mép ngoài: bản mid còn 74% độ dày, Fill #4fd1ff; bản light còn 42%, Fill #d6f6ff; bản edge chỉ 16%, Fill #ffffff. Mép ngoài của cả 4 lớp trùng nhau – vệt sáng nhất ở cạnh ngoài như lưỡi dao.
  5. Blend Mode (Chế độ hòa trộn): đặt light và edge ở Linear Dodge (Add) (Cộng sáng). Với mid, thêm LayerLớp›Layer Style›Inner Glow: Blend Mode Linear Dodge (Add), màu #d6f6ff, Source Edge, Size 6 px – mép vệt chém phát sáng nhẹ vào trong.
  6. Quầng sáng: nhân đôi mid, rasterize (chuột phải › Rasterize (Chuyển thành điểm ảnh) Layer), FilterBộ lọc›Blur›Gaussian Blur 14 px, đặt dưới các lớp, Linear Dodge (Add), Opacity (Độ mờ đục) 60%. Thêm 3 sao bốn cánh nhỏ (Custom Shape từ dự án 3) ở cuối vệt – tia lửa khi lưỡi kiếm xé không khí.
  7. F2 – vệt đang mọc: nhân đôi Group F3 sang ô 2 (dời −256 px). Dùng Direct Selection kéo điểm đầu lưỡi liềm từ 188° về 200° và điểm cuối từ 352° về 318°: vệt ngắn hơn, đầu nhọn hơn. Giảm độ dày còn 75%. F2 đến trước F3 nhưng đã rất sáng.
  8. F1 – tia báo trước: trong ô 1 chỉ vẽ một lưỡi liềm thật mảnh (dày 6 px) từ 196° tới 236° và một sao bốn cánh nhỏ ở đầu – ánh lóe trên mũi kiếm ngay khi bắt đầu vung. Không có quầng sáng lớn.
  9. F4 – vệt mỏng và vỡ: nhân đôi F3 sang ô 4. Kéo điểm đầu lùi về 232°, giảm độ dày còn 55%, Opacity các lớp 80–90%. Phần đầu vệt đã "nguội": dùng Polygonal Lasso (Thòng lọng đa giác) (L) cắt hai mảnh cung nhỏ ở khoảng 196°–228° ra layer riêng (Ctrl+Shift+J) và dời chúng ra ngoài 4 px – vệt bắt đầu vỡ vụn.
  10. F5 – tàn dư: trong ô cuối, chỉ còn một vệt mảnh xanh tối từ 286° đến 358°, Opacity 60%, và 7 hạt tròn nhỏ (Brush (Cọ vẽ) Hard Round 5 px #1b4b9a, lõi 2 px #4fd1ff) rải theo cung – mạt sáng bay lại phía sau lưỡi kiếm.
  11. Làm vệt "chạy": chọn layer quầng sáng của F2 và F3, FilterBộ lọc›Blur›Motion Blur Angle theo hướng tiếp tuyến cung ở đầu vệt (khoảng 30°), Distance 12 px. Một chút nhòe chuyển động ở phần đầu khiến vệt như đang lướt qua.
  12. Kiểm tra nhịp và hình khối: Timeline (Dòng thời gian) › Create Frame Animation, 0,03 – 0,05 – 0,07 – 0,07 – 0,08 giây. Đặt tạm một sprite nhân vật cầm kiếm ở tâm cổ tay. Vệt phải đi cùng hướng vung kiếm; nếu lưỡi kiếm vung từ trái sang phải mà phần dày của vệt lại ở bên trái, bạn đã vẽ ngược hình khối.
  13. Xuất và đưa vào Unity 6: ẩn nền và guide, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG → vfx_slash.png đúng 1280 × 256 px. Trong Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Sprite Editor › Grid By Cell Size 256 × 256, Pivot (Điểm neo) Custom đặt tại tâm cổ tay (X 0,5; Y 0,24), Apply. Kéo 5 sprite vào Hierarchy để tạo clip Slash.anim, Samples 24 (giãn keyframe theo nhịp), bỏ Loop Time. Đặt GameObject Slash làm con của nhân vật, Sprite Renderer dùng material Particles/Unlit Additive và Sorting Layer VFX. Trong clip tấn công của nhân vật, thêm Animation Event ở frame vung kiếm để gọi hàm bật Slash và phát clip.
Mẹo: Cần vệt chém theo hướng khác (chém ngược, chém xuống)? Không phải vẽ lại: trong Unity lật Flip X / Flip Y của Sprite Renderer hoặc xoay Transform Z. Một sheet dùng cho cả combo 3 đòn.
Lỗi hay gặp: Vẽ vệt chém dày đều như một chiếc nhẫn. Không có đầu nhọn – đuôi dày, mắt không biết kiếm đang đi hướng nào. Luôn để độ dày tăng dần theo hướng chuyển động.

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

  • Vệt chém nguyên tố: đổi ramp sang lửa (#ffffff – #ffe9a8 – #ff6a2a – #6b0f1a) cho kiếm lửa, hoặc thêm lớp tia tím #a46bff mảnh dọc mép trong cho kiếm phép.
  • Trail Renderer: kết hợp sprite vệt chém với một Trail Renderer gắn vào mũi kiếm (Time 0,1, Width Curve thon dần) – vệt sprite cho hình đẹp, Trail cho chuyển động bám sát tay.
  • Hit stop: khi vệt chém trúng quái, script đặt Time.timeScale = 0.05f trong 0,05 giây rồi trả về 1 – đòn chém có cảm giác "cắn" vào mục tiêu.

Mẹo & trick học nhanh

Dựng cung tham chiếu trước

Một đường tròn quanh cổ tay là quỹ đạo của lưỡi kiếm. Mọi frame bám theo cùng đường tròn này nên vệt chém liền mạch khi phát, không bị "nhảy" bán kính.

Mép ngoài trùng nhau

Bốn lớp màu chung một mép ngoài, chỉ khác độ dày phía trong. Kết quả: cạnh ngoài trắng sắc như lưỡi dao, phía trong tối và mềm dần.

Pivot tại cổ tay

Đặt Pivot của sprite đúng vị trí chấm vàng (cổ tay). Khi gắn vệt chém làm con của bàn tay nhân vật, nó luôn xuất phát đúng chỗ, kể cả khi lật hay xoay.

Kiểm tra nhanh

1 Hình khối đúng của một vệt chém là gì?
2 Vì sao bốn lớp màu của lưỡi liềm có chung mép ngoài?
3 Cách nào để vệt chém xuất hiện đúng lúc nhân vật vung kiếm trong Unity 6?
4 Cần vệt chém theo hướng ngược lại, cách nhanh nhất là?

Bài tập: Sheet vệt chém 5 frame của bạn

Làm trong Photoshop rồi nộp file. Máy chấm kiểm tra các yêu cầu kỹ thuật và chỉ cách sửa từng lỗi; giáo viên chấm thêm phần thẩm mỹ.

Làm bài tập