Dự án 9: Nhân vật pixel 48 × 48 đứng thở (idle) 4 frame

Khi người chơi không bấm gì, nhân vật vẫn phải "sống": đó là vòng idle. Một idle hay chỉ cần dời 1 pixel – nhưng dời đúng chỗ và đúng nhịp. Bí quyết là chồng nhịp (overlapping action): thân hạ xuống trước, đầu hạ theo sau một frame, khăn và áo choàng còn trễ hơn nữa; trong khi bàn chân đứng yên tuyệt đối. Những độ trễ nhỏ đó làm nhân vật trông có trọng lượng và mềm mại. Chặng trước bạn đã làm nhân vật 32 × 32 đi bộ; cỡ 48 × 48 cho thêm chỗ để thể hiện khuôn mặt, khăn và áo choàng.

Hình mẫu

Thời gian ước tính: khoảng 100 phút: 60 phút cho frame gốc, 40 phút cho 3 frame còn lại. So sánh frame 1 và 3 – đầu, vai, thắt lưng thấp hơn đúng 1 pixel, còn ủng không đổi một pixel nào.

Chuẩn bị

• Canvas: 192 × 48 px (4 frame 48 × 48), 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), Eraser (Tẩy) Mode Pencil, Move Tool (Công cụ Di chuyển) (V) với phím mũi tên, Group layer (Ctrl+G), WindowCửa sổ›TimelineDòng thời gian chế độ Frame Animation.
• Phóng to không mờ: Image Interpolation Nearest Neighbor (Điểm lân cận), ViewHiển thị›ShowHiện›Pixel GridLưới điểm ảnh, Grid mỗi 48 px chia 12 (mỗi ô phụ 4 px).
• Thiết bị: nhân vật 48 px có nhiều đường cong (tóc, khăn) – bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil giúp phác dáng nhanh, nhưng chuột vẫn làm tốt toàn bộ vì mỗi frame chỉ khác nhau vài pixel và việc dời layer bằng phím mũi tên chính xác hơn mọi nét tay. Tắt lực nhấn khi dùng bút.
• File mẫu: "Dải 4 ô 48 × 48": đường hồng y = 44 là mặt đất, đường đứng là trục giữa nhân vật, vạch xanh y = 8 và y = 24 là đỉnh đầu và vai ở frame gốc.

Các bước

1. Tạo file và layer: Ctrl+N 192 × 48 px, Transparent; đặt lưới, file mẫu. Tạo hai Group cho frame 1: F1 Lower (chân, ủng, áo choàng) và F1 Upper (thân, tay, thắt lưng, khăn, đầu, tóc). Tách trên – dưới ngay từ đầu là chìa khóa của cả bài.
2. Bóng dáng frame gốc: nhân vật cao 37 px (đầu 15 px, thân 12 px, chân 10 px) – tỉ lệ chibi đầu to để biểu cảm rõ. Đỉnh đầu ở y = 8, chân chạm y = 44, trục giữa x = 24. Phác bằng một màu, xem ở 100%: bóng dáng phải đọc ra "người đội tóc, quàng khăn, khoác áo choàng".
3. Viền: viền 1 px #1b1a24 theo bóng dáng; bên trong chỉ dùng đường viền ở chỗ cần tách khối (cánh tay trước thân, ranh giới tóc – mặt). Xóa góc chữ L dày 2 px.
4. Màu nền: Paint Bucket (Thùng sơn) Tolerance 0 tô mỗi vùng bằng tông nền: da #f0a878, tóc #7a4a4a, áo #3a62a8, khăn và áo choàng #b0303a, quần #4e3e52, ủng #7a4a4a, thắt lưng #c88a2a với khóa #ffd860. Mắt là hai vạch dọc 1 × 2 px #1b1a24.
5. Tông tối: ánh sáng trên – trái. Cột pixel phải và hàng đáy của mỗi khối dùng tông tối của dải: áo #24386a, khăn #6a1a2a, da #b0604a (dưới cằm, bên phải má). Bóng của đầu đổ lên cổ – khăn 1 hàng.
6. Tông sáng: hàng trên và cột trái mỗi khối: áo #5c94d8, khăn #e86a4a, má trái và trán #ffd8b0, tóc mượn #b0604a làm vệt sáng. Đến đây frame 1 đã hoàn chỉnh – kiểm tra số màu: 16.
7. Nhân bản sang frame 2–4: chọn cả F1 Lower và F1 Upper, Ctrl+J ba lần, mỗi cặp dời đúng 48 px. Đổi tên thành F2, F3, F4. Từ giờ Lower không bao giờ được dời – chân trượt là lỗi idle tệ nhất.
8. Frame 2 – thân hạ: chọn F2 Upper, nhấn mũi tên xuống 1 lần. Riêng layer đầu và tóc trong F2 Upper, nhấn mũi tên lên 1 lần để trả về – đầu chưa hạ. Sửa chỗ nối: thắt lưng chồng lên quần 1 px, cổ dài thêm 1 px.
9. Frame 3 – đầu hạ theo: F3 Upper dời xuống 1 px nguyên cụm (cả đầu). Thân và đầu cùng thấp – đây là điểm "thở ra" sâu nhất. Đuôi khăn và vạt áo choàng ở F3 Lower dời xuống/ra sau 1 px – chúng trễ hơn thân.
10. Frame 4 – thân lên, đầu trễ: F4 Upper giữ nguyên vị trí gốc, nhưng layer đầu – tóc dời xuống 1 px (đầu chưa kịp lên). Áo choàng vẫn giữ vị trí của frame 3. Bốn frame tạo thành vòng: 1 → 2 → 3 → 4 → 1 mượt.
11. Onion skin thủ công: khi sửa một frame, kéo bản sao của frame trước vào cùng ô với Opacity (Độ mờ đục) 25%, đặt dưới cùng. Bạn thấy rõ từng pixel đã dời – xóa bản sao khi xong.
12. Xem thử: WindowCửa sổ›TimelineDòng thời gian › Create Frame Animation; mỗi frame chỉ hiện cặp group tương ứng, dời group về ô 1 bằng một layer Reference, hoặc đơn giản là xem bằng cách bật/tắt nhanh. Thời lượng 0,15 – 0,15 – 0,2 – 0,15 giây, Looping Forever. Nếu trông như "nấc cụt", bạn đã dời 2 px ở đâu đó.
13. Xuất PNG: ẩn mẫu, kiểm tra số màu bằng bản sao Indexed Color (≤ 16), FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG 100% → hero_idle.png đúng 192 × 48 px.
14. Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 16 – giống tileset để pixel nhân vật và pixel nền to bằng nhau; Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None. Slice Grid By Cell Size 48 × 48, Pivot (Điểm neo) Custom X 0,5 Y 0,083 (đúng chân ở y = 44). Kéo 4 sprite vào Scene tạo clip Idle.anim, Samples 7, Loop Time bật; Main Camera thêm Pixel Perfect Camera Assets Pixels Per Unit 16.

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

• Idle mệt: khi máu thấp, đổi sang idle dời 2 px với vai rủ xuống và đầu cúi – cùng kỹ thuật nhưng nhịp chậm hơn (Samples 5).
• Palette swap: nhân bản sheet và đổi dải áo, khăn bằng Magic Wand (Đũa thần) (Tolerance 0, bỏ Contiguous) để có người chơi 2 hoặc các NPC lính gác.
• Hướng mặt: lật ngang sheet bằng ImageHình ảnh›Image Rotation›Flip Canvas Horizontal hoặc để Unity lật bằng Flip X của Sprite Renderer – nhớ sửa lại ánh sáng nếu cần ánh sáng cố định một phía.