Softonic

Generator Sprite Sheet

Langkah / 3
Memulihkan berkas yang dipilih...

Lepaskan sekumpulan gambar dan generator menatanya pada kisi seragam serta menggambar satu PNG sprite sheet di browser Anda, lalu menghasilkan CSS dengan offset background-position per sprite. Semua berjalan secara lokal di kanvas, jadi tidak ada yang diunggah ke server. Berguna untuk set ikon, bingkai gim retro, dan status antarmuka saat Anda ingin satu berkas alih-alih banyak gambar terpisah. Anda mengatur jumlah kolom, ukuran ubin, jarak antar sel, dan latar (transparan, putih, atau hitam).

Cara sprite sheet dibuat

  1. 1

    Lepaskan gambar Anda

    Tambahkan berkas PNG, JPG, atau WebP. Ubah urutannya dengan tombol naik/turun atau hapus bingkai mana pun; lembar dibangun ulang seketika.

  2. 2

    Atur kisi

    Pilih jumlah kolom; jumlah baris mengikuti berapa banyak gambar yang Anda tambahkan. Setiap gambar diskalakan agar pas dalam satu ubin persegi, dengan rasio aspek dipertahankan dan diletakkan di tengah.

  3. 3

    Sesuaikan ukuran ubin dan jarak

    Pilih ukuran ubin dalam piksel dan tambahkan jarak antar sel agar sprite bersebelahan tidak meluber saat diskalakan.

  4. 4

    Unduh PNG dan salin CSS

    Simpan sprite sheet sebagai satu PNG dan salin kelas CSS yang dihasilkan, satu aturan `.spr-nama` per gambar dengan lebar, tinggi, dan background-position.

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.

Kontrol Rentang Efek
Kolom 1 hingga 16 Sprite per baris; baris dihitung otomatis
Ukuran ubin 32 hingga 512 px Sel persegi tempat setiap gambar dipaskan
Jarak 0 hingga 64 px Celah transparan antar sel agar tidak meluber saat diskalakan
Latar Transparan / Putih / Hitam Isian di belakang sprite pada PNG keluaran

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.

Pertanyaan yang Sering Diajukan

Gambar Anda tetap di browser. Dalam alur bertahap, browser ini menyimpan sementara file gambar yang dipilih dan tata letaknya di tab ini hingga 30 menit. Tidak ada yang dikirim ke server atau ditambahkan ke URL.

Bisa, tetapi SVG inline atau sprite SVG <symbol> biasanya lebih cocok untuk kerangka kerja berbasis komponen. Sprite sheet CSS bersinar saat banyak gambar ditampilkan sekaligus di halaman statis.

Setel jumlah kolom sama dengan jumlah bingkai agar setiap bingkai berada di satu baris, lalu kendalikan dengan animation-timing-function: steps(N) CSS dan background-position yang melompat dari sel ke sel. Cocok untuk animasi berulang singkat (pemuat, status diam).

Setiap sel kisi berukuran persegi yang sama (ukuran ubin yang Anda pilih), jadi setiap gambar dipaskan ke selnya dan diletakkan di tengah. Jika sprite Anda sudah berupa persegi identik, setel ukuran ubin yang sesuai dan mereka lolos tanpa perubahan.

Alat Terkait

Pembuat Kertas Paranada

Buat kertas paranada siap cetak: paranada kosong, kunci G atau F, paranada ganda untuk piano, atau tablatur gitar. Atur jumlah, jarak garis, A4 atau Letter, dan margin, lalu unduh PDF atau SVG.

Pembuat Mosaik LEGO

Ubah foto menjadi rancangan mosaik persegi berukuran 16, 32, 48, atau 64 sel per sisi. Lihat perkiraan warna, hitung pelat 1×1, dan unduh panduan bernomor.

Pembuat kertas grafik

Buat kertas grafik siap cetak secara online: pilih kisi kotak atau titik, atur jarak dalam mm, pilih A4 atau Letter dan warna garis khusus, lalu cetak atau unduh SVG yang tajam.

Pemilih Warna Material Design

Jelajahi palet warna Material Design. Salin nuansa mana pun (dari 50 hingga A700) dalam format HEX, RGB, atau HSL dengan sekali sentuh.

Pembuat Avatar

Buat avatar ilustrasi datar di browser Anda. Pilih warna kulit, rambut, mata, mulut, pakaian, latar belakang, dan nama tampilan opsional, lalu unduh SVG atau PNG.

Pembuat Tiket Undian

Buat lembar tiket pribadi dua bagian bernomor berurutan untuk acara informal. Cetak semua halaman A4 atau US Letter, atau unduh halaman saat ini.

Alat ini tersedia dalam bahasa lain