Dự án 13: Boss pixel 96 × 96 – Golem dung nham

Boss là sprite lớn nhất người chơi đối mặt, nhưng "lớn" trong pixel art là một thử thách: 96 × 96 có gần 9.000 pixel, đủ để bạn sa đà vào chi tiết và đánh mất bóng dáng. Quy trình của dự án là khối trước, chi tiết sau: dựng golem từ khoảng 10 khối đá đơn giản (thân, vai, đầu, tay, nắm đấm, chân), đổ bóng mỗi khối như một quả cầu, rồi mới thêm các vết nứt dung nham. Lõi dung nham sáng rực giữa ngực có hai vai trò: là điểm nhấn thị giác và là điểm yếu người chơi phải nhắm vào – thiết kế boss tốt luôn nói cho người chơi biết đánh vào đâu.

Hình mẫu

Thời gian ước tính: khoảng 200 phút – hãy chia ba buổi: khối và bóng dáng, đổ bóng đá, dung nham và chi tiết. Đứng xa nhìn bản cỡ thật: bạn thấy ngay ba thứ – bóng dáng đồ sộ, hai nắm đấm to, lõi sáng ở giữa.

Chuẩn bị

• Canvas: 96 × 96 px, Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Elliptical Marquee (Khung chọn) và Polygonal Lasso (Thòng lọng đa giác) (L) bỏ Anti-alias (Khử răng cưa) để dựng khối, Pencil (Bút chì) Tool 1 px (Shift+B), Paint Bucket (Thùng sơn) Tolerance 0, Clipping Mask (Mặt nạ cắt) (Ctrl+Alt+G) để đổ bóng không lem.
• 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. Mở WindowCửa sổ›Arrange›New Window for… ở 100% để luôn thấy cỡ thật.
• Thiết bị: với sprite lớn, bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil rất tiện để phác khối và vết nứt tự nhiên trên layer phác. Chuột vẫn làm được trọn vẹn: khối dựng bằng Elliptical Marquee, vết nứt là đường thẳng gãy khúc bằng Pencil + Shift. Tắt lực nhấn khi vẽ pixel bằng bút.
• File mẫu: khung 96 × 96: đường hồng y = 92 là mặt đất, đường đứng là trục giữa, vòng xanh nhỏ ở (48, 25) là đầu, vòng lớn là thân, vòng ở (48, 55) là lõi dung nham.

Các bước

1. Tạo file: Ctrl+N 96 × 96 px, Transparent, đặt file mẫu, khóa lại. Gridline Every 16 Pixels, Subdivisions 4.
2. Thiết kế bằng bóng dáng: trên layer phác, thử 3 bóng dáng golem khác nhau ở cỡ 96 px (to vai nhỏ đầu, tròn lùn, cao gầy). Chọn bóng dáng đọc được nhất ở 100%. Với boss, bóng dáng nên có phần trên to (vai, nắm đấm) – trông áp đảo nhân vật 48 px của người chơi.
3. Dựng 10 khối đá: mỗi khối một layer, tô #4a4560: thân elip lớn (rộng 58, cao 44), hai vai elip, đầu nhỏ lún giữa hai vai, hai cánh tay đa giác, hai nắm đấm elip to ngang vai, hai chân khối thang ngắn. Khối nào ở trước thì layer nằm trên.
4. Viền và khe: gộp các khối vào một Group, chọn toàn bộ, EditChỉnh sửa›StrokeViền 1 px Outside #1b1a24 trên layer riêng. Ở chỗ khối trước chồng khối sau, vẽ một cung khe tối #2b2838 dọc mép dưới của khối trước – chính khe này tách các tảng đá.
5. Đổ khối 2 tông: mỗi khối tạo layer kẹp (Ctrl+Alt+G) và tô vùng lưỡi liềm tối #2b2838 ở dưới – phải, vùng sáng #6e6888 ở trên – trái. Ánh sáng môi trường đến từ trên – trái cho mọi khối.
6. Đủ 4 tông đá: thêm #a09cb8 cho đỉnh mỗi tảng (vai, đầu, mu nắm đấm) – vài pixel tới vài hàng. Đá thô ráp: cho ranh giới giữa các tông gãy khúc theo bậc 2–3 pixel thay vì cong mượt, và thêm 2–3 vết sứt nhỏ trên mép sáng.
7. Lõi dung nham: giữa ngực, hình tròn bán kính 7 px #e0442a, trong là #ff9a2a bán kính 5, lõi #ffe07a bán kính 2–3 lệch lên trên – trái. Vòng ngoài 1 px #7a1c2a làm đá cháy sém quanh lõi. Không viền đen quanh lõi – vật phát sáng không có viền.
8. Vết nứt lửa: từ lõi vẽ 4–6 đường nứt gãy khúc lan ra vai, bụng và xuống hai cánh tay, mỗi đường dày 2 px: pixel #e0442a phía trên – trái, #7a1c2a phía dưới – phải; đầu nứt gần lõi có 1 pixel #ff9a2a. Nứt càng xa lõi càng mảnh và tối.
9. Ánh sáng hắt từ lõi: đá nằm sát vết nứt và quanh lõi được chiếu từ bên trong: đổi 1–2 pixel đá kề vết nứt lên một tông sáng hơn, ở phía quay về vết nứt. Đây là ánh sáng thứ hai – làm golem trông đang cháy âm ỉ.
10. Mắt: hai khe 4 × 2 px #ff9a2a với 1 pixel #ffe07a, trên mắt là "lông mày" 6 px #1b1a24 nghiêng nhẹ xuống phía trong – một nét đủ làm boss trông giận dữ.
11. Rêu, đá bay, tia lửa: rêu là dải gợn sóng #6a9a4a trên đỉnh vai và đầu, rủ xuống vài pixel #3a5a3a. Ba viên đá nhỏ lơ lửng quanh đầu (bán kính 2–3 px, 4 tông) và 5 tia lửa 1 pixel #ff9a2a rải xung quanh. Thêm bóng đất 1 hàng dưới chân.
12. Kiểm tra cỡ thật và màu: ở 100%, đặt nhân vật 48 × 48 của dự án idle cạnh boss: boss phải cao gần gấp đôi và lõi sáng là thứ đầu tiên mắt nhìn vào. Đếm màu bằng bản sao Indexed Color: tối đa 24 màu (mẫu dùng 15).
13. Xuất PNG: ẩn phác và mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG 100% → boss_golem.png đúng 96 × 96 px. Lưu PSD giữ các layer khối để sau này làm hoạt ảnh.
14. Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Single, Pixels Per Unit (Số pixel mỗi đơn vị) 16 (boss cao 6 đơn vị, nhân vật cao 3), Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None, Pivot (Điểm neo) Custom X 0,5 Y 0,04 (chân ở y = 92). Mở Sprite Editor › Custom Physics Shape › Generate để có hình va chạm bám theo khối đá; thêm Polygon Collider 2D. Lõi là một con Circle Collider 2D riêng (Is Trigger) đặt đúng vị trí ngực – chỉ đòn trúng lõi mới trừ máu boss.

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

• Idle của boss: 4 frame, lõi đổi lớn – nhỏ 1 px và đá bay nhấp nhô 1 px. Vì đã giữ layer khối, bạn chỉ cần dời vài layer.
• Pha 2 nổi giận: bản sprite thứ hai với nhiều vết nứt hơn, lõi to hơn và một phần vai vỡ ra – đổi sprite khi máu boss dưới 50%.
• Đòn nện đất: 3 frame: giơ hai nắm đấm lên cao (lấy đà), nện xuống, bụi và đá văng – canvas 288 × 96 px.