Sprite Sheet
CSS Sprite Sheet
Sprite Sheet คือรูปภาพขนาดใหญ่ภาพเดียวที่รวมภาพย่อยหลาย ๆ ภาพ (sprites) เข้าด้วยกัน โดยจัดเรียงในตาราง ใช้กันอย่างแพร่หลายในเกม 2D และการพัฒนาเว็บเพื่อลดจำนวนการร้องขอ HTTP และปรับปรุงประสิทธิภาพ
รายละเอียดทางเทคนิค
ในการพัฒนาเว็บ CSS sprites จะใช้ background-position เพื่อแสดงส่วนเฉพาะของภาพรวม ในเกม sprite sheets จะถูกแบ่งเป็นเฟรม animation ตามพิกัด (x, y, width, height) มักจะมีไฟล์ข้อมูลเมตา (JSON หรือ XML) ที่กำหนดพิกัดของแต่ละ sprite
ตัวอย่าง
```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)
```
เครื่องมือที่เกี่ยวข้อง
C
Compress Image
R
Resize Image
C
Crop Image
R
Rotate Image
F
Flip Image
C
Convert Image
W
Watermark Image
S
SVG to PNG
I
Image to Base64
R
Round Corners
A
Add Border
I
Image Filters
A
Adjust Image
B
Blur Image
S
Sharpen Image
M
Make Square
G
Grayscale Image
S
Sepia Image
P
Pixelate Image
S
Strip Image Metadata