Trình tạo sprite sheet

Cách bố cục hoạt động

Trình tạo dùng một bố cục duy nhất và dễ đoán: lưới đều. Bạn đặt số cột, còn số hàng là làm_tròn_lên(hình / cột). Mỗi ô có cùng kích thước vuông (kích thước ô bạn chọn), nên mỗi hình được co giãn để vừa ô của nó, giữ nguyên tỉ lệ, rồi căn giữa. Hình có kích thước khác nhau đều nằm trong các ô bằng nhau, đúng như sprite CSS với background-position mong đợi.

Dạng CSS được tạo

Mỗi hình trở thành một lớp mang tên tệp (.spr-<ten>), kích thước bằng ô và dịch tới ô của nó. Với bốn cột, kích thước ô 128 px và không khoảng đệm, bảng trông như sau:

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

Offset dịch chuyển theo hai chiều: các sprite lấp đầy từng hàng từ trái sang phải, rồi xuống hàng kế tiếp. Lưu PNG là spritesheet.png cạnh CSS của bạn (hoặc sửa url(...) cho khớp đường dẫn của bạn).

Khoảng đệm và lấn màu

Các sprite xếp sát cạnh nhau có thể lấn sang nhau khi trình duyệt co giãn bảng (tỉ lệ pixel không nguyên, biến đổi CSS). Thêm 2 đến 4 pixel khoảng đệm giữa các ô để pixel lân cận không rò sang.

Màn hình mật độ cao (retina)

Không có xuất 2x tự động, nhưng bạn có thể tạo bảng sắc nét hơn một cách đơn giản: chọn kích thước ô lớn hơn (ví dụ 256 px thay vì 128 px) để mỗi sprite mang nhiều pixel hơn, rồi hiển thị nó ở một nửa kích thước CSS. Nhờ đó bạn có sprite sắc nét trên màn hình mật độ cao mà không cần một lượt riêng.

Sprite sheet hay lựa chọn thay thế

• Sprite sheet: bộ biểu tượng cổ điển trong CSS, khung hình game HTML5 và các trang được lợi khi gộp nhiều hình nhỏ vào một tệp.
• Sprite SVG (symbol): tốt hơn cho biểu tượng giao diện hiện đại, co giãn không mất chất lượng, nhận fill của CSS, không phải xoay xở với background-position.
• Phông biểu tượng: hạn chế, nhưng vẫn dùng cho biểu tượng một màu cỡ nhỏ xíu.
• Tệp riêng lẻ với HTTP/2 hoặc HTTP/3: ghép kênh khiến số lượng yêu cầu ít quan trọng hơn trước.