Dự án 11: Tileset platformer autotile 3 × 3

Ở dự án tile cỏ đất trước đây bạn đã làm một ô lặp liền mạch. Game platformer cần nhiều hơn: mép cỏ ở trên, viền ở hai bên, góc bo tròn, đáy khối. Bộ 3 × 3 = 9 ô là tileset nhỏ nhất cho phép dựng mọi khối đất hình chữ nhật. Engine tự chọn ô đúng theo ô hàng xóm – gọi là autotile.

Hình mẫu

Thời gian ước tính: khoảng 4 giờ: 1 giờ khối liền, 1 giờ mép cỏ và góc, 1 giờ kiểm tra các mép nối, 1 giờ dựng trong Unity.

Chuẩn bị

• Canvas: 144 × 144 px (3 × 48), Transparent. Vẽ ở kích thước thật hoặc gấp 4 (576 × 576) rồi thu nhỏ; bài này mô tả theo cỡ thật.
• Đánh số ô: 1–2–3 hàng trên (góc trái, mép trên, góc phải), 4–5–6 hàng giữa (cạnh trái, ô giữa, cạnh phải), 7–8–9 hàng dưới (đáy trái, đáy, đáy phải).
• Quy tắc nối: ô 2 và 8 phải lặp ngang liền mạch với chính nó; ô 4 và 6 lặp dọc; ô 5 lặp cả hai chiều; ô 1 nối được với ô 2, ô 2 nối với ô 3…
• File mẫu: "Lưới autotile 3 × 3": viền hồng là ranh giới ô, vạch xanh lá ở y = 16 là chân mép cỏ, vạch tím ở y = 8 là đỉnh cỏ.
• Thiết bị: các ngọn cỏ và đá có thể vẽ bằng Pencil (Bút chì)/Brush cứng không lực nhấn – chuột, bút XP-Pen/Huion hay iPad đều như nhau.

Các bước

1. Tạo file 144 × 144 px, Transparent. Lưới: EditChỉnh sửa›PreferencesTùy chọn cài đặt›Guides, Grid & Slices Gridline Every 48 Pixels, Subdivisions 4 (mỗi vạch mảnh 12 px). Kéo "Lưới autotile 3 × 3" vào làm layer trên cùng Opacity (Độ mờ đục) 50%.
2. Vẽ một khối liền: ý tưởng then chốt – không vẽ 9 ô riêng lẻ mà vẽ một khối đất bo góc phủ kín cả 3 × 3 ô, rồi mới cắt ra. Rectangle bo góc 16 px từ (4, 8) tới (140, 140), Fill #9a6340. Như vậy các ô tự khớp với nhau.
3. Mép cỏ lặp theo chu kỳ: layer Grass: dải cỏ phủ từ đỉnh xuống y = 16, mép dưới lượn sóng. Sóng phải lặp đúng chu kỳ 24 px (hoặc 48 px) để ô 2 ghép cạnh ô 2 vẫn liền: vẽ sóng trong đoạn x 48 – 72, nhân đôi và dời đúng 24 px.
4. Viền ngoài và góc: Layer Style Stroke 3 px Inside viền tối cho khối đất và dải cỏ. Viền chỉ nằm ở mép ngoài của khối – các đường ranh giới giữa ô (x 48, x 96…) không có viền.
5. Cỏ rủ ở góc: ô 1 và ô 3 có thêm một chỏm cỏ nhỏ rủ xuống mép ngoài (khoảng 8 × 16 px) – chi tiết này làm góc trông mềm và cho người chơi biết "đây là mép vực".
6. Bóng và sáng đất: layer kẹp vào khối đất: dải tối #6e4428 24 px ở đáy (hàng 7–8–9) và 12 px sát cạnh phải; dải sáng #b97d52 mờ 50% sát cạnh trái. Dải bóng dưới mép cỏ #2f8a3a 4 px và vệt sáng cỏ #a6f07f 4 px ở đỉnh.
7. Đá và chi tiết tránh mép ô: vẽ 5–6 viên đá bầu dục #c9a27a có viền 2 px, mỗi viên nằm hoàn toàn bên trong một ô, cách đường ranh giới ít nhất 6 px. Đá cắt ngang ranh giới sẽ bị "đứt đôi" khi ô được ghép theo thứ tự khác.
8. Ngọn cỏ: các ngọn tam giác nhỏ nhô lên trên mép cỏ, đặt cách đều 24 px (cùng chu kỳ với sóng) – ô 2 lặp lại vẫn đều.
9. Kiểm tra ô giữa (số 5): chọn ô 5 bằng Rectangular Marquee (Khung chọn) 48 × 48 (x 48, y 48), Shift+Ctrl+C, FileTệp›NewTạo mới (Photoshop tự đề xuất 48 × 48), Ctrl+V. FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng) Horizontal +24, Vertical +24, Wrap Around: nếu thấy vết nối hình chữ thập, sửa ở file chính.
10. Kiểm tra ô mép trên (số 2): tương tự sao chép ô 2 ra file riêng, Offset (Dịch chuyển (bọc vòng)) Horizontal +24, Vertical 0 – sóng cỏ và dải bóng phải liền. Kiểm tra ô 8 theo chiều ngang, ô 4 và 6 theo chiều dọc.
11. Ghép thử một màn: tạo file 480 × 270 px nền trời. Sao chép từng ô và ghép: mặt đất 8 ô ngang (1 – 2 – 2 – 2 – 2 – 2 – 2 – 3, dưới là 4 – 5 … – 6) và một bục nổi 3 × 2 (1 – 2 – 3 / 7 – 8 – 9). Mọi mép phải khớp.
12. Xuất: ẩn lưới mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG → ground_tiles.png đúng 144 × 144 px. (Sheet 144 px không phải lũy thừa của 2 – trong Unity nên đưa vào Sprite Atlas, atlas sẽ tự đóng gói thành kích thước chuẩn.)
13. Cắt trong Unity 6: Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 48 (1 ô = 1 đơn vị lưới), Filter Mode (Chế độ lọc ảnh) Bilinear (pixel art thì Point), Compression None. Sprite Editor › Slice › Grid By Cell Size 48 × 48 › Apply.
14. Tile Palette và Rule Tile: Window › 2D › Tile Palette › Create New Palette, kéo 9 sprite vào để tạo Tile. Cài gói 2D Tilemap Extras (Package Manager) rồi Assets › Create › 2D › Tiles › Rule Tile: thêm 9 rule, mỗi rule gán một sprite và đánh dấu ô hàng xóm (mũi tên xanh = có tile, dấu X đỏ = trống). Vẽ bằng Rule Tile, Unity tự chọn góc và cạnh đúng.

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

• Bộ 4 × 4 (16 ô): thêm ô bục mỏng một hàng (trái – giữa – phải) và cột đứng một ô – đủ để dựng bậc thang và cột đá.
• Góc trong: vẽ 4 ô góc trong (khi khối đất hình chữ L) – cần cho tileset dạng 47 ô chuẩn.
• Biến thể ô giữa: vẽ 2 ô số 5 khác nhau (khác vị trí đá) và dùng Random Tile để mặt đất không lặp nhàm chán.