Lộ trình › Thực hành công cụ › Bài 51/158

Làm tile cỏ liền mạch (Filter Offset)

Biến một ô cỏ bị lộ đường nối thành tile lặp liền mạch: Offset nửa cạnh với Wrap Around, xóa vết nối bằng Clone Stamp và kiểm tra bằng Define Pattern.

Nhập môn 30 phút ★★★ Khó Hướng dẫn cho Windows · đổi sang macOS

Photoshop hiển thị tiếng Anh. Từ có gạch chân chấm là thuật ngữ trên giao diện — chạm để xem nghĩa, hoặc tra Từ điển Anh–Việt.

File mẫu để luyện tập

Tải về rồi mở bằng Photoshop: FileTệp›OpenMở (Ctrl+O).

Nền cỏ, đất, đá trong game 2D được ghép từ một ô tile lặp đi lặp lại. Nếu mép trái không khớp mép phải, người chơi sẽ thấy một lưới ô vuông rất xấu. Offset (Dịch chuyển (bọc vòng)) (Dời ảnh) là bí quyết: nó kéo các mép vào giữa ảnh để bạn sửa.

Mục tiêu

  • Kiểm tra tile bằng Define Pattern (Định nghĩa mẫu lặp) và Fill với Pattern.
  • Dùng FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng) với Wrap Around (quấn vòng).
  • Xóa đường nối bằng Clone Stamp (Con dấu nhân bản) và Spot Healing Brush (Cọ chữa lành) mà không làm hỏng mép.

Chuẩn bị

Tải tile-co-chua-lien.png (1024 × 1024 px). Ảnh có tông sáng ở góc trên trái, tối ở góc dưới phải và vài hòn đá bị cắt ở mép – lặp lại sẽ lộ vết nối rõ.

Các bước thực hiện

  1. Mở file. Thử lặp trước: EditChỉnh sửa›Define Pattern, đặt tên Grass Test. Tạo file mới 2048 × 2048 px, EditChỉnh sửa›FillTô đầy / Độ phủ bên trong (Shift+F5), Contents Pattern, chọn Grass Test. Bạn sẽ thấy rõ các đường nối hình chữ thập. Đóng file thử (không lưu).
  2. Quay lại tile, nhấn Ctrl+J nhân bản layer để giữ bản gốc. Làm việc trên layer bản sao.
  3. Vào FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng): Horizontal +512 pixels right, Vertical +512 pixels down (đúng một nửa cạnh), Undefined Areas chọn Wrap Around. OK.
  4. Giờ bốn mép ảnh đã khớp nhau hoàn hảo, còn đường nối chạy thành dấu cộng ở chính giữa. Hòn đá bị cắt nằm ngay trên đường nối.
  5. Tạo layer trống Fix. Nhấn S (Clone Stamp): Sample Current & Below, Hardness (Độ cứng cọ) 30%, cỡ 80 px, Opacity (Độ mờ đục) 100%.
  6. Alt + nhấp vào vùng cỏ bên cạnh, tô dọc theo đường nối dọc rồi đường nối ngang. Đổi điểm lấy mẫu thường xuyên. Với hòn đá bị cắt: tô cỏ phủ lên nửa viên đá, hoặc Alt + nhấp một viên đá nguyên vẹn khác rồi in chồng lên.
  7. Chênh lệch sáng tối hai bên đường nối: dùng Clone Stamp cỡ lớn 200 px, Hardness 0%, Opacity 30%, tô nhiều lần để hòa dần. Vệt nhỏ còn sót: Spot Healing Brush J.
  8. Quan trọng: chỉ sửa ở vùng giữa, tránh xa 4 mép ảnh khoảng 40 px – mép đã khớp nhau, sửa vào sẽ làm lệch lại.
  9. Gộp Fix xuống: chọn nó và nhấn Ctrl+E. Chạy lại Offset (+512, +512, Wrap Around) để đưa ảnh về vị trí cũ và soi lại lần nữa.
  10. Kiểm tra cuối: Define Pattern và Fill vào file 2048 × 2048 như bước 1 – không còn thấy lưới ô. Xuất tile bằng Export As (Xuất ra (tùy chỉnh)), PNG, 1024 × 1024.

Kết quả mong đợi

Tile lộ vết nối → Offset nửa cạnh với Wrap Around → xóa đường nối ở giữa → lặp 2×2 không còn vết
Tile lộ vết nối → Offset nửa cạnh với Wrap Around → xóa đường nối ở giữa → lặp 2×2 không còn vết

Khi lặp 2 × 2 hoặc nhiều hơn, cỏ trải liền một mảng, không còn đường thẳng, không còn nửa hòn đá bị cắt, sáng tối đồng đều.

Dùng trong Unity: nhập PNG vào Unity, đặt Wrap Mode là Repeat nếu dùng làm texture lặp; nếu làm Tilemap, cắt ô trong Sprite Editor và chọn Pixels Per Unit (Số pixel mỗi đơn vị) bằng kích thước ô. Kích thước 1024 (lũy thừa của 2) giúp nén texture tốt nhất.
Mẹo: sau khi vá xong, chạy Offset thêm một lần với giá trị lẻ (ví dụ +300, +200) để soi những đường nối "ẩn" mà bạn còn bỏ sót.
Lỗi hay gặp: dùng Repeat Edge Pixels hoặc Set to Transparent thay vì Wrap Around – ảnh bị kéo sọc hoặc thủng lỗ. Luôn chọn Wrap Around khi làm tile.

Mẹo & trick học nhanh

Lặp lại filter vừa dùng

Offset vừa chạy nằm ngay dòng đầu tiên của menu Filter – bấm vào đó để chạy lại với cùng thông số.

Chi tiết lớn nằm giữa

Khi tự vẽ tile, đặt các chi tiết nổi bật (hòn đá, bông hoa) ở giữa ảnh, tránh cắt ngang mép.

Tránh điểm nhấn quá nổi

Một viên đá quá khác biệt sẽ lặp lại thành hàng dễ thấy. Tile tốt có chi tiết đều, không có vật nào "hút mắt".

Kiểm tra nhanh

1 Với tile 1024 × 1024 px, nên Offset bao nhiêu để đưa đường nối vào chính giữa?
2 Undefined Areas trong hộp Offset phải chọn gì khi làm tile?
3 Sau khi Offset, vì sao không nên tô sửa sát 4 mép ảnh?

Bài tập: Tile cỏ lặp liền mạch

Làm trong Photoshop rồi nộp file. Máy chấm kiểm tra các yêu cầu kỹ thuật và chỉ cách sửa từng lỗi; giáo viên chấm thêm phần thẩm mỹ.

Làm bài tập