Dự án 6: Tileset hầm ngục 16 × 16 (8 × 8 ô)

Một tileset là bộ "viên gạch" nhỏ cùng kích thước mà nhà thiết kế màn chơi dùng để lát nên cả thế giới. Với góc nhìn 3/4 từ trên xuống (kiểu Zelda cổ điển), một bức tường gồm hai phần: mặt trên (đỉnh tường nhìn từ trên) và mặt tường (gạch nhìn chính diện). Bài khó nhất ở tileset không phải vẽ đẹp từng ô mà là làm cho mọi ô ghép liền với ô bên cạnh: sàn lặp không thấy đường nối, cạnh tường gặp góc tường khớp từng pixel. Dự án này cho bạn một bộ đủ dùng để làm cả một tầng hầm ngục.

Hình mẫu

Thời gian ước tính: khoảng 150 phút – hãy chia 2–3 buổi. Trình tự trong hình là trình tự nên vẽ: sàn trước (dùng nhiều nhất), rồi mặt tường, mặt trên tường, các ô chuyển tiếp, cuối cùng là đồ trang trí.

Chuẩn bị

• Canvas: 128 × 128 px (8 × 8 ô 16 × 16), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Cạnh 128 là lũy thừa của 2 – GPU xử lý texture này hiệu quả nhất.
• Công cụ chính: Pencil (Bút chì) Tool 1 px (⇧ Shift+B), Rectangular Marquee (Khung chọn) Fixed Size 16 × 16, Paint Bucket (Thùng sơn) Tolerance 0 bỏ Anti-alias (Khử răng cưa), FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng) để kiểm tra lặp, Magic Wand (Đũa thần) Tolerance 0 bỏ Contiguous để thay màu hàng loạ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, Grid: Gridline Every 16 Pixels, Subdivisions 16.
• Thiết bị: tileset gồm nhiều đường thẳng, gạch, viền – chuột cực kỳ phù hợp: bấm – giữ ⇧ Shift – bấm để kẻ thẳng. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil hữu ích khi chấm rêu và vết nứt, nhớ tắt lực nhấn.
• File mẫu: "Lưới 8 × 8 ô 16 px" đặt trên cùng; bản 400% có tên từng hàng để bạn in ra và phác bằng bút chì trước.

Các bước

1. Tạo file và sơ đồ: ⌘ Cmd+N 128 × 128 px, Transparent, đặt lưới và file mẫu. Layer Plan: tô mỗi hàng một màu theo loại ô (2 hàng mặt trên tường, 2 hàng mặt tường, 1 hàng sàn, 1 hàng bóng – cầu thang, 1 hàng nước – bẫy – thảm, 1 hàng vật trang trí). Sơ đồ giúp bạn không vẽ thiếu ô nào.
2. Ô sàn gốc: layer Tiles, ô hàng 5 cột 1. Tô #57536e, kẻ mạch vữa #2b2838 chia thành các phiến đá so le: chỉ kẻ mạch ở mép phải và mép dưới của ô (x = 15, y = 15), không kẻ ở mép trái và trên – khi lát cạnh nhau, mạch của ô này thành mép của ô kia, không bị dày gấp đôi.
3. Kiểm tra lặp: sao chép ô sàn ra file mới 16 × 16, FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng) Horizontal 8, Vertical 8, chọn Wrap Around. Đường nối giữa ảnh phải liền mạch. Thêm mép sáng #7a7690 1 pixel ở cạnh trên mỗi phiến và 2–3 đốm đá – đốm nằm xa mép để không lộ khi lặp.
4. 8 biến thể sàn: nhân ô gốc ra 8 ô hàng 5 (⌘ Cmd+C, ⌘ Cmd+⇧ Shift+V, dời đúng 16 px). Mỗi bản sửa một chút: vết nứt, sỏi, rêu, vũng nước, xương, nứt lớn, phiến tối. Giữ nguyên mạch vữa ở mép để mọi biến thể ghép lẫn với nhau.
5. Mặt tường gạch: hàng 3, ô 1. Viên gạch cao 4 px (3 px gạch + 1 px vữa #3a2630), so le nửa viên mỗi hàng. Mỗi viên: hàng trên #b07a5a (ánh sáng từ trên), thân #8a5a48, hàng đáy #5c3a3a. Mép trái – phải của ô phải khớp: viên gạch bị cắt ở mép phải tiếp tục ở mép trái.
6. Biến thể tường: rêu bám chân tường (cụm #2f4a3a/#4f7a4a ở 4 hàng dưới), tường nứt, tường có song sắt (ô #14121c với 4 thanh #57536e), cánh cửa gỗ có đai sắt và tay nắm #ffd84a, hai ô đầu tường có cột đá ở mép trái / mép phải.
7. Đuốc 3 frame: ba ô tường liền nhau có giá đuốc giống hệt, chỉ khác ngọn lửa: lửa cao – thấp – nghiêng, lõi #ffd84a, viền lửa #ff7a2a, thêm 1–2 tia lửa lệch vị trí. Unity sẽ phát ba ô này thành một ô động.
8. Mặt trên tường (hàng 1–2): nền #3d3a55 với vài vệt #57536e. Ô có cạnh hở phía trên hoặc trái: viền ngoài #14121c và mép sáng #7a7690 bên trong; cạnh hở phía dưới hoặc phải: mép tối #2b2838. Vẽ đủ 4 góc ngoài (trên trái, trên phải, dưới trái, dưới phải), 2 cạnh ngang, 2 cạnh dọc, 1 ô giữa kín và 1 cột đơn.
9. Góc trong: hàng 2, ô 5–8: ô mặt trên kín nhưng có "khấc" 1 pixel tối kèm 2 pixel sáng ở đúng một góc – dùng khi hai bức tường gặp nhau tạo góc lõm. Đây là các ô hay bị quên nhất; thiếu chúng, góc phòng sẽ có lỗ.
10. Ô chuyển tiếp: hàng 6: sàn có bóng tường đổ xuống (3 hàng trên tối dần), sàn có bóng bên trái, góc bóng, cầu thang đi xuống (4 bậc tối dần), cửa sập, bàn nhấn, song thoát nước. Bóng tường làm căn phòng có chiều sâu ngay lập tức.
11. Nước, bẫy, thảm: hàng 7: nước #2c3f7a có gợn #3f74c0, mép nước giáp sàn, hố sâu, bẫy chông thu vào và bật lên (2 trạng thái để làm hoạt ảnh), thảm đỏ nâu có viền vàng (ô giữa và ô mép), và một ô đen kín để lấp vùng ngoài tường.
12. Vật trang trí (hàng 8): rương, hũ sành, đầu lâu, thùng gỗ, cần gạt, chìa khóa, hộp gỗ, cây đuốc cắm đất – mỗi vật vẽ trên nền sàn, có viền #14121c và bóng nhỏ phía dưới – phải. Vật nằm giữa ô, chừa ít nhất 1 px quanh mép.
13. Kiểm tra màn ghép thử: file mới 160 × 128 px, dán các ô ghép thành một căn phòng nhỏ: tường bao, góc, cửa, sàn trộn biến thể. Đường nối nào lộ ra thì sửa trên tileset. Đếm màu bằng bản sao Indexed Color: đúng 16 màu. Xuất PNG 100% → dungeon_tiles.png 128 × 128 px.
14. Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 16, Filter Mode (Chế độ lọc ảnh) Point (no filter), Compression None; Sprite Editor › Slice › Grid By Cell Size 16 × 16. Tạo GameObject›2D Object›Tilemap›Rectangular hai lần (Floor, Walls), mở WindowCửa sổ›2D›Tile Palette, Create New Palette rồi kéo các sprite vào. Cài gói 2D Tilemap Extras trong Package Manager để dùng Rule Tile (tự chọn cạnh, góc tường) và Animated Tile (đuốc 3 frame). Walls thêm Tilemap Collider 2D; Main Camera thêm Pixel Perfect Camera với Assets Pixels Per Unit 16.

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

• Bản tileset thứ hai bằng đổi màu: nhân bản file, dùng Magic Wand (Tolerance 0, bỏ Contiguous) đổi dải gạch sang xanh băng và dải đá sang xanh xám – có ngay tầng hầm băng.
• Ô nước động: kết hợp với dự án nước chảy 4 frame ở bài sau để thay ô nước tĩnh bằng Animated Tile.
• Hết khe hở giữa ô: nếu camera di chuyển thấy vạch mảnh giữa các ô, gom tileset vào Sprite Atlas với Padding 2 hoặc 4 và giữ Pixel Perfect Camera – đây là lỗi lấy mẫu tràn mép rất phổ biến.