Format gambar mana yang digunakan untuk sprite di game HTML5?

Dalam permainan HTML5 2D, format gambar apa yang terbaik untuk digunakan dan mengapa? Haruskah saya menggunakan format berbeda dalam situasi yang berbeda? Misalnya, .png untuk gambar latar belakang, .jpeg untuk bingkai animasi dan sebagainya ...

Bagian "mengapa" penting bagi saya. Itu tidak benar-benar harus dilokalisasi ke HTML5, itu bisa menjadi saran umum juga.

Format gambar hanya cara untuk menyimpan data mentah piksel, sehingga selama Anda menggunakan bitmap, format tersebut biasanya tidak membuat perbedaan dalam eksekusi setelah langkah pemuatan. Yang penting adalah data piksel yang dipasok ke API grafik. Ada tiga format yang biasa digunakan di web:

.gif Format GIF (sekarang sudah usang) digunakan untuk gambar dengan 256 warna atau kurang, yang mengarah ke ukuran yang sangat kecil. GIF juga sering digunakan untuk animasi. Ketika menggunakan hanya 256 warna atau kurang, itu adalah format lossless, yang berarti bahwa tidak ada kualitas yang hilang dalam hal kompresi. Kalau tidak, variasi warna harus dikurangi ke 256, yang mengarah ke pengurangan kualitas.

.png Format Grafik Jaringan Portable, seperti yang saya kira, adalah format gambar yang paling banyak digunakan, karena format ini memiliki tingkat kompresi yang baik sambil dapat menyimpan lebih banyak warna daripada GIF. PNG juga mampu tembus cahaya (atau biasa disebut transparansi, yang merupakan nama yang salah karena suatu piksel harus 100% tembus disebut transparan). Ini juga merupakan format lossless dan bertujuan untuk meningkatkan dan mengganti GIF pada tahun 2006 ( sumber , paragraf pertama). Saya pribadi menggunakannya sebagai tipe gambar di situs web dan di game.

.jpeg Format JPEG biasanya digunakan untuk foto dan sebagainya. Itu tidak mampu tembus cahaya, juga tidak menjamin kompresi lossless. Adalah umum untuk menentukan kualitas saat mengompresi, yang mengarah pada pertukaran antara ruang dan kualitas.

Mari kita bahas beberapa use case:

• Karya seni atau seni yang kompleks umumnya baik untuk disimpan dalam format JPEG, karena dirancang untuk jenis gambar itu.
• Sprite paling baik disimpan di PNG, terutama ketika variasi warnanya rendah.
• Sulit untuk menentukan di mana Backgrounds harus disimpan. Aturan umum akan menjadi seperti: Jika itu adalah gambar atau seni kompleks yang melibatkan beragam warna, ambil JPEG, jika tidak PNG.
• Sebuah Ikon mungkin harus gambar PNG, bahkan jika itu menggunakan kurang dari 256 warna, karena GIF adalah, seperti disebutkan di atas, digantikan oleh PNG.

Ingatlah bahwa konsumsi memori dan kinerja API grafik biasanya sama antara format-format tersebut. Yang penting adalah ukuran dan kecepatan pemuatan (Anda dapat menyelami algoritma dari format ini jika Anda ingin memperkirakan biaya pemuatan). Konsumsi memori gambar apa pun dalam keadaan mentah biasanya ditentukan oleh width*height*4byte aturan umum untuk format piksel RGBA, yang merupakan yang paling umum.

Hanya beberapa hal untuk ditambahkan ke jawaban @ Marco:

.gif sangat ketinggalan jaman. Saya benar-benar akan menghindari menggunakan file .gif sebanyak mungkin. Saya pikir orang-orang hanya menggunakannya hari ini karena animasi dalam browser, dan animasi png tidak didukung dengan baik saat ini.

Jadi yang Anda miliki adalah jpg dan png.

• PNG: Tidak rugi . Satu-satunya hal yang Anda pertimbangkan di sini adalah tingkat kompresi yang Anda dapatkan. Umumnya melakukan pekerjaan yang baik mengompresi blok warna solid , tetapi pekerjaan yang buruk mengompresi adegan dengan banyak variasi.

• JPG: Melakukan pekerjaan yang mengerikan dengan blok warna solid (keduanya kehilangan detail dan membutuhkan lebih banyak ruang daripada png) tetapi pekerjaan yang hebat dengan gambar dengan banyak variasi (kompresi yang baik, kehilangan kualitas gambar yang hampir tidak terlalu mencolok).

Sebagai contoh

4Kb Megaman, dalam format PNG:

Gambar yang sama ini berukuran 36Kb dalam format JPG

Dan kehilangan detail (yang datang GRATIS! Dengan kompresi jpg)

Jadi di sini, dengan blok warna gambar yang solid, kami kehilangan detail dan mengeluarkan ukuran tambahan dengan menggunakan JPG . Kesimpulan: jangan gunakan jPG untuk gambar dengan blok warna solid yang besar.

Sekarang, pikirkan adegan warna tinggi:

1,63 MB PNG:

The 277 k JPG:

perkiraan kerugian (saya menggunakan jpg untuk mengunggah ini! tapi itu menunjukkan kerugiannya kepada Anda

Singkatnya

• Gunakan PNG untuk gambar dengan blok warna solid, yaitu sprite bergaya NES .
• Gunakan JPG untuk gambar dengan banyak variasi warna. Ini seperti, gambar lain, terutama latar belakang .

Mari kita lanjutkan abstrak pertanyaannya, lalu:

Dalam game yang berjalan di platform yang ditentukan, apa pertimbangan media yang digunakannya?

Pertimbangan # 1: ukuran, alias kecepatan memuat

Tidak peduli platform dan tidak peduli permainan dan tidak peduli jenis media, faktanya adalah bahwa ia harus dibawa ke dalam konteks untuk rendering. Pada platform berbasis web, ini berarti mengunduh. Pada lingkungan atau konsol desktop, itu berarti memuat dari media penyimpanan lokal. Memuat media Anda membutuhkan waktu. Platform berbasis web dapat sangat lumpuh jika banyak media perlu diunduh melalui koneksi yang lambat.

Pertimbangan # 2: konsumsi memori

Terkait dengan, tetapi tidak sama dengan ukuran. Sepotong media dapat dikompresi saat berada di disk atau dalam paket atau apa pun, tetapi begitu dimuat sebagai buffer tekstur atau suara untuk sesuatu itu mungkin sedikit lebih besar. Perangkat yang menjalankan permainan Anda tidak memiliki memori yang tak terbatas.

Pertimbangan # 3: kualitas dan gaya

Apakah media memiliki kualitas yang memadai? Ini bisa sangat penting untuk gim Anda, dan sering bertentangan dengan pertimbangan ukuran. Sangat sering dibutuhkan keseimbangan di antara keduanya. Beberapa gim memiliki grafik yang sangat sederhana (minecraft) namun sangat sukses. Yang lain memiliki grafik yang sangat luar biasa yang menghabiskan banyak sekali memori, tetapi memberikan kualitas yang mendalam dengan latar belakang yang tampak menakjubkan. Beberapa permainan lolos dengan blip dan bloop untuk efek suara, sementara yang lain perlu 41k musik stereo.

Jadi, berdasarkan yang paling penting, Anda membuat keputusan yang tepat untuk gim Anda. Keputusannya adalah per game, tidak satu ukuran cocok untuk semua.

Secara umum, Anda menggunakan filesize terkecil yang masih memberikan kualitas gambar yang dapat diterima. Selain itu, png mendukung alpha sehingga Anda tidak perlu berurusan dengan gambar tambahan untuk menangani lapisan alpha.

Apa / kapan menggunakan png untuk ( secara umum ):

• ketika Anda perlu menggunakan lapisan alfa
• gambar kartun / gambar seperti vektor yang ingin Anda pertahankan garis tajamnya.
• gambar dengan sejumlah kecil warna

PNG memang lossless, tetapi kedalaman warnanya bisa diubah.

Gunakan jpg untuk kasing yang tersisa - gambar fotografi, lukisan, gambar dengan banyak detail kecil, warna dan gradien. Jika Anda mencoba menggunakan PNG untuk menyimpan gambar-gambar ini, Anda akan melihat ukuran file jauh lebih besar daripada jpg.

Alat-alat seperti adobe image ready akan memberi Anda pratinjau gambar Anda bersama dengan filesize dalam berbagai format dan pengaturan kualitas.