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.
Jawaban:
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:
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
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:
Singkatnya
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 ):
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.