Generator Sprite Sheet

Cara tata letak bekerja

Generator memakai satu tata letak yang dapat diprediksi: kisi seragam. Anda menetapkan jumlah kolom, dan jumlah baris adalah bulatkan_ke_atas(gambar / kolom). Setiap sel berukuran persegi yang sama (ukuran ubin yang Anda pilih), sehingga setiap gambar diskalakan agar pas di selnya dengan rasio aspek dipertahankan lalu diletakkan di tengah. Gambar berukuran berbeda semuanya berakhir di sel yang sama, persis seperti yang diharapkan sprite CSS dengan background-position.

Bentuk CSS yang dihasilkan

Setiap gambar menjadi kelas dengan nama berkasnya (.spr-<nama>), berukuran sebesar ubin dan digeser ke selnya. Dengan empat kolom, ukuran ubin 128 px, dan tanpa jarak, lembarnya tampak seperti ini:

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

Offset bergerak dalam dua dimensi: sprite mengisi setiap baris dari kiri ke kanan, lalu berpindah ke baris berikutnya. Simpan PNG sebagai spritesheet.png di samping CSS Anda (atau ubah url(...) agar cocok dengan jalur Anda).

Jarak dan luber

Sprite yang dikemas tepi ke tepi dapat saling meluber saat browser menskalakan lembar (rasio piksel non-bulat, transformasi CSS). Tambahkan 2 hingga 4 piksel jarak antar sel agar piksel tetangga tidak merembes.

Layar kepadatan tinggi (retina)

Tidak ada ekspor 2x otomatis, tetapi Anda bisa membuat lembar yang lebih tajam dengan cara sederhana: pilih ukuran ubin yang lebih besar (misalnya 256 px alih-alih 128 px) agar setiap sprite membawa lebih banyak piksel, lalu tampilkan pada setengah ukuran CSS. Dengan begitu Anda mendapat sprite tajam di layar berkepadatan tinggi tanpa proses terpisah.

Sprite sheet atau alternatif

• Sprite sheet: set ikon klasik di CSS, bingkai gim HTML5, dan halaman yang diuntungkan dengan menggabung banyak gambar kecil ke satu berkas.
• Sprite SVG (symbol): lebih baik untuk ikon antarmuka modern, menskala tanpa kehilangan kualitas, menerima fill CSS, tanpa repot dengan background-position.
• Font ikon: terbatas, tetapi masih dipakai untuk ikon satu warna berukuran mungil.
• Berkas terpisah dengan HTTP/2 atau HTTP/3: multiplexing membuat jumlah permintaan tidak sepenting dahulu.