Trình tạo Sprite Sheet
Kết hợp hình ảnh thành sprite sheet với kéo để sắp xếp lại, bố cục lưới, khoảng cách, chế độ tỷ lệ. Xuất PNG/WebP/JPG với dữ liệu JSON atlas cho engine game và CSS.
Sprite sheet là gì và tại sao nên sử dụng?
Sprite sheet là một tệp hình ảnh duy nhất chứa nhiều hình ảnh nhỏ (sprite) được sắp xếp trong lưới. Sử dụng sprite sheet giảm yêu cầu HTTP, cải thiện hiệu suất tải trang và làm cho kết xuất game hiệu quả hơn.
Định dạng hình ảnh nào được hỗ trợ?
Bạn có thể tải lên hình ảnh PNG, JPG, GIF, SVG và WebP. Công cụ hỗ trợ tải lên hàng loạt và dán từ clipboard (Ctrl+V) để quy trình làm việc nhanh chóng.
Những định dạng xuất nào có sẵn?
Xuất sprite sheet dưới dạng PNG (với độ trong suốt), WebP (định dạng hiện đại với kích thước tệp nhỏ hơn) hoặc JPG (tốt nhất cho ảnh không có độ trong suốt). Chọn dựa trên yêu cầu nền tảng mục tiêu của bạn.
Làm thế nào để sắp xếp lại hình ảnh trong sprite sheet?
Kéo và thả hình thu nhỏ của hình ảnh để sắp xếp lại vị trí của chúng trong sprite sheet. Bạn cũng có thể dán hình ảnh trực tiếp từ clipboard bằng Ctrl+V.
Dữ liệu JSON atlas là gì và những engine nào hỗ trợ nó?
Dữ liệu JSON atlas chứa vị trí, kích thước và thông tin khung hình cho mỗi sprite. Nó tương thích với các engine game phổ biến như Phaser, PixiJS, Unity, Cocos2d và nhiều engine khác để trích xuất sprite tự động.
Các chế độ tỷ lệ khác nhau là gì?
Vừa giữ tỷ lệ. Lấp đầy ô và cắt phần dư. Kéo giãn biến dạng để lấp đầy.
Công cụ có hỗ trợ độ trong suốt không?
Có, PNG và WebP giữ nguyên độ trong suốt. Bạn cũng có thể đặt màu nền tùy chỉnh, hữu ích cho xuất JPG không hỗ trợ độ trong suốt.
Khoảng cách ảnh hưởng đến sprite sheet như thế nào?
Khoảng cách thêm không gian giữa các sprite riêng lẻ trong sheet, ngăn chặn rò rỉ hình ảnh khi lấy mẫu kết cấu. Điều này đặc biệt quan trọng đối với các engine game sử dụng bộ lọc tuyến tính.
Tôi có thể sử dụng sprite sheet cho CSS không?
Có, sprite sheet hoạt động tốt cho sprite CSS. Dữ liệu JSON atlas có thể được sử dụng để tạo quy tắc CSS background-position, giảm yêu cầu HTTP và cải thiện hiệu suất tải trang.
Thực tiễn tốt nhất cho kích thước sprite sheet là gì?
Giữ kích thước là lũy thừa của 2 (256x256, 512x512, 1024x1024) để xử lý kết cấu GPU tối ưu. Hầu hết các engine game thích các kích thước này để có hiệu suất và tương thích tốt hơn.
Sprite sheet cải thiện hiệu suất game như thế nào?
Sprite sheet giảm lệnh vẽ bằng cách nhóm nhiều sprite thành một kết cấu duy nhất. Điều này giảm thiểu thay đổi trạng thái GPU, giảm tải bộ nhớ và cho phép kết xuất hiệu quả hơn.
Sự khác biệt giữa sprite sheet và atlas kết cấu là gì?
Sprite sheet thường sắp xếp các khung hình trong lưới đồng nhất, trong khi atlas kết cấu có thể đóng gói các sprite có hình dạng không đều hiệu quả hơn bằng các thuật toán như bin packing.