Dự án 11: Tile isometric 2:1 và một công trình

Góc nhìn isometric (nhìn chéo từ trên cao, không có điểm tụ) là "chữ ký" của game xây dựng, chiến thuật và nông trại kiểu cũ. Trong game 2D, isometric gần như luôn dùng tỉ lệ 2:1: mặt trên của một ô là hình thoi rộng gấp đôi cao (128 × 64 px). Mọi đường xiên trong tranh đều theo đúng độ dốc này – với pixel art là "đi ngang 2 pixel, lên 1 pixel". Khó nhất không phải vẽ, mà là nhất quán hình học: một ô lệch 1 px là cả bản đồ có khe hở.

Hình mẫu

Thời gian ước tính: khoảng 5 giờ. Ánh sáng từ trên – trái: mặt trên sáng nhất, thành bên trái trung bình, thành bên phải tối nhất – ba mặt, ba giá trị, cho mọi khối trên bản đồ.

Chuẩn bị

• Canvas: 512 × 512 px, Transparent. Hai hàng trên: 8 ô tile 128 × 128 (cỏ, đất, đường, nước, cát, hoa, đá, cầu). Hai hàng dưới: nửa trái là ô công trình 256 × 256; nửa phải 4 ô 128 cho trang trí nhỏ (đèn, thùng, hàng rào, bụi cây).
• Hình học một ô: mặt thoi 128 × 64 px nằm từ y 32 tới y 96 trong ô; hai thành bên cao 32 px kéo xuống tới y 128. Tâm mặt thoi ở đúng tâm ô (64, 64).
• Công cụ chính: Rectangle Tool + Free Transform (Biến đổi tự do) để tạo hình thoi chuẩn, Pen Tool (Bút tạo đường) có Snap, Polygonal Lasso (Thòng lọng đa giác), Clipping Mask (Mặt nạ cắt).
• Thiết bị: hình học isometric dựng bằng Shape và vùng chọn – chuột thậm chí chính xác hơn bút. Kết cấu cỏ, vân đá, gợn nước vẽ bằng Brush (Cọ vẽ) thì bút có lực nhấn (Wacom, XP-Pen, Huion, iPad) cho nét tự nhiên hơn; với chuột, dùng Brush có Scattering (Tán xạ) và Opacity (Độ mờ đục) thấp.

Các bước

1. Tạo file Ctrl+N 512 × 512 px, Transparent. Lưới 128 px, Subdivisions 4 (mỗi vạch 32 px), bật ViewHiển thị›Snap To›GridLưới. Đặt file "Bố cục sheet isometric" lên trên, khóa lại.
2. Hình thoi chuẩn 128 × 64: Rectangle Tool bấm một lần lên canvas, nhập Width và Height 90.51 px (cạnh vuông xoay 45° sẽ có đường chéo đúng 128 px). Ctrl+T, gõ 45 vào ô góc xoay trên thanh Options, Enter. Ctrl+T lần nữa, bỏ khóa tỉ lệ và gõ H 50% – được hình thoi 128 × 64. Đặt tâm vào (64, 64) của ô 1. Đây là layer Top mẫu – nhân đôi cho mọi ô thay vì vẽ lại.
3. Thành bên: Pen Tool bật Snap: từ góc trái của thoi (0, 64) xuống (0, 96), tới đáy (64, 128), lên (64, 96) rồi khép về góc dưới của thoi – đó là thành trái, Fill #8f5a32. Làm tương tự thành phải, Fill #6e4224. Đặt cả hai dưới layer Top.
4. Ô cỏ: Top Fill #6cc04a, Stroke Inside 2 px #2f6a2a. Layer kẹp vào Top: dải sáng #8fdc6a dọc 2 cạnh trên của thoi, vài túm cỏ hình chữ V 3 px màu tối. Kết cấu đặt cách mép thoi ít nhất 6 px.
5. Các ô còn lại: nhân đôi Group ô cỏ sang 7 ô khác (lưới bám 128 px), đổi Fill mặt trên: đất nâu, đường #e0c08a có vệt bánh xe, nước #4fb6e8 hạ thấp 6 px so với mép (thành lộ ra thành bờ) với gợn sóng 2 nét, cát vàng nhạt, cỏ có hoa vàng, đá xám, cầu ván gỗ.
6. Ô công trình 2 × 2: footprint là hình thoi 256 × 128 nằm ở nửa dưới ô 256 (y 128–256 trong ô). Thu vào 8 px mỗi cạnh để nhà không chạm mép ô.
7. Tường nhà: từ footprint dựng 2 bức tường cao 88 px bằng Pen Tool: tường trái (mặt sáng) #f1e0c0, tường phải (mặt tối) #c9a878. Cạnh đứng phải thẳng đứng tuyệt đối – giữ Shift khi đặt điểm.
8. Mái: mái dạng chóp 4 mặt (chỉ thấy 2 mặt trước): đỉnh mái nằm thẳng trên tâm footprint; mép mái nhô ra 10 px so với tường. Mặt trái #e05a4f có vệt sáng, mặt phải #a3243b. Thêm ống khói (hộp isometric nhỏ) phía sau mái.
9. Cửa và cửa sổ: trên tường phải, cửa là hình bình hành có hai cạnh dọc thẳng đứng và hai cạnh xiên song song với mép tường (độ dốc 2:1). Cửa sổ vàng sáng trên tường trái. Mọi chi tiết trên tường phải "nằm" trong mặt phẳng tường – dùng Ctrl+T › chuột phải › Skew để ép hình chữ nhật theo độ dốc tường.
10. Bóng đổ: layer Multiply (Nhân (làm tối)) đen Opacity 22% dưới nhà: hình bình hành kéo dài về bên phải – dưới theo độ dốc 2:1. Trang trí nhỏ có bóng elip dẹt riêng.
11. Trang trí: 4 ô nhỏ: cột đèn (cột thẳng đứng + hộp đèn vàng + quầng sáng Screen), thùng gỗ (hộp isometric 28 × 14 mặt trên), đoạn hàng rào xiên theo một cạnh ô, bụi cây tròn. Đáy mỗi vật đặt ở tâm mặt thoi nhỏ trong ô.
12. Ghép thử bản đồ: mở "Lưới vẽ isometric 2:1", kéo các ô từ sheet vào thành bản đồ 6 × 6, mỗi ô dời đúng (±64, ±32) px. Sắp từ ô xa nhất (trên cùng) tới ô gần nhất (dưới cùng) – ô gần nằm trên trong bảng Layers. Kiểm tra không có khe sáng giữa các thoi.
13. Xuất PNG: ẩn file mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG, Transparency (Độ trong suốt) bật → iso_tiles.png 512 × 512 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ị) 128 (mặt thoi rộng 128 px = 1 đơn vị). Sprite Editor: cắt 8 ô tile và 4 ô trang trí bằng Grid By Cell Size 128 × 128 Pivot (Điểm neo) Center; kéo khung tay cho ô công trình 256 × 256 với Pivot Custom (0.5, 0.25) – tâm footprint. Tạo bản đồ: GameObject›2D Object›Tilemap›Isometric (Grid tự có Cell Size 1 × 0.5 × 1). WindowCửa sổ›2D›Tile Palette › Create New Palette, Grid Isometric, kéo sprite vào để tạo tile và vẽ. Nhà và đèn là GameObject riêng: trong Renderer 2D Data đặt Transparency Sort Mode Custom Axis (0, 1, 0), SpriteRenderer › Sprite Sort Point Pivot; Tilemap Renderer › Mode Individual để nhân vật đi ra sau nhà đúng thứ tự.

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

• Ô có độ cao: tạo bản ô cỏ có thành cao 64 px để làm vách đá; trong Unity dùng Tilemap kiểu Isometric Z as Y và đặt Transparency Sort Axis (0, 1, −0.26) để các tầng sắp lớp đúng.
• Nước động: 3 frame gợn sóng dời 4 px; tạo Animated Tile (gói 2D Tilemap Extras) để mặt nước chuyển động.
• Ô chuyển tiếp: cỏ – cát ở một cạnh, cỏ – nước ở hai cạnh… bộ ô mép giúp bản đồ bớt "ô cờ".