Dự án 13: Sprite chạy 6 frame

Đây là lúc nhân vật chuyển động. Một vòng chạy (run cycle) lặp đi lặp lại chỉ cần 6 hình, mỗi hình gọi là một frame. Xếp 6 frame thành một dải ngang ta có sprite sheet – file mà engine game cắt ra và phát liên tục. Bí quyết không phải vẽ đẹp từng frame, mà là 6 frame ăn khớp với nhau.

Hình mẫu

Thời gian ước tính: khoảng 4 giờ, chia 3 buổi: tư thế + khung xương, tô màu, ghép sheet và thử trong engine.

Chuẩn bị

• File vẽ: 256 × 256 px cho mỗi frame (gấp 4 lần 64 px), mỗi frame là một Group layer riêng. Cuối cùng thu về 64 × 64 px.
• Nhân vật: dùng nhân vật đơn giản (đầu tròn, thân hình thang, tay chân dạng ống) – chi tiết nhỏ sẽ biến mất ở 64 px.
• File mẫu: "Lưới sprite sheet 6 × 64 px" ở cuối bài: viền hồng là ranh giới frame, vạch xanh lá là đường nền (baseline) ở y = 58, vạch tím là mốc đỉnh đầu.
• Bảng: WindowCửa sổ›TimelineDòng thời gian (dòng thời gian) để xem thử chuyển động.

6 tư thế của vòng chạy

Các bước

1. Tạo file Ctrl+N 256 × 256 px, Background Contents: Transparent. Kẻ guide ngang ở y = 232 px (đường nền = 58 × 4) và y = 40 px (đỉnh đầu), guide dọc giữa ở 128 px.
2. Tư thế chính trước: layer F1 Sketch: vẽ khung xương que (đầu tròn, cột sống, tay chân là các đoạn thẳng có khớp gối, khuỷu) cho frame 1 – Contact. Layer F3 Sketch: frame 3 – Passing. Hai tư thế này quyết định cả vòng chạy; nghiêng người về trước khoảng 10°.
3. Frame trung gian: hạ Opacity (Độ mờ đục) F1 và F3 xuống 25% – đây là onion skin (giấy hành: nhìn xuyên frame trước/sau). Tạo F2 Sketch nằm giữa: thân thấp hơn F1 khoảng 8 px, chân trước gập. Frame 4–6: nhân đôi F1–F3 (Ctrl+J) rồi vẽ lại để đổi bên tay chân.
4. Xem thử sớm: mở WindowCửa sổ›TimelineDòng thời gian, bấm Create Frame Animation. Ở mỗi frame trong Timeline (Dòng thời gian) chỉ bật con mắt layer tương ứng (F1 ở frame 1, F2 ở frame 2…). Đặt thời gian mỗi frame 0,08 giây (khoảng 12 fps), Looping: Forever, bấm Play (Space). Sửa khung xương đến khi chuyển động mượt rồi mới tô.
5. Nét và màu phẳng: với mỗi frame, tạo Group F1…F6 (Ctrl+G) chứa layer Line và Flat. Vẽ nét 6 px (sẽ còn 1,5 px sau khi thu nhỏ). Tô flat bằng Paint Bucket (Thùng sơn) (All Layers). Chân và tay phía xa dùng màu tối hơn (#26274a, da #c98a6a) để không lẫn với chân gần.
6. Giữ nhất quán: tô xong F1, nhân đôi cả Group làm nền cho F2 rồi sửa phần khác – đầu, tóc, khăn thường chỉ cần dời xuống/lên theo độ nhún của thân. Luôn kiểm tra bàn chân chạm đúng guide đường nền.
7. Đổ bóng: trong mỗi Group, layer Shadow Clipping Mask (Mặt nạ cắt) vào Flat, màu #1f6fb8 cho áo, #e8a987 cho da, blend mode Normal. Chỉ 1 tông bóng – ở 64 px nhiều tông sẽ thành nhòe. Thêm rim #a9d8ff mảnh ở lưng.
8. Khăn quàng: đuôi khăn bay ra sau và nhấp nhô ngược nhịp với thân: khi thân hạ (F2, F5) đuôi khăn nâng lên. Chi tiết "theo sau" này (follow-through) làm chuyển động sống động.
9. Onion skin bằng Timeline: chuyển Timeline sang chế độ video: bấm biểu tượng Convert to video timeline ở góc dưới – trái bảng Timeline, mở menu bảng (≡) › Enable Onion Skins. Bạn sẽ thấy frame trước (đỏ) và sau (xanh) mờ mờ – soát lại bước chân và độ nhún.
10. Ghép sprite sheet: ImageHình ảnh›Canvas SizeKích thước khung vẽ (Alt+Ctrl+C): Width 1536 px, Anchor ô giữa bên trái. Chọn Group F2, Ctrl+T, bấm biểu tượng tam giác Use relative positioning for reference point trên thanh Options, nhập X: 256 px, Enter. F3 dời 512 px, F4 768 px, F5 1024 px, F6 1280 px.
11. Thu về 64 px: FileTệp›Save AsLưu thành bản khác một bản sao (Shift+Ctrl+S) tên run_sheet_4x.psd. Trên bản chính: ImageHình ảnh›Image SizeKích thước ảnh (Alt+Ctrl+I), Width 384 px, Height 64 px, Resample (Lấy mẫu lại) Bicubic (Nội suy mượt) Sharper (reduction). Nếu bạn vẽ pixel art thì chọn Nearest Neighbor (Điểm lân cận) (hard edges).
12. Kiểm tra bằng lưới mẫu: mở file "Lưới sprite sheet 6 × 64 px" (Ctrl+O), kéo nó vào sheet làm layer trên cùng Opacity 50%. Mỗi nhân vật phải nằm gọn trong khung hồng, bàn chân chạm vạch xanh lá. Ẩn layer lưới trước khi xuất.
13. Xuất PNG trong suốt: FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG, Transparency (Độ trong suốt) bật, Scale 100% → run_sheet.png đúng 384 × 64 px.
14. Đưa vào Unity 6: kéo PNG vào Assets. Trong Inspector: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 64, Filter Mode (Chế độ lọc ảnh) Bilinear (ảnh vẽ tay; pixel art thì chọn Point (no filter)), Compression None, bấm Apply. Mở Sprite Editor › Slice › Type Grid By Cell Size 64 × 64 › Slice › Apply. Chọn 6 sprite con, kéo thả vào Scene – Unity tự tạo Animation Clip; chỉnh Sample Rate 12 trong cửa sổ Animation.

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

• Idle 4 frame: vòng thở đứng yên: thân nhún 2 px, khăn lay nhẹ.
• Nhảy 3 frame: chuẩn bị (ngồi xuống), bật lên (duỗi), rơi (co chân).
• Sprite 8 frame: thêm 2 frame "up" (bay lên khỏi mặt đất) cho vòng chạy mượt hơn – sheet 512 × 64 px, cũng là lũy thừa của 2.