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.
Cách sử dụng Trình tạo Sprite Sheet
Ghép nhiều ảnh thành một sprite sheet ngay trong trình duyệt. Kéo để sắp xếp lại khung hình, tinh chỉnh lưới và khoảng đệm, rồi xuất atlas PNG/WebP/JPG kèm dữ liệu JSON cho game engine và CSS sprite. Mọi xử lý đều cục bộ.
- Thêm ảnh của bạn và dùng nút + với − để đặt Columns và Rows của lưới.
- Đặt Padding (px) để chừa khoảng trống giữa các sprite và tránh rò rỉ texture.
- Để Sprite Size ở Auto để khớp khung lớn nhất, hoặc nhập kích thước cố định cho các ô đều nhau.
- Chọn Scale Mode — Fit, Fill hoặc Stretch — để điều chỉnh cách mỗi ảnh nằm trong ô của nó.
- Chọn Background (Transparent, White, Black hoặc Custom), đặt Format thành PNG, WebP hoặc JPG và đặt tên tệp ở Filename.
- Kéo các hình thu nhỏ để sắp xếp lại khung — tọa độ atlas tự cập nhật — rồi xuất sheet cùng tệp JSON.
Dùng ít nhất 2 px khoảng đệm để các sprite kề nhau không bị lẫn màu khi texture được thu phóng hay làm mượt trong engine.
Công cụ liên quan
- Máy tính Chmod Máy tính chmod trực tuyến miễn phí để trực quan hóa và tính toán quyền tệp Linux với hộp kiểm. Chuyển đổi ngay lập tức giữa ký hiệu số (755, 644) và tượng trưng (rwxr-xr-x). Hỗ trợ quyền đặc biệt như setuid, setgid, sticky bit.
- Bảng ASCII Tham khảo mã hóa ký tự ASCII đầy đủ với mã thập phân, thập lục phân, bát phân, nhị phân, thực thể HTML và mô tả ký tự. Tìm kiếm và lọc tức thì.
- Trình kiểm tra yêu cầu HTTP Kiểm tra API REST trực tiếp trong trình duyệt. Gửi yêu cầu GET, POST, PUT, DELETE với header, body và tham số tùy chỉnh. Xem trạng thái, header và body JSON phản hồi ngay lập tức.
- Trình tạo .htaccess Tạo quy tắc .htaccess Apache cho chuyển hướng, viết lại, tiêu đề bảo mật, bộ nhớ đệm và hơn thế nữa.
- Trình tạo Robots.txt Trình tạo robots.txt trực tuyến miễn phí. Tạo và tùy chỉnh tệp robots.txt để kiểm soát việc thu thập dữ liệu của công cụ tìm kiếm, quản lý quyền truy cập của trình thu thập và tối ưu hóa SEO cho trang web của bạn.
- Trình tạo Sitemap Trình tạo sitemap XML trực tuyến miễn phí. Thêm URL, đặt mức ưu tiên và tần suất, tạo sitemap SEO ngay lập tức.
- GIF Tách Khung Hình Trích xuất và tải xuống khung hình riêng lẻ từ hoạt ảnh GIF dưới dạng PNG hoặc sprite sheet. Công cụ trực tuyến miễn phí với xem trước và xuất ZIP.
- GIF Đảo Ngược Đảo ngược thứ tự phát hoạt ảnh GIF trực tuyến miễn phí. Tải lên, xem trước và tải xuống ngay lập tức.