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.
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.
Tải về rồi mở bằng Photoshop: (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
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, , .
- 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àu | Mã hex | Dùng cho |
|---|---|---|
#ffffff | Mép cắt trắng – cạnh ngoài vệt | |
#d6f6ff | Xanh băng – thân sáng | |
#4fd1ff | Cyan bão hòa – màu chính | |
#1b4b9a | Xanh tối – mép trong, đuôi vệt | |
#a46bff | Tia tím phụ (tùy chọn cho đòn phép) | |
#000000 | Nền đen tạm |
Các bước
- Tạo file và cung tham chiếu: , 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.
- 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. - 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".
- 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. - Blend Mode (Chế độ hòa trộn): đặt light và edge ở Linear Dodge (Add) (Cộng sáng). Với mid, thêm : 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. - Quầng sáng: nhân đôi mid, rasterize (chuột phải › Rasterize (Chuyển thành điểm ảnh) Layer), 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í.
- 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.
- 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.
- 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.
- 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. - Làm vệt "chạy": chọn layer quầng sáng của F2 và F3, 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.
- 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.
- Xuất và đưa vào Unity 6: ẩn nền và guide, 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 clipSlash.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.
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#a46bffmả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.05ftrong 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
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.
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.
Đặ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.