Dự án 10: Đòn tấn công kiếm pixel 6 frame có vệt chém

Đòn đánh là hoạt ảnh người chơi thấy nhiều nhất trong game hành động, và nó phải nhanh mà vẫn rõ. Nếu vẽ thanh kiếm ở 6 vị trí đều nhau, mắt sẽ thấy kiếm "nhảy cóc" chứ không thấy cú chém. Họa sĩ pixel giải quyết bằng ba thứ: lấy đà (kéo kiếm ra sau trước khi chém), frame vệt chém (smear) – một hình lưỡi liềm thể hiện cả quãng đường lưỡi kiếm đi qua trong một frame – và thời lượng không đều: frame lấy đà giữ lâu, frame chém cực ngắn. Bài này dùng lại nhân vật nhà thám hiểm của dự án idle trong ô 64 × 64 rộng hơn để kiếm có chỗ vung.

Hình mẫu

Thời gian ước tính: khoảng 140 phút. Chú ý frame 4: không thấy rõ thanh kiếm ở đâu cả – chỉ có vệt chém. Đó chính là điều làm cú chém trông nhanh.

Chuẩn bị

• Canvas: 384 × 64 px (6 frame 64 × 64), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Pencil (Bút chì) Tool 1 px (⇧ Shift+B), Elliptical Marquee (Khung chọn) bỏ Anti-alias (Khử răng cưa) (vẽ vệt chém), Move Tool (Công cụ Di chuyển) với phím mũi tên, WindowCửa sổ›TimelineDòng thời gian chế độ Frame Animation để chỉnh thời lượng.
• Phóng to không mờ: Image Interpolation Nearest Neighbor (Điểm lân cận) – đặc biệt quan trọng khi bạn xoay cánh tay bằng Free Transform (Biến đổi tự do): chọn Interpolation Nearest Neighbor trên thanh Options của Free Transform. Bật ViewHiển thị›ShowHiện›Pixel GridLưới điểm ảnh.
• Thiết bị: phác dáng 6 frame bằng bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil rất nhanh và tự nhiên (vẽ ở layer phác, Opacity (Độ mờ đục) 30%). Phần pixel cuối cùng thì chuột làm tốt không kém – thanh kiếm là đường thẳng: bấm, giữ ⇧ Shift, bấm. Tắt lực nhấn khi dùng bút cho layer pixel.
• File mẫu: "Dải 6 ô 64 × 64": đường hồng y = 58 là mặt đất, đường đứng là trục nhân vật, vòng xanh là tầm với của lưỡi kiếm quanh vai.

Các bước

1. Tạo file: ⌘ Cmd+N 384 × 64 px, Transparent, lưới mỗi 64 px chia 16, đặt file mẫu. Nếu đã làm dự án idle, mở hero_idle.png và kéo frame 1 vào ô 1, đặt chân lên y = 58 – bạn tái sử dụng đầu, thân, chân.
2. Phác 6 dáng chính: layer Sketch Opacity 30%, mỗi ô một dáng que: (1) thủ thế kiếm chéo lên trước; (2) lấy đà – thân ngả ra sau 2 px, kiếm vòng ra sau lưng; (3) đỉnh – tay giơ cao, kiếm thẳng đứng; (4) chém – thân lao về trước 3 px, tay duỗi; (5) theo đà – kiếm chĩa xuống đất phía trước; (6) thu về gần như frame 1.
3. Kiểm tra bóng dáng: tô đen tạm 6 dáng và xem ở 100%. Mỗi frame phải đọc được hướng kiếm chỉ qua bóng – đặc biệt frame 2 và 3 phải khác nhau rõ, đó là lúc người chơi "đọc" đòn đánh.
4. Thân và chân: chân đứng rộng, cố định trong frame 1–3; frame 4–5 chân trước bước lên 2 px để có lực. Thân nghiêng theo kiếm: dời group thân trên −2 px ở frame 2, +3 px ở frame 4–5, +1 px ở frame 6.
5. Cánh tay cầm kiếm: cánh tay là một đoạn thẳng dày 3 px từ vai tới bàn tay. Mỗi frame vẽ lại cánh tay theo vị trí tay trên bản phác – đừng xoay layer tay bằng Free Transform vì đường chéo sẽ bị răng cưa xấu.
6. Thanh kiếm: lưỡi dài 18 px, dày 2 px: hàng sáng #dcdde8 ở phía trên, hàng tối #9ea0b8 ở phía dưới; chắn tay vuông góc 7 px #ffd860, chuôi #c88a2a. Góc kiếm đẹp nhất là các góc cho đường pixel đều: 0°, 27° (2:1), 45° (1:1), 63° (1:2), 90°.
7. Viền: viền 1 px #1b1a24 quanh nhân vật và kiếm. Ở frame 3 – kiếm thẳng đứng trên đầu – kiếm và tóc không được dính viền vào nhau; chừa 1 px trống hoặc dùng viền chung.
8. Màu và đổ khối: tô 6 frame như dự án idle: tông nền, tối dưới – phải, sáng trên – trái. Dùng chung đúng một bảng màu cho cả 6 frame – mở Swatches (Bảng mẫu màu) nhóm của nhân vật và chỉ chọn từ đó.
9. Frame 4 – vệt chém (smear): layer Smear nằm dưới nhân vật. Elliptical Marquee bỏ Anti-alias vẽ hình tròn tâm ở vai, bán kính bằng tầm kiếm (vòng xanh của file mẫu); trừ đi một hình tròn nhỏ hơn lệch về phía sau (⌥ Option khi kéo) để còn hình lưỡi liềm. Chỉ giữ cung từ vị trí kiếm ở frame 3 tới frame 4. Tô #9fe8ff, mép ngoài 1–2 px #ffffff. Thanh kiếm ở frame này chỉ vẽ phần chuôi – lưỡi "tan" vào vệt.
10. Frame 5 – vệt mờ dần: vệt ngắn và mỏng hơn, chỉ còn mép ngoài dài nửa cung, tách thành các đoạn rời. Kiếm hiện rõ trở lại ở cuối cung. Vệt chém không có viền – nó là chuyển động, không phải vật thể.
11. Thời lượng frame: WindowCửa sổ›TimelineDòng thời gian › Frame Animation: frame 1 = 0,1 giây, frame 2 (lấy đà) = 0,15, frame 3 = 0,05, frame 4 (chém) = 0,05, frame 5 = 0,1, frame 6 = 0,15. Phát thử: cú chém phải "bụp" một cái. Nếu thấy lờ đờ, rút ngắn frame 3–4; nếu không kịp đọc, kéo dài frame 2.
12. Kiểm tra và xuất: xem cả dải ở 100% trên nền xám tạm. Đếm màu bằng bản sao Indexed Color (≤ 20). Ẩn phác, nền và mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG 100% → hero_attack.png đúng 384 × 64 px.
13. Unity 6 – cắt và clip: Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 16 (giống idle), Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None; Slice Grid By Cell Size 64 × 64, Pivot (Điểm neo) Custom X 0,47 Y 0,094 (chân ở x ≈ 30, y = 58 – khớp với pivot của idle để đổi clip không bị giật). Tạo clip Attack.anim, Samples 12, bỏ Loop Time; trong cửa sổ Animation kéo các keyframe cho thời lượng không đều như bước 11.
14. Unity 6 – hitbox đúng frame: thêm con Hitbox có Box Collider 2D (Is Trigger) phía trước nhân vật, tắt sẵn. Trong clip Attack, ghi keyframe bật collider ở frame 4 và tắt ở frame 6. Thêm Animation Event ở frame 6 gọi hàm EndAttack() để Animator quay về Idle. Như vậy sát thương chỉ xảy ra đúng lúc vệt chém xuất hiện.

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

• Combo 2 đòn: thêm 4 frame chém ngược từ dưới lên, bắt đầu từ frame 5 của đòn thứ nhất – người chơi bấm liên tiếp sẽ ra chuỗi chém.
• Vệt chém nguyên tố: đổi màu vệt sang cam – vàng (lửa) hoặc tím (bóng tối) bằng Hue/Saturation (Sắc độ/Độ bão hòa) kẹp vào layer Smear; vẫn giữ mép ngoài sáng nhất.
• Hiệu ứng trúng đòn: vẽ một tia sáng hình chữ thập 16 × 16 px 3 frame đặt ở điểm va chạm, bật bằng Animation Event ở frame 4.