This page was machine-translated. Spotted a mistake?Help improve it.
Skip to content

Sprite Sheet

Menggabungkan beberapa gambar menjadi satu grid sprite sheet. Setiap gambar diubah ukurannya agar sesuai dengan dimensi gambar pertama dan ditempatkan ke dalam grid. Mengembalikan gambar sprite sheet beserta metadata koordinat per frame.

API Endpoint

POST /api/v1/tools/image/sprite-sheet

Menerima data formulir multipart dengan dua atau lebih file gambar dan field JSON settings.

Parameters

ParameterTypeRequiredDefaultDescription
columnsintegerNo4Jumlah kolom dalam grid (1-16)
paddingintegerNo0Padding antar sel dalam piksel (0-64)
backgroundstringNo"#ffffff"Warna latar belakang hex
formatstringNo"png"Format keluaran: png, webp, atau jpeg
qualityintegerNo90Kualitas keluaran (1-100)

Example Request

bash
curl -X POST http://localhost:1349/api/v1/tools/image/sprite-sheet \
  -H "Authorization: Bearer si_your-api-key" \
  -F "[email protected]" \
  -F "[email protected]" \
  -F "[email protected]" \
  -F "[email protected]" \
  -F 'settings={"columns": 2, "padding": 4, "format": "png"}'

Example Response

json
{
  "jobId": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "downloadUrl": "/api/v1/download/a1b2c3d4-e5f6-7890-abcd-ef1234567890/sprite-sheet.png",
  "originalSize": 120000,
  "processedSize": 95000,
  "frames": [
    { "index": 0, "left": 0, "top": 0, "width": 128, "height": 128 },
    { "index": 1, "left": 132, "top": 0, "width": 128, "height": 128 },
    { "index": 2, "left": 0, "top": 132, "width": 128, "height": 128 },
    { "index": 3, "left": 132, "top": 132, "width": 128, "height": 128 }
  ],
  "cols": 2,
  "rows": 2,
  "cellWidth": 128,
  "cellHeight": 128,
  "canvasWidth": 260,
  "canvasHeight": 260
}

Notes

  • Menerima 2 hingga 64 gambar. Semua gambar diubah ukurannya agar sesuai dengan dimensi gambar pertama yang diunggah.
  • Array frames memberikan koordinat piksel yang tepat dari setiap frame dalam keluaran, cocok untuk definisi sprite CSS atau peta frame game engine.
  • Jumlah baris dihitung secara otomatis dari jumlah gambar dan nilai columns.
  • Gunakan parameter padding untuk menambahkan jarak antar sel. Warna background terlihat di area padding dan sel-sel kosong yang tersisa di bagian akhir.
  • Masukan HEIC, RAW, PSD, dan SVG otomatis didekode sebelum diproses.