Dự án 9: Nhân vật pixel 32 × 32 đi bộ 4 frame

Đi bộ là chuyển động quan trọng nhất của mọi nhân vật game. Ở pixel art, chu kỳ đi bộ ngắn nhất chỉ cần 4 frame: bước – chuyển chân – bước (đổi chân) – chuyển chân. Vì mỗi frame chỉ có 32 × 32 = 1024 pixel, bạn sẽ học cách làm nhiều việc với rất ít: dời 1 pixel là đã thấy nhân vật nhún lên xuống.

Hình mẫu

Thời gian ước tính: khoảng 3 giờ: 1 giờ cho nhân vật đứng, 1 giờ cho 4 frame, 1 giờ sửa nhịp và đưa vào Unity. Nhân vật nhìn sang phải, ánh sáng từ trên – trái.

Chuẩn bị

• Canvas: 128 × 32 px, Transparent, RGB Color. Vẽ trực tiếp ở kích thước thật, phóng to 1200–1600%.
• Công cụ: Pencil (Bút chì) 1 px, Eraser (Tẩy) Mode Pencil, Paint Bucket (Thùng sơn) (Tolerance 0, bỏ Anti-alias (Khử răng cưa)), Move Tool (Công cụ Di chuyển) với phím mũi tên (dời đúng 1 px).
• Cài đặt: Image Interpolation: Nearest Neighbor (Điểm lân cận) (Photoshop›SettingsCài đặt›GeneralChung); lưới Photoshop›SettingsCài đặt›Guides, Grid & Slices Gridline Every 32 Pixels, Subdivisions 32.
• File mẫu: "Lưới đi bộ 4 × 32": viền hồng là ranh giới frame, vạch xanh lá ở y = 29 là đường nền (bàn chân đặt trên vạch này), vạch tím ở y = 3 là mốc đỉnh đầu, vạch xanh dương là trục giữa.
• Thiết bị: không cần lực nhấn; chuột chính xác hơn bút khi đặt từng pixel. Người dùng bút XP-Pen/Huion hay iPad nên tắt Pen Pressure (Lực nhấn bút) và gán một nút bút thành ⌘ Cmd+Z.

4 frame của chu kỳ đi bộ

Các bước

1. Tạo file ⌘ Cmd+N 128 × 32 px, Transparent. Kéo "Lưới đi bộ 4 × 32" vào làm layer trên cùng, Opacity (Độ mờ đục) 50%, khóa. Bật lưới ViewHiển thị›ShowHiện›GridLưới.
2. Tỉ lệ nhân vật: ở frame 1, layer Sil, tô khối xanh: đầu khoảng 13 × 12 px (từ y 3 tới y 15), thân 10 × 9 px, chân dài 6–7 px, bàn chân chạm vạch xanh lá. Đầu to gần một nửa chiều cao – tỉ lệ chibi dễ đọc ở 32 px.
3. Hai tư thế chính: vẽ bóng dáng frame 1 (bước, hai chân dạng chữ V ngược) và frame 2 (chuyển chân, hai chân gần như chụm, thân nhô lên 1 px). Hai tư thế này quyết định cả chu kỳ.
4. Viền 1 px: layer Line, Pencil màu #1b1a24, viền quanh từng khối (đầu, tóc, thân, tay, chân) – viền giữa các khối giúp đọc được chân nào trước, chân nào sau. Không để viền dày 2 px ở góc.
5. Màu phẳng: layer Flat dưới Line, Paint Bucket (All Layers) tô từng vùng. Chân và tay phía xa dùng màu tối hơn (#26274a, #2a6f97) – cách duy nhất để tách lớp trước – sau ở 32 px.
6. Mắt và khuôn mặt: mắt là 1 × 2 pixel đen gần mép phải khuôn mặt (nhân vật nhìn sang phải). Thêm 1 pixel bóng da dưới cằm. Đừng vẽ miệng – ở 32 px nó chỉ làm mặt rối.
7. Bóng một tông và sáng: layer kẹp vào Flat: bóng dọc phía phải thân và dưới tóc; sáng #7fd3ff 2–3 pixel ở vai trái. Chỉ một tông bóng – ở kích thước này, hai tông sẽ thành nhiễu.
8. Frame 3 – đổi chân: chọn vùng frame 1 bằng Rectangular Marquee (Khung chọn) (32 × 32), ⌘ Cmd+J ra layer mới, dời sang phải đúng 64 px (Move Tool, giữ ⇧ Shift và nhấn mũi tên phải 6 lần = 60 px, thêm 4 lần không giữ Shift = 64 px). Vẽ lại hai chân: chân xa (tối) ra trước, chân gần (sáng) ra sau; tay cũng đổi bên. Không lật ngang cả nhân vật – mặt sẽ quay sang trái.
9. Frame 4: nhân bản frame 2 sang ô 4 (dời 64 px) và đổi vai trò hai chân như bước 8: chân xa đứng thẳng đỡ người, chân gần co lên.
10. Nhún 1 px: ở frame 2 và 4, chọn phần thân trên (đầu, tóc, thân, tay) và dời lên đúng 1 pixel bằng phím mũi tên. Một pixel này tạo cảm giác bước đi có trọng lượng.
11. Xem thử bằng Timeline (Dòng thời gian): nhân đôi file tạm, cắt thành 4 layer frame (mỗi layer một nhân vật, dời về cùng vị trí x 0). WindowCửa sổ›TimelineDòng thời gian › Create Frame Animation, mỗi frame bật 1 layer, thời gian 0,15 giây, Looping Forever, Space để phát. Nếu nhân vật "trượt" hoặc giật, sửa trên file chính.
12. Kiểm tra số màu: trên bản sao, ImageHình ảnh›ModeChế độ (màu)›Indexed Color – ô Colors phải ≤ 16 (hình mẫu dùng 10 màu). Hủy, đóng bản sao.
13. Xuất: ẩn lưới mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG 100% → walk_sheet.png đúng 128 × 32 px.
14. Đưa vào Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 32, Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None, Apply. Sprite Editor › Slice › Grid By Cell Size 32 × 32, Pivot (Điểm neo) Bottom (điểm neo ở chân) › Slice › Apply. Kéo 4 sprite vào Scene để tạo Animation Clip, Samples 8. Với URP, thêm component Pixel Perfect Camera vào Main Camera và đặt Assets Pixels Per Unit 32 để pixel không bị méo.

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

• Đi bộ 6 frame: thêm 2 frame trung gian (chân đang nhấc, chân đang hạ) – sheet 192 × 32 px, chuyển động mềm hơn.
• Idle 2 frame: nhân vật đứng thở: frame 2 hạ vai và đầu 1 px.
• Đổi màu áo bằng bảng màu: dùng Magic Wand (Đũa thần) (bỏ Contiguous) chọn màu áo và bóng áo, đổi sang bộ đỏ – có ngay NPC mới dùng chung animation.