Trình tạo Sprite Sheet

About Trình tạo Sprite Sheet

Last updated: May 2026

OptiPix Sprite Sheet Generator kết hợp nhiều hình ảnh thành một sprite sheet được tối ưu hóa, với CSS, tọa độ JSON và biến SCSS sẵn sàng để dán. Chọn bố cục: dải ngang, dải dọc, lưới (số cột tùy chỉnh) hoặc đóng gói (đóng gói vào thùng để lãng phí không gian tối thiểu). Đặt khoảng cách giữa các sprite để ngăn chặn hiện tượng chảy cạnh. Đầu ra là một sprite sheet PNG duy nhất cộng với CSS được tạo cho mọi sprite ('.sprite-icon-home { background-position: -0px -0px; … }'), một bản đồ tọa độ JSON và các biến SCSS. Hỗ trợ tỷ lệ @1x và @2x Retina. Mỗi sprite được đặt tên theo tên tệp nguồn của nó. Mọi thứ đều chạy cục bộ - hình ảnh của bạn không bao giờ rời khỏi thiết bị của bạn. Được xây dựng cho các nhà phát triển trò chơi, các nhà phát triển web sử dụng CSS sprite và bất kỳ ai muốn đóng gói các biểu tượng nhỏ thành một yêu cầu mạng duy nhất.

How It Works

Mỗi hình ảnh đầu vào được tải vào bộ nhớ; thuật toán bố cục đã chọn (dải, lưới hoặc đóng gói thùng dạng kệ) tính toán tọa độ (x, y, w, h) cho mỗi sprite; sprite sheet được hiển thị trên một canvas; CSS / JSON / SCSS được tạo từ cùng một bản đồ tọa độ.

Use Cases

• •Đóng gói các biểu tượng UI thành một sprite sheet PNG + CSS duy nhất
• •Tạo một bản đồ sprite cho trò chơi 2D trong Phaser hoặc Pixi
• •Kết hợp các biểu tượng mạng xã hội thành một sprite CSS để trang web nhanh hơn
• •Đóng gói các khung hoạt ảnh nhân vật vào một dải ngang
• •Xây dựng một sprite sheet @2x sẵn sàng cho Retina từ các hình ảnh nguồn

You Might Also Like

If you find Trình tạo Sprite Sheet useful, check out these related tools: Image Crop, Image Resizer, and Format Converter. All tools run entirely in your browser with no uploads or signups required.