Tạo sprite sheet

Gộp nhiều ảnh thành bảng sprite với tọa độ CSS, SCSS hoặc JSON

👇 Cuộn xuống để xem hướng dẫn nhanh từng bước

Thả các sprite ở đây

hoặc nhấn bất kỳ đâu để duyệt tệp

PNGJPGWEBPGIF

Đã tạo CSS

Tải ảnh tạo mã

Các lớp CSS và tọa độ JSON sẽ xuất hiện ở đây

Trước khi bắt đầu với Tạo sprite sheet

Đóng gói nhiều ảnh vào sprite sheet trong trình duyệt, với điều chỉnh khoảng đệm và tọa độ CSS, SCSS hoặc JSON.

Phù hợp nhất cho

Gộp khung trò chơi hoặc biểu tượng giao diện riêng thành atlas PNG
Tạo tọa độ CSS, SCSS hoặc JSON cùng bảng
Tạo bảng xếp theo hàng đơn giản trực tiếp trong trình duyệt

Biết trước bắt đầu

Bộ đóng gói theo hàng, không tối ưu bin packing đa dụng
Khoảng đệm và tỷ lệ ảnh hưởng kích thước sheet cuối cùng
Lượt lớn dùng bộ nhớ khi mọi ảnh giải mã

Tiếp tục quy trình

Cắt sprite sheetTách atlas hiện có thành khung riêng.Phóng lớn pixel artPhóng khung pixel art trước đóng gói.Nén ảnhGiảm sheet đã xuất để phân phối.Hướng dẫn đóng gói sprite atlasTìm hiểu đệm, lũy thừa hai và tràn màu.Hướng dẫn sprite CSSQuyết định khi nào sprite CSS còn hợp lý.Nhập sprite sheet UnityĐưa atlas đã tạo vào Unity.

Cách dùng Tạo bảng sprite

1Thêm ảnh

• Nhấn “Thêm ảnh” hoặc kéo thả ảnh sprite
• Hỗ trợ định dạng PNG, JPG, JPEG, WebP
• Dùng Tối ưu tự động để tối ưu tự động

2Cấu hình canvas

• Canvas: Đặt kích thước (chế độ Tùy chỉnh/Tối đa)
• Đổi kích thước: Đổi cỡ sprite bằng thanh phần trăm
• Khoảng cách: Điều chỉnh đệm giữa các sprite

3Tạo mã

• Định dạng: Chọn đầu ra CSS, SCSS hoặc JSON
• Đặt tên: Đặt mẫu tên sprite
• Sắp xếp: Sắp theo kích thước hoặc tên

4Tải tài nguyên

• Nhấn “Tải PNG” để lấy ảnh sprite sheet
• Nhấn “Tải mã” để lấy tọa độ CSS/JSON
• Dùng “Xóa” để bắt đầu lại với sprite mới

Tính năng chính:

Đóng gói theo hàng, điều chỉnh đệm

Đổi kích thước sprite trước khi đóng gói

Đầu ra CSS, SCSS & JSON

Chạy trong trình duyệt, không tải lên

Câu hỏi về tạo sprite sheet

Công cụ tạo sprite sheet làm gì?

Nó đóng tệp ảnh riêng thành atlas. Giữ sprite liên quan cùng nhau giúp phân phối, tọa độ tạo cho CSS/mã game biết nơi sprite ở.

Tôi có thể xuất những định dạng mã nào?

Công cụ tạo CSS, SCSS hoặc JSON tọa độ cùng PNG sheet. JSON có vị trí, cỡ khung để chuyển theo định dạng engine/ứng dụng cần.

Ảnh của tôi có được tải lên máy chủ không?

Không. Ảnh giải/đóng trong trình duyệt. Nguồn và bảng tạo không gửi máy chủ ImageMint.

Vì sao đệm quan trọng trong sprite atlas?

Khoảng đệm tạo không gian giữa sprite cạnh nhau. Không đủ khoảng cách, lọc texture hoặc vẽ có co giãn có thể lấy mẫu sprite gần đó và gây lem màu ở mép.

Quy trình sprite liên quan

Để cắt atlas sẵn trở lại khung riêng, dùng Cắt sprite sheet . Phần hướng dẫn đóng gói sprite atlas giải thích đệm và màu tràn ở mép. Để tìm hiểu tiếp theo từng engine, xem Hướng dẫn nhập Unity và Hướng dẫn nhập Godot.