Dự án 12: Nhân vật top-down 4 hướng

Game phiêu lưu nhìn từ trên xuống (top-down) như các game Zelda cổ điển hay game nông trại cần nhân vật đi được 4 hướng. Góc nhìn dùng là 3/4 từ trên: thấy đỉnh đầu và mặt trước cùng lúc, đầu to, thân ngắn. Thử thách của dự án: giữ nhân vật giống nhau ở cả 4 hướng – cùng chiều cao, cùng màu, cùng tỉ lệ.

Hình mẫu

Thời gian ước tính: khoảng 5 giờ, chia 3 buổi: 4 tư thế đứng; 16 frame bước chân; thu nhỏ, xuất và dựng Animator.

Chuẩn bị

• File vẽ: 1024 × 1024 px (gấp 4), ViewHiển thị›GuidesĐường gióng›New Guide Layout Columns 4, Rows 4, Gutter 0 – mỗi ô 256 px là một frame. Cuối cùng thu về 256 × 256 px (frame 64 px).
• Thứ tự hàng: hàng 1 đi xuống, hàng 2 đi sang trái, hàng 3 đi sang phải, hàng 4 đi lên. Cột 1–4 là 4 frame bước.
• Brush (Cọ vẽ): Hard Round 8 px có lực nhấn cho nét, Pencil (Bút chì) hoặc Lasso (Dây thòng lọng) + tô cho mảng màu.
• Thiết bị: nét viền đẹp hơn với lực nhấn: bút XP-Pen/Huion cần bật Windows Ink (Windows Ink (bút Windows)) trong driver; Wacom dùng mặc định. Chuột: vẽ khối bằng Ellipse và Lasso, nét viền bằng Layer Style Stroke 8 px thay vì vẽ tay. iPad qua Sidecar/Astropad: Apple Pencil cho lực nhấn như bút.
• File mẫu: "Lưới sheet 4 × 4" (phóng to 400% Nearest Neighbor (Điểm lân cận) để dùng trên file 1024): vạch xanh lá là đường chân – bóng tròn dưới chân đặt trên vạch này ở mọi frame.

Các bước

1. Khung 3/4: ở ô hàng 1 cột 1, layer Construct: hình tròn đầu đường kính khoảng 52% chiều cao nhân vật, thân hình chữ nhật bo góc ngắn, bóng bầu dục dưới chân trên vạch xanh lá. Kẻ guide ngang ở đỉnh đầu, cằm, thắt lưng – dùng chung cho cả 4 hàng.
2. Hướng xuống (mặt trước): vẽ nét trên khung: tóc phủ nửa trên đầu với mái, hai mắt dọc to đặt thấp (dưới nửa đầu – vì ta nhìn từ trên), má hồng, thân áo đỏ, thắt lưng vàng, hai tay nhỏ ở hai bên, hai bàn chân bầu dục.
3. Hướng lên (lưng): nhân đôi Group hướng xuống sang hàng 4 cột 1. Xóa mặt, vẽ tóc phủ kín đầu (thêm xoáy tóc), áo choàng xanh phủ lưng. Giữ đúng vị trí đầu, thân, chân theo guide ngang.
4. Hướng trái (nghiêng): ở hàng 2: đầu vẫn tròn nhưng tóc dồn về phía sau (bên phải của hình), một mắt gần mép trái, thân hẹp hơn một chút, một tay ở trước thân, áo choàng ló ra sau lưng.
5. Hướng phải bằng lật ngang: nhân đôi Group hướng trái sang hàng 3, EditChỉnh sửa›TransformBiến đổi›Flip HorizontalLật ngang. Soát chi tiết bất đối xứng (ngôi tóc, kiếm đeo một bên, huy hiệu trên áo) – nếu có, vẽ lại cho đúng bên.
6. Màu phẳng và bóng: layer Flat, Shadow (Clipping Mask (Mặt nạ cắt)), Light như các dự án trước – ánh sáng từ trên – trái cho cả 4 hướng. Bóng áo ở phía phải thân, bóng tóc ở dưới – phải, bóng da dưới tóc mái.
7. Frame bước hướng xuống: 4 cột của hàng 1: cột 1 đứng; cột 2 chân trái nhô lên trước (dời lên 12 px ở file 4x) và chân phải lùi xuống, thân nhô lên 6 px; cột 3 như cột 1; cột 4 như cột 2 nhưng đổi chân. Tay đung đưa ngược với chân.
8. Frame bước hướng lên và nghiêng: hàng 4 giống hàng 1 (nhìn từ sau thì chân bước lên sẽ nhỏ đi một chút). Hàng 2: chân trước – chân sau dạng ra theo chiều ngang, thân nhún 6 px ở cột 2 và 4. Hàng 3 lật ngang từ hàng 2 sau khi hoàn thiện.
9. Giữ đầu đứng yên: ở mọi frame của một hàng, tâm đầu chỉ được lên xuống theo nhịp nhún, không trượt ngang. Bật lại guide dọc giữa ô để kiểm tra.
10. Xem thử từng hàng: WindowCửa sổ›TimelineDòng thời gian › Create Frame Animation, dùng 4 frame, mỗi frame bật Group tương ứng, 0,15 giây, Looping Forever. Làm lần lượt cho 4 hàng.
11. Thu nhỏ: lưu bản hero_topdown_4x.psd. Trên bản chính ImageHình ảnh›Image SizeKích thước ảnh Width 256, Height 256, Resample (Lấy mẫu lại) Bicubic (Nội suy mượt) Sharper (reduction). Nét 8 px còn 2 px – vẫn rõ.
12. Kiểm tra bằng lưới mẫu: đặt "Lưới sheet 4 × 4" lên trên Opacity (Độ mờ đục) 50%: mọi nhân vật nằm gọn trong ô hồng, bóng tròn dưới chân nằm trên vạch xanh lá. Ẩn lưới.
13. Xuất: FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG → hero_topdown.png đúng 256 × 256 px, nền trong suốt.
14. Đưa vào Unity 6: Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 64, Filter Mode (Chế độ lọc ảnh) Bilinear. Sprite Editor › Slice › Grid By Cell Size 64 × 64, Pivot (Điểm neo) Bottom › Apply. Tạo 4 Animation Clip (Walk Down, Left, Right, Up), mỗi clip 4 sprite, Samples 8. Trong Animator dùng Blend Tree kiểu 2D Simple Directional với hai tham số MoveX, MoveY để Unity tự chọn hướng. Để nhân vật đi ra sau cây thì bị che, đặt Transparency (Độ trong suốt) Sort Mode Custom Axis (0, 1, 0) trong Renderer 2D Data (URP) – vật ở cao hơn trên màn hình được vẽ trước.

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

• Hành động tấn công 3 frame: vung kiếm cho mỗi hướng – sheet 192 × 256 px.
• 8 hướng: thêm 4 hướng chéo (xuống – trái, xuống – phải, lên – trái, lên – phải) cho game hành động nhanh.
• Phiên bản pixel: vẽ lại nhân vật ở 16 × 16 hoặc 32 × 32 px bằng Pencil, giữ bảng màu hiện tại.