Sprite Sheet
Sprite Sheet (Bản đồ Ảnh)
Tệp ảnh đơn kết hợp nhiều ảnh nhỏ hơn được sắp xếp trong lưới, cho phép trình duyệt hoặc engine trò chơi hiển thị các đồ họa riêng lẻ bằng cách chọn vùng hình chữ nhật từ trang lớn hơn.
Chi tiết kỹ thuật
Sprite sheet giảm yêu cầu HTTP bằng cách gộp nhiều biểu tượng hoặc khung hoạt ảnh vào một tệp. CSS sprites sử dụng background-position để hiển thị các vùng cụ thể: .icon { background: url(sprites.png) -64px -32px; width: 32px; height: 32px; }. Sprite sheet trò chơi lưu trữ các khung hoạt ảnh theo trình tự, tiến vùng hiển thị mỗi khung. Các công cụ như TexturePacker hoặc ShoeBox tối ưu mật độ đóng gói bằng cách sắp xếp sprites để giảm thiểu không gian lãng phí. Kỹ thuật này đã trở nên ít quan trọng hơn với ghép kênh HTTP/2 nhưng vẫn có giá trị cho hoạt ảnh trò chơi và bộ biểu tượng được tải dưới dạng một texture duy nhất.
Ví dụ
```javascript
// Sprite Sheet: processing with Canvas API
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(sourceImage, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// Process pixels in imageData.data (RGBA array)
```