Dự án 4: Bộ 8 vật phẩm roguelike pixel 24 × 24

Game roguelike (mỗi lần chơi là một hầm ngục ngẫu nhiên, chết là chơi lại từ đầu) có rất nhiều vật phẩm nhặt được. Cỡ 24 × 24 px rộng hơn 16 × 16 một chút – đủ chỗ cho 3 tông màu và một chi tiết nhận diện, nhưng vẫn mang chất pixel. Bài học chính: quản lý bảng màu. Cả 8 vật phẩm dùng chung đúng 16 màu: 5 "dải màu" (ramp – mỗi dải gồm tông tối, tông nền, tông sáng) và 1 màu viền.

Hình mẫu

Thời gian ước tính: khoảng 90 phút (mỗi vật phẩm 10 phút). Dự án pixel ở chặng trước dùng 16 × 16; lần này bạn luyện cách đặt dải màu sao cho mọi vật phẩm dùng lại được.

Chuẩn bị

• Canvas: 192 × 24 px (8 ô 24 × 24), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Pencil (Bút chì) Tool 1 px (nhấn Shift+B tới khi ra Pencil), Eraser (Tẩy) (E) Mode Pencil, Paint Bucket (Thùng sơn) (G) Tolerance 0 bỏ Anti-alias (Khử răng cưa), Eyedropper (Ống hút màu) (I), Magic Wand (Đũa thần) (W).
• Phóng to không mờ: EditChỉnh sửa›PreferencesTùy chọn cài đặt›GeneralChung › Image Interpolation: Nearest Neighbor (Điểm lân cận) (preserve hard edges).
• Thiết bị: pixel art không cần lực nhấn. Chuột rất hợp vì mỗi cú bấm ra đúng 1 pixel. Nếu dùng bút (Wacom, XP-Pen, Huion, iPad), tắt Pen Pressure (Lực nhấn bút) và tránh "chạm nhẹ" làm ra pixel lạc.
• File mẫu: "Lưới dải 8 ô" đặt trên cùng; "Lưới phác thảo 24 × 24" để phác từng vật phẩm ở cỡ lớn trước.

Các bước

1. Tạo file: Ctrl+N Width 192, Height 24 Pixels, Transparent. Phóng to 800% và đặt lưới: Gridline Every 24 Pixels, Subdivisions 24, bật ViewHiển thị›ShowHiện›GridLưới.
2. Tạo bảng 16 màu: mở WindowCửa sổ›SwatchesBảng mẫu màu, tạo nhóm mới Roguelike 16, thêm lần lượt 16 màu ở bảng trên (Color Picker (Bảng chọn màu) › nhập hex › Add to Swatches (Bảng mẫu màu)). Xếp theo dải: tối – nền – sáng cạnh nhau để chọn nhanh.
3. Layer Sil (bóng dáng): layer mới, Pencil 1 px màu xanh nhạt bất kỳ, tô kín khối của 8 vật phẩm, mỗi cái trong ô của nó: vòng chìa khóa + thân + răng; cuộn giấy chữ nhật đứng có 2 trục; nhẫn tròn có viên đá trên đỉnh; bom tròn có nắp và dây; trái tim; chiếc giày; cây đuốc; đầu lâu. Chừa 1–2 px trống quanh mép ô.
4. Kiểm tra bóng dáng ở 100%: nhấn Ctrl+1. Ở cỡ thật 24 px, nếu không đọc được vật phẩm bằng khối xanh thì sửa ngay – ví dụ chìa khóa cần lỗ tròn trong vòng, nhẫn cần lỗ to ở giữa.
5. Layer Line (viền 1 px): màu #191624, vẽ viền ngoài bám theo khối. Lỗ của chìa khóa, nhẫn, hốc mắt đầu lâu cũng viền tối. Xóa các góc chữ L dày 2 px. Ẩn layer Sil khi xong.
6. Layer Flat: dưới Line, Paint Bucket chọn All Layers, tô mỗi phần bằng tông nền của dải: vàng #f2b632, đỏ #e0383e, nâu #8f5a32, kem #eadcb8, xám thép #56628c.
7. Layer Shadow: kẹp vào Flat (Ctrl+Alt+G). Mỗi vùng tô một hàng pixel tông tối dọc mép dưới và mép phải (ví dụ vàng → #b8741f). Ánh sáng từ trên – trái cho cả 8 vật phẩm.
8. Layer Light: kẹp tiếp. Một hàng pixel tông sáng ở mép trên và mép trái mỗi vùng (vàng → #ffe68a, xám thép → #8d9ac4). Bên trong vùng vẫn là tông nền – ba tông tạo khối tròn trịa chỉ bằng hai hàng pixel.
9. Chi tiết 1 pixel: layer Details: 2 dòng chữ trên cuộn giấy bằng kem tối, răng đầu lâu, tia lửa ở dây bom bằng vàng sáng, điểm lóe 1–2 pixel kem sáng trên tim và bom. Mỗi vật phẩm chỉ cần một chi tiết nhận diện.
10. Viền chọn lọc (tùy chọn): trên mép được chiếu sáng (trên – trái), thay vài pixel viền #191624 bằng tông tối của chính dải đó. Vật phẩm mềm hơn mà không thêm màu mới.
11. Đếm màu: ImageHình ảnh›DuplicateNhân bản, trên bản sao ImageHình ảnh›ModeChế độ (màu)›Indexed Color (đồng ý gộp layer). Palette hiện Exact, ô Colors phải ≤ 16. Bấm Cancel, đóng bản sao không lưu.
12. Xem cỡ thật: WindowCửa sổ›Arrange›New Window for… mở cửa sổ thứ hai của cùng file ở 200%. Vẽ ở cửa sổ 800%, nhìn kết quả ở cửa sổ nhỏ – đây là cỡ người chơi thấy.
13. Xuất PNG: ẩn lưới mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG, Scale 100%, Transparency (Độ trong suốt) bật → items_24.png đúng 192 × 24 px. Bản khoe mạng xã hội: bản sao ImageHình ảnh›Image SizeKích thước ảnh 1000%, Resample (Lấy mẫu lại) Nearest Neighbor (hard edges).
14. Đưa vào Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 24 (1 vật phẩm = 1 ô lưới game), Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None, Apply. Sprite Editor › Slice › Grid By Cell Size 24 × 24 › Apply. Vật phẩm rơi trên đất đặt Sorting Layer Items nằm trên Floor, dưới Characters.

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

• Khung độ hiếm: vẽ 4 khung ô vuông 24 × 24 viền 1 px (xám, xanh, tím, vàng) cho vật phẩm thường – hiếm – sử thi – huyền thoại; Unity đặt khung dưới vật phẩm trong túi đồ.
• Hoạt ảnh nhấp nhô 2 frame: dải thứ hai 192 × 24 với mỗi vật phẩm dời lên 1 pixel – vật phẩm trên đất "lơ lửng" thu hút người chơi.
• Pixel Perfect Camera: trong Unity, thêm component Pixel Perfect Camera vào Main Camera, Assets Pixels Per Unit 24 – pixel luôn vuông, không bị méo khi camera di chuyển.