Dự án 15: Khối isometric pixel 2:1 và căn nhà nhỏ

Góc nhìn isometric (nhìn chéo từ trên xuống, thấy hai mặt bên và mặt trên) là "chữ ký" của nhiều game chiến thuật, nông trại và xây dựng. Trong pixel art, isometric luôn dùng đường 2:1: cứ 2 pixel ngang thì lên hoặc xuống 1 pixel. Đường này cho bậc thang đều tăm tắp và ghép lưới không hở – khác với góc 30° thật vốn tạo bậc lộn xộn 1-2-2-1. Một khối cơ bản rộng 32 px có mặt trên hình thoi 32 × 16. Bài này bắt đầu từ khối, ô sàn, rồi dùng chính các quy tắc đó để dựng một căn nhà.

Hình mẫu

Thời gian ước tính: khoảng 160 phút. Nhìn các cạnh xiên của khối và chân nhà: tất cả đều là bậc 2 pixel. Mặt trên sáng nhất, mặt trái vừa, mặt phải tối nhất – ánh sáng đến từ phía trên – trái.

Chuẩn bị

• Canvas: 128 × 64 px, Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Nửa trái (64 × 64) cho khối và ô sàn, nửa phải cho căn nhà.
• Công cụ chính: Pencil (Bút chì) Tool 1 px (Shift+B) – vẽ đường 2:1 bằng cách đặt từng cặp pixel; Polygonal Lasso (Thòng lọng đa giác) bỏ Anti-alias (Khử răng cưa) để chọn mặt; Paint Bucket (Thùng sơn) Tolerance 0; Magic Wand (Đũa thần) Tolerance 0 để chọn nhanh từng mặt khi tô.
• 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. Đừng dùng Line Tool hay Free Transform (Biến đổi tự do) để làm đường xiên – chúng không cho đúng bậc 2:1.
• Thiết bị: isometric pixel là đặt pixel theo quy luật cặp đôi – chuột chính xác và nhanh nhất cho bài này. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil không giúp gì nhiều cho đường 2:1; nếu dùng, tắt lực nhấn và chấm từng pixel.
• File mẫu: lưới thoi 2:1 đúng từng pixel (xanh) và các đường viền hồng của hai ô thoi 32 × 16 và chân nhà 48 × 24 – vẽ ngay lên trên hoặc dùng làm tham chiếu.

Các bước

1. Tạo file: Ctrl+N 128 × 64 px, Transparent, đặt file mẫu ở Opacity (Độ mờ đục) 50%, khóa lại. Zoom 800%, bật Pixel Grid (Lưới điểm ảnh).
2. Luyện đường 2:1: trên layer nháp, vẽ một đường đi xuống phải: 2 pixel, xuống 1, 2 pixel, xuống 1… Rồi đường đi lên phải. Bốn đường ghép thành hình thoi rộng 32, cao 16 – đỉnh và đáy hình thoi là 2 pixel nằm ngang, góc trái phải là 2 pixel nằm dọc. Xóa nháp khi đã quen tay.
3. Mặt trên khối cỏ: layer Grass Block. Hình thoi 32 × 16 có tâm ở x = 16, đỉnh ở y = 4. Mỗi hàng của hình thoi rộng hơn hàng trên 4 pixel (2 mỗi bên) cho tới giữa, rồi hẹp lại. Tô #4f9a4a.
4. Hai mặt bên: từ hai góc trái – phải và đáy hình thoi, kéo xuống các cạnh đứng dài 14 px; cạnh dưới của mặt bên cũng là đường 2:1 song song với cạnh đáy hình thoi. Mặt trái tô #7a4a36, mặt phải #4a2e2a. Vài pixel cỏ rủ xuống mép trên hai mặt bên (2–3 pixel so le).
5. Viền: viền ngoài 1 px #1b1a24 quanh cả khối. Cạnh giữa hai mặt bên (đường đứng ở chính giữa) không cần viền – sự khác biệt sáng tối đã đủ tách hai mặt. Cạnh trước – trên của hình thoi (hai cạnh dưới) tô 1 hàng #8cd060 làm mép bắt sáng.
6. Khối đá xây: sao chép khối cỏ, dời đúng 32 px sang phải, tô lại: mặt trên #6a6888, mặt trái #6a6888 với rãnh #3d3a55, mặt phải #3d3a55 với rãnh #1b1a24. Rãnh gạch: hàng ngang mỗi 5 px chạy theo đường 2:1 của mặt; mạch đứng so le mỗi 8 px. Mép trên sáng #9ea0b8.
7. Ô sàn phẳng: phía dưới hai khối, vẽ hai hình thoi 32 × 16 không có mặt bên: ô cỏ (vài pixel #2f6a3a rải rác, mép bắt sáng) và ô nước #2c3f7a với các vạch gợn #5cb8e8 chạy chéo song song với cạnh. Ô sàn là mảnh ghép chính của Isometric Tilemap.
8. Chân nhà: ở nửa phải, hình thoi 48 × 24 (bậc vẫn 2:1) tâm x = 96, đỉnh y = 24 – đây là mặt trên của khối tường, sẽ bị mái che. Kéo hai mặt bên cao 15 px: tường trái #e0c08a, tường phải #a8885a, hàng chân tường tối hơn một tông.
9. Mái chóp: đỉnh mái ở (96, 4), ngay trên tâm nhà. Mặt mái trái là tam giác nối góc trái của chân nhà (lấn ra 2 px làm diềm mái), góc trước (đáy hình thoi, lấn xuống 2 px) và đỉnh; mặt mái phải tương tự. Mái trái #b8403a, mái phải #7a2a2a, sống mái từ đỉnh xuống góc trước #e8704a.
10. Ngói: trên mỗi mặt mái, vẽ 5 đường ngói song song với diềm mái, cách đều từ diềm lên đỉnh: mái trái dùng #7a2a2a, mái phải dùng #1b1a24. Ngói giúp mắt hiểu độ dốc và hướng của từng mặt mái.
11. Cửa sổ và cửa: chi tiết trên mặt tường phải đi theo đường 2:1 của mặt đó. Cửa sổ trên tường trái: hình bình hành 6 px ngang, 6 px cao, khung #5c3a24, kính #5cb8e8, song chắn ở giữa. Cửa trên tường phải: hình bình hành 6 × 11 px, gỗ #7a4a36, khung #5c3a24, tay nắm 1 pixel #ffd860.
12. Ống khói và khói: ống khói 4 × 8 px #7a4a36 có mặt tối bên phải, đặt nhô lên khỏi mái phải. Ba pixel khói #9ea0b8 xếp chéo lên trên. Viền 1 px cho cả căn nhà; kiểm tra lại mọi cạnh xiên vẫn là bậc 2:1.
13. Đếm màu và xuất: bản sao › Indexed Color: tối đa 24 màu. Ẩn file mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG 100% → iso_pack.png đúng 128 × 64 px. Nếu muốn từng sprite riêng, dùng Rectangular Marquee (Khung chọn) Fixed Size 32 × 32 / 64 × 64 rồi EditChỉnh sửa›Copy Merged sang file mới.
14. Unity 6: Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 32 (một ô thoi rộng 32 px = 1 ô lưới), Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None; Sprite Editor cắt bằng Automatic hoặc vẽ tay từng rect, Pivot (Điểm neo) của ô sàn là Center, của khối là Custom ở giữa mặt trên. Tạo GameObject›2D Object›Tilemap›Isometric – Grid tự đặt Cell Size (1, 0,5, 1) đúng tỉ lệ 2:1. Để vật phía sau bị vật phía trước che đúng, vào 2D Renderer Data (hoặc EditChỉnh sửa›Project Settings›Graphics) đặt Transparency (Độ trong suốt) Sort Mode Custom Axis = (0, 1, 0); căn nhà đặt thành sprite riêng với Sprite Sort Point Pivot.

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

• Bộ ô chuyển tiếp: ô sàn nửa cỏ nửa nước theo 4 hướng (mép nước chạy song song cạnh thoi) – đủ để vẽ một bờ hồ trong Isometric Tilemap.
• Khối cao 2 tầng: chồng hai khối đá lệch nhau 16 px theo chiều dọc để làm tường thành; nhớ khối phía trên – sau phải được vẽ trước.
• Đèn ban đêm: nhân bản căn nhà, đổi kính cửa sổ sang #ffd860, giảm sáng tường và mái một tông – có ngay phiên bản đêm cho chu kỳ ngày – đêm.