Cách cắt tileset từ một ảnh

Tileset so với sprite sheet: vì sao yêu cầu cao hơn

Bảng sprite chứa các ảnh độc lập. Nếu một khung đi bộ lệch tâm một pixel so với khung tiếp theo, không ai để ý: mỗi khung được vẽ riêng và nhiễu vị trí nhỏ trông như chuyển động tự nhiên. Tileset khác. Mỗi ô được đặt sát cạnh ô lân cận trên lưới, lặp đi lặp lại khắp màn chơi. Lệch một pixel ở một ô không chỉ ảnh hưởng ô đó: nó lặp ở mọi đường nối có ô đó, khiến texture nền đất hoặc tường lát có thể xuất hiện hàng chục đường nối thấy rõ chỉ từ một đường cắt sai.

Đó là toàn bộ ràng buộc thiết kế tileset: đường nối phải không nhìn thấy, nghĩa là các mép phải chính xác đến pixel, nghĩa là ảnh nguồn cần lưới thật có thể tìm được trước khi bạn cắt bất cứ thứ gì.

Chọn kích thước ô

Nếu trích ô từ tài nguyên người khác, kích thước thường đã cố định bởi đồ họa: đếm họa tiết lặp như gạch, bụi cỏ, ván qua rộng rồi chia. Nếu tự định tileset từ tham khảo hoặc texture tạo, kích thước phổ biến 16×16, 32×32, 48×48.

• 16×16 trông như pixel art cổ điển. Nó không dung thứ chi tiết — mỗi ô phải truyền đạt chất liệu (cỏ, đá, nước) bằng rất ít pixel, vốn đã là một kỹ năng nghệ thuật thực sự.
• 32×32 là mặc định hiện đại phổ biến nhất. Đủ chỗ cho chất liệu và bóng đổ mà không cần độ chính xác dưới pixel để đọc rõ ở mức phóng thông thường.
• 48×48 trở lên phù hợp với game có ô lớn hơn trên màn hình hoặc hình vẽ thiên về hội họa, khi bạn muốn thấy chi tiết chất liệu thay vì diện mạo pixel art phẳng.

Dù chọn gì, hãy giữ nhất quán trên toàn bộ tileset và lý tưởng nhất là trên mọi tileset của dự án. Kích thước ô lẫn lộn buộc bạn phải phóng thu hình khi chạy — gây lại đúng vấn đề nhòe mà pixel art cố tránh — hoặc duy trì nhiều hệ lưới riêng trong trình biên tập màn chơi.

Tìm độ lệch khi lưới không bắt đầu 0

Biết ô 32px nên cắt 0, 32, 64, 96… nhưng ô bị nửa, tường thành nhiều sàn hàng này, nhiều tường hàng sau. Lưới thật không bắt đầu góc trái trên mà lệch vài pixel, do viền, lề screenshot hoặc đệm xuất.

Tìm độ lệch bằng zoom pixel, tìm đặc điểm lặp như vữa giữa gạch, bóng đáy cỏ, sáng mép trên. Đo tọa độ lần đầu, kiểm lặp mỗi N pixel nơi N là kích thước ô. Nếu đường vữa đầu ở x = 6 và đường tiếp theo ở x = 38, độ lệch là 6 pixel và dự đoán ô 32 được xác nhận. Áp dụng độ lệch riêng cho từng trục; độ lệch ngang và dọc không liên quan và ảnh hoàn toàn có thể chỉ có một trong hai.

Ô không có khoảng cách và vấn đề màu tràn

Sprite sheet thường có các khoảng trống trong suốt giữa khung. Tileset thường không có — các ô nằm sát nhau, không có khoảng cách, vì chính điều đó cho phép chúng được lát liền mạch. Khi tileset vào engine, điều này gây tác dụng phụ là màu texture tràn: một vệt nhỏ của ô bên cạnh xuất hiện ở mép ô bạn đã đặt.

Tràn màu do cách GPU lấy mẫu texture. Khi ô được vẽ ở kích thước không khớp pixel 1:1 — hơi đổi tỷ lệ hoặc ở vị trí camera dưới pixel — trình kết xuất lấy mẫu pha pixel cạnh ô với phần ngay bên cạnh trong texture nguồn, tức ô lân cận. Cách sửa không phải thêm khoảng cách vào nguồn vì sẽ phá lát ô; dùng lọc point/nearest để không nội suy tràn màu, hoặc để engine tự mở rộng viền một pixel khi đóng gói/nhập. Sprite Atlas của Unity và trình nhập TileSet Godot đều có tùy chọn đệm hoặc mở rộng cạnh cho việc này: bật cho tileset sẽ đổi tỷ lệ hoặc di chuyển ở vị trí không nguyên.

Loại bỏ ô trùng

Sau khi cắt cả lưới, thường có nhiều ô giống hệt hoặc gần giống hệt từng điểm ảnh — một ô cỏ đơn giản có thể xuất hiện bốn lần trong bảng tham chiếu vì ảnh nguồn lặp lại để cân bằng thị giác. Giữ bản trùng không hẳn sai, nhưng làm tài nguyên bộ ô nặng hơn, bảng chọn ô trong trình chỉnh sửa màn chơi khó nhìn hơn, và khiến các chỉnh sửa cho “ô cỏ” về sau phải áp dụng ở nhiều nơi.

Cách đơn giản để phát hiện trùng mà không phải soi hàng chục ô nhỏ: băm dữ liệu pixel thô của từng ô rồi so sánh mã băm. Ô có cùng mã băm giống hệt từng pixel và có thể gộp an toàn. Ô gần trùng, chẳng hạn khác một pixel đổi màu như đuốc sáng và tắt, có mã băm khác và cần người quyết định đó là các ô khác có ý nghĩa hay biến thể đáng giữ riêng.

Đưa vào engine

Unity: Tile Palette

Nhập tileset cắt như Sprite với Sprite Mode Multiple, cắt trong Sprite Editor bằng Grid By Cell Size đúng kích thước ô rồi mở Window → 2D → Tile Palette, tạo bảng màu mới rồi kéo các sprite đã cắt vào. Từ đó, các ô được vẽ trực tiếp lên thành phần Tilemap trong cảnh. Nếu đã cắt các ô PNG riêng ngoài Unity, bạn có thể bỏ hẳn bước Sprite Editor và kéo thẳng thư mục PNG vào bảng màu.

Godot: tài nguyên TileSet

Tạo tài nguyên TileSet trên nút TileMapLayer; trong Atlas source thêm ảnh tileset đã cắt với kích thước ô khớp. Trình nhập Godot còn có Separation và Margin trên nguồn atlas, cho bảng có khoảng cách nhỏ giữa ô thay vì không khoảng cách như trên. Nếu nguồn không có khoảng cách và thấy tràn màu trong cửa sổ editor, bật đệm texture của atlas, sao chép pixel cạnh bên trong để lấy mẫu không chạm ô bên cạnh.

Thứ tự thao tác thực tế

1. Xác định kích thước ô bằng đếm chi tiết lặp trong ảnh.
2. Tìm độ lệch x, y bằng vị trí ô đầu thực bắt đầu.
3. Cắt theo lưới đó. Công cụ có đường kéo được biến bước này thành kiểm tra trực quan thay vì tính mò.
4. So mã băm ô và gộp bản trùng chính xác.
5. Nhập engine với đệm hoặc mở rộng cạnh nếu ô từng hiển thị ở tỷ lệ hoặc vị trí không nguyên.

Câu hỏi thường gặp