Pengemas Sprite Sheet

• 100 % Privat & Lokal: aset gambar Anda diproses sepenuhnya di dalam ruang memori browser lokal Anda. Tidak ada grafik atau metadata yang bepergian ke server eksternal, memastikan privasi desain absolut dan kepatuhan untuk proyek pribadi dan komersial.
• Tata Letak Pengemasan Optimal: menata ikon menggunakan algoritma pengemasan Growing 2D Binary Tree canggih yang meminimalkan area lembar. Anda juga dapat beralih antara opsi penumpukan linear vertikal dan horizontal standar.
• Generator CSS dan JSON: langsung menyusun kelas CSS responsif dengan posisi latar negatif atau mengekspor peta JSON standar yang kompatibel dengan mesin web dan game (seperti PixiJS, Phaser, dan Cocos2d).
• Inspektur Overlay Interaktif: audit dan pratinjau koordinat yang dikemas secara dinamis. Mengarahkan kursor ke sprite mana pun di dalam peta koordinat yang dihasilkan akan menyorot kotak pembatas persisnya langsung pada lembar canvas.

Browser membatasi jumlah koneksi HTTP bersamaan ke satu host (sering dibatasi 6 koneksi). Ketika situs web bergantung pada puluhan gambar ikon kecil, memuatnya satu per satu menyebabkan latensi jaringan, penundaan antrean, dan pergeseran tata letak kumulatif. Sprite sheet mengatasi ini dengan konsolidasi. Memuat satu gambar yang lebih besar menggabungkan semua payload HTTP menjadi satu aliran koneksi TCP. Selain itu, ini menghilangkan kedip putih visual yang mengganggu yang terjadi ketika browser mencoba memuat gambar status hover terpisah saat interaksi pengguna.

Mengemas beberapa persegi panjang sembarang ke dalam satu area pembatas dengan pemborosan minimal adalah masalah NP-complete. Alat ini menggunakan algoritma pengemasan Growing 2D Binary Tree. Pengemas mulai dari ukuran item pertama dan tumbuh secara dinamis ke kanan atau ke bawah untuk mengakomodasi blok baru, memilih jalur yang menjaga rasio aspek lembar secara keseluruhan mendekati persegi. Mengurutkan item berdasarkan area menurun sebelumnya memastikan blok yang lebih besar ditempatkan lebih dulu, memungkinkan blok yang lebih kecil masuk dengan rapat ke celah yang tersisa.

Setelah dikemas, sprite memerlukan peta koordinat untuk memberi tahu aplikasi di mana setiap ikon berada. Tata letak web mengandalkan kelas sprite CSS. Dengan menetapkan kelas bersama dengan URL gambar latar dan menerapkan offset latar negatif individual (mis. `background-position: -32px -64px`), browser merender blok sub-gambar tertentu. Untuk sistem aplikasi berbasis canvas dan game 2D, hash JSON standar memetakan setiap file yang bernama ke koordinat pembatas persisnya, memungkinkan mesin memotong dan mengiris tekstur secara dinamis di viewport WebGL.