Dự án 10: Tile cỏ + đất liền mạch

Tile (ô lát) là một ảnh vuông nhỏ được lặp lại để phủ kín cả bản đồ game. Tile "liền mạch" (seamless) là tile mà khi đặt cạnh nhau, bạn không thấy đường nối. Công cụ bí mật là Filter › Other › Offset (Dịch chuyển (bọc vòng)): nó dời ảnh đi một nửa và cuộn vòng mép, đưa đường nối ra giữa để bạn sửa.

Hình mẫu

Thời gian ước tính: khoảng 60 phút.

Chuẩn bị

• Canvas: đúng 256 × 256 px (lũy thừa của 2: 32, 64, 128, 256… là kích thước engine game xử lý tốt nhất). Zoom 300–400% khi vẽ.
• Brush (Cọ vẽ): Hard Round 4–12 px, Opacity (Độ mờ đục) 100% – cạnh cứng giúp tile sắc nét.
• Công cụ: FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng), Clone Stamp (Con dấu nhân bản) (S) để sửa đường nối.

Các bước

1. Tạo file ⌘ Cmd+N 256 × 256 px, Background Contents: màu #5cc84a (chọn Custom rồi nhập hex). Đây là layer cỏ nền.
2. Mảng cỏ tối: layer Grass Patches. Brush Hard Round 40 px màu #54bd43, chấm vài vòng tròn to nhỏ rải rác. Các mảng này tạo nhịp sáng – tối nhẹ để cỏ không đơn điệu.
3. Mảng đất: layer Dirt. Lasso (Dây thòng lọng) L vẽ một mảng hình củ khoai to ở góc dưới – phải và một mảng nhỏ ở góc trên – trái, tô #7a5230. Cố ý để mảng to chạm hoặc vượt ra mép phải – bước Offset sẽ đưa nó sang mép kia.
4. Đất sáng bên trong: layer Clipping Mask (Mặt nạ cắt) vào Dirt (⌘ Cmd+⌥ Option+G). Vẽ một mảng nhỏ hơn lệch xuống dưới – phải bên trong mảng đất, tô #a0703f – mép trên – trái còn lại màu tối chính là bóng của bờ cỏ đổ xuống chỗ đất lõm. Thêm một đốm #b8834d nhỏ hơn nữa.
5. Viền cỏ trùm lên đất: layer Grass Edge trên Dirt. Brush 6 px màu #5cc84a, vẽ vài răng cưa nhỏ đè lên mép mảng đất – cỏ mọc lấn ra làm ranh giới tự nhiên.
6. Offset lần 1: gộp bản sao để kiểm tra: ⌘ Cmd+⌥ Option+⇧ Shift+E (Stamp Visible – tạo layer mới gộp mọi thứ đang hiển thị). Trên layer đó chạy FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng): Horizontal +128, Vertical +128, Undefined Areas: Wrap Around (cuộn vòng). Giờ 4 mép cũ gặp nhau thành dấu cộng ở giữa ảnh.
7. Sửa đường nối: ngay trên layer đã Offset, dùng Brush với màu lấy bằng Eyedropper (Ống hút màu) (⌥ Option + bấm khi đang cầm Brush) tô xóa mọi vết cắt ngang/dọc ở giữa; mảng đất bị cắt thì vẽ nối lại cho tròn. Clone Stamp S: ⌥ Option+bấm lấy mẫu vùng cỏ đẹp rồi tô lên chỗ nối.
8. Lá cỏ: layer Tufts. Brush 3 px, vẽ các cụm "chữ W" nhỏ 3–4 lá: 6 cụm màu #3f9e3a, 4 cụm màu #9be86a đặt cạnh cụm tối. Rải đều nhưng không thẳng hàng.
9. Sỏi và hoa: layer Pebbles: 3–4 viên sỏi bầu dục #c9bfb4 có viền nâu tối trong mảng đất, đặt lệch nhau. Layer Flowers: 4 chấm trắng nhỏ có nhụy vàng #ffc53d trên cỏ.
10. Offset lần 2 (kiểm tra cuối): Stamp Visible lần nữa, Offset +128/+128 Wrap Around. Nếu còn thấy vạch nối hoặc chi tiết bị cắt, sửa tiếp rồi Offset lại. Khi đạt, Offset thêm một lần để trả ảnh về vị trí cũ (hoặc giữ nguyên – tile liền mạch thì vị trí không quan trọng).
11. Thử lặp 3 × 3: ⌘ Cmd+A chọn tất cả, EditChỉnh sửa›Define Pattern đặt tên "Tile co". Tạo file mới 768 × 768 px, EditChỉnh sửa›FillTô đầy / Độ phủ bên trong Contents: Pattern, chọn "Tile co". Nhìn từ xa: nếu mắt thấy một chi tiết lặp lại đều như hình in, hãy giảm độ nổi bật của chi tiết đó.
12. Xuất: quay lại file 256 px, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG, đúng 256 × 256 px. Lưu PSD giữ layer.

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

• Biến thể: nhân đôi tile, đổi vị trí mảng đất và hoa để có 3 biến thể – xếp xen kẽ khi lát bản đồ sẽ khó thấy lặp.
• Tile chuyển tiếp: làm tile nửa cỏ nửa cát, mép nối liền với tile cỏ ở một cạnh.
• Dùng trong Unity 6: đặt Texture Type Sprite (2D and UI), Pixels Per Unit (Số pixel mỗi đơn vị) 256, Wrap Mode Repeat; tạo Tile Palette trong WindowCửa sổ›2D›Tile Palette rồi vẽ bản đồ bằng Tilemap.