Dự án 6: Platformer pack – nhân vật, quái và vật phẩm

Game đi cảnh (platformer) cần rất nhiều thứ nhỏ cùng phong cách: nhân vật, quái, vật phẩm, vật cản. Bài học của dự án này là ngôn ngữ hình khối: nhân vật người chơi tròn, sáng, màu lạnh dễ thương; quái vật có góc cạnh và màu tím tối hơn; vật phẩm thu thập là màu vàng ấm lấp lánh. Người chơi chỉ cần liếc là biết thứ gì nên nhặt, thứ gì nên tránh.

Hình mẫu

Thời gian ước tính: khoảng 3 giờ. Hình mẫu là cảnh ghép để xem tổng thể – thứ bạn nộp là sheet các sprite tách rời trên nền trong suốt.

Chuẩn bị

• Canvas làm việc: 1024 × 1024 px (gấp 4 lần sheet thật), Transparent. Lưới: Gridline Every 256 px, Subdivisions 4. Vẽ to giúp nét mượt; cuối bài thu về 256 × 256.
• Bố trí sheet (ô 64 px ở cỡ thật): hàng 1 – nhân vật đứng (2 frame "thở"), nhảy, bị thương; hàng 2 – bọ đi (2 frame), bị đạp bẹp, lật ngửa; hàng 3 – ngôi sao (2 frame lấp lánh), trái tim, lông vũ; hàng 4 – cờ chưa chạm, cờ đã chạm, lò xo nén, lò xo bật.
• Đường chân: trong mỗi hàng, chân nhân vật, chân bọ và chân cờ chạm đường y = 60 (cỡ thật) – xem file mẫu.
• Thiết bị: nét viền mượt nhất khi có lực nhấn (Wacom, XP-Pen, Huion, iPad với Apple Pencil (Bút chì)): Brush (Cọ vẽ) cứng 12 px ở cỡ 1024, Shape Dynamics (Biến đổi hình dạng) › Size Jitter (Dao động kích thước) › Pen Pressure (Lực nhấn bút), Minimum Diameter 60% để nét không quá mảnh. Dùng chuột: dựng khối bằng Ellipse/Rectangle và Pen Tool (Bút tạo đường), viền bằng Stroke Inside 12 px – kết quả gọn, kiểu "vector".

Các bước

1. Tạo file làm việc ⌘ Cmd+N 1024 × 1024 px, Transparent. Đặt file mẫu "Lưới sheet 4 × 4" vào bằng FileTệp›Place Embedded, kéo giãn ra đúng 1024 × 1024 (giữ ⇧ Shift), khóa lại. Mỗi ô giờ là 256 px, đường chân ở y = 240 trong ô.
2. Phác bằng hình cơ bản (layer Sketch): nhân vật = đầu tròn to (60% chiều cao) + thân nhỏ hình viên thuốc – tỉ lệ "chibi" giúp đọc rõ ở 64 px. Bọ = nửa hình tròn dẹt + đầu tròn nhỏ + 4 chân. Ngôi sao 5 cánh tròn đầu, trái tim, lông vũ hình lá cong.
3. Kiểm tra bóng dáng: tô đen kín trên một layer tạm rồi thu về 25% (⌘ Cmd+-). Nhân vật phải khác bọ ngay từ bóng dáng: một bên thẳng đứng và tròn, một bên nằm ngang và dẹt.
4. Nét viền (layer Line): màu #1b1a24, 12 px ở cỡ 1024 (= 3 px khi thu về 256). Dùng cùng một độ dày cho mọi sprite – điều quan trọng nhất để cả gói trông chung một game.
5. Màu nền (layer Flat): dưới Line, tô từng vùng bằng bảng màu. Nhân vật dùng xanh lạnh và đỏ nhấn ở khăn; bọ dùng tím; vật phẩm dùng vàng, đỏ và xanh sáng – các màu "phần thưởng".
6. Đổ bóng: layer kẹp (⌘ Cmd+⌥ Option+G), Blend Mode (Chế độ hòa trộn) Multiply (Nhân (làm tối)), màu tím nhạt #b9a7d9, tô mảng bóng phía dưới – phải của từng khối. Multiply với một màu tím chung giúp mọi bóng cùng "nhiệt độ".
7. Ánh sáng: layer kẹp Blend Mode Screen hoặc tô thẳng màu sáng: vệt sáng trên mũ trùm, lưng mai bọ, đỉnh ngôi sao. Điểm lóe trắng nhỏ trên mắt nhân vật.
8. Frame "thở" và frame chuyển động: nhân đôi Group nhân vật sang ô 2, dùng ⌘ Cmd+T nén thân 4% theo chiều dọc (giữ chân cố định bằng cách kéo điểm tâm xuống chân). Bọ đi frame 2: chân trước và sau đổi vị trí. Ngôi sao frame 2: xoay 10° và đổi vị trí điểm lóe.
9. Trạng thái đặc biệt: nhân vật nhảy (co chân, tay giơ lên), bị thương (mắt chữ X, nghiêng người); bọ bị đạp bẹp (nén còn 40% chiều cao), lật ngửa (lật dọc EditChỉnh sửa›TransformBiến đổi›Flip VerticalLật dọc, chân chổng lên).
10. Vật cản: cờ chưa chạm màu xám #8a93a6, cờ đã chạm đỏ #ff5a5f tung bay; lò xo nén thấp và lò xo bật cao – đáy của cả hai đặt trên đường chân.
11. Soát đường chân: bật lưới mẫu, kiểm tra chân của mọi sprite đứng chạm y = 240 trong ô của nó. Vật phẩm bay (sao, tim, lông vũ) căn giữa ô vì chúng lơ lửng.
12. Thu về cỡ thật: FileTệp›Save AsLưu thành bản khác bản PSD làm việc, rồi trên bản sao ImageHình ảnh›Image SizeKích thước ảnh Width 256 px, Resample (Lấy mẫu lại) Bicubic (Nội suy mượt) Sharper (reduction). Nét 12 px giờ là 3 px, vẫn sắc.
13. Xuất PNG: ẩn Sketch và lưới, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG, Transparency (Độ trong suốt) bật → platformer_64.png 256 × 256 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ị) 64, Apply. Sprite Editor › Slice › Grid By Cell Size 64 × 64, Pivot (Điểm neo) Custom, Pivot Unit Mode Pixels, X 32, Y 4 (đường chân cách đáy ô 4 px) › Apply. Chọn 2 sprite "đứng" rồi kéo vào Scene – Unity hỏi nơi lưu và tạo sẵn Animation Clip. Vào EditChỉnh sửa›Project Settings›Tags and Layers tạo Sorting Layers theo thứ tự: Background, Ground, Items, Characters, FX.

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

• Chu kỳ chạy 4 frame: mở rộng sheet lên 256 × 320 px với hàng thứ 5 là 4 frame chạy (chân trước – chân giữa – chân sau – chân giữa).
• Hạt bụi khi tiếp đất: 3 frame khói nhỏ 64 × 32 px đặt ở Sorting Layer FX.
• Viền tô màu theo nền: thử đổi viền đen thành tím tối #2b1a3a – nhân vật hòa hợp hơn với cảnh hoàng hôn.