Cara Menyesuaikan Seni Piksel Resolusi Tinggi untuk Paparan Kecil Tanpa Kabur

Imej sumber beresolusi tinggi mengandungi lebih banyak piksel daripada yang boleh dipaparkan oleh destinasi. Proses ubah saiz perlu menggabungkan atau membuang maklumat daripada imej sumber. Penapis licin seperti interpolasi dwilinear mengira warna output daripada piksel berdekatan; ini boleh melembutkan sempadan warna yang tajam. Persampelan jiran terdekat memilih satu piksel sumber dan mengabaikan yang lain, jadi warna tidak bercampur, tetapi ciri halus boleh terlepas atau garisan menjadi tidak sekata. Rujukan imej Godot menerangkan kedua-dua kesan ini, dan MDN menyatakan bahawa tingkah laku penskalaan pelayar bergantung pada mod pemaparan yang dipilih. Godot: Image MDN: image-rendering

Oleh itu, hasil yang kelihatan tajam bukan sekadar soal memilih “tanpa kabur”. Hasilnya bergantung pada dimensi destinasi, bentuk dan jarak piksel dalam seni tersebut, serta cara imej akhir dipaparkan. Anggap versi kecil sebagai penyesuaian reka bentuk, bukannya pengecilan mekanikal daripada versi induk.

Ukur kawasan paparan tempat seni itu akan muncul, dalam piksel, dan kekalkan nisbah aspek sumber. Jika imej asal berukuran 1200 × 800 piksel dan sasaran berukuran 300 × 200, skalanya ialah 1:4 pada setiap arah. Setiap kawasan sumber selebar empat piksel dipadankan dengan kemas kepada satu piksel destinasi; nisbah ini mudah digunakan, walaupun ciri halus tetap akan hilang pada saiz ini.

Bagi sasaran seperti 320 × 180, mula-mula muatkan imej dalam batas tersebut tanpa meregangkannya. Jika nisbah aspek berbeza, tentukan sama ada hendak memangkas, menambah jalur kosong, atau menyusun semula reka letak. Jangan picit imej supaya memenuhi kotak: tindakan itu mengubah bentuk piksel dan boleh memesongkan wajah, siluet dan corak. Nisbah aspek yang berbeza memerlukan pilihan pembingkaian yang jelas; Godot dan Unity kedua-duanya mendokumentasikan pemangkasan atau jalur kosong sebagai cara menangani ketidakpadanan paparan. Godot: Multiple resolutions Unity: Pixel Perfect Camera reference

Buat salinan sumber dan kurangkan perincian sebelum mengubah saiz. Buang sorotan terpencil selebar satu piksel, garis luar yang sempit, teks kecil dan kelompok tekstur yang bercantum menjadi hingar pada saiz sasaran. Tegaskan siluet dan pastikan kawasan warna penting kekal berbeza. Jika sesuatu ciri membawa makna—seperti mata, simbol atau sempadan objek—lukis semula pada saiz sasaran dan bukannya mengharapkan proses pengecilan mengekalkannya.

Pemeriksaan yang berguna ialah melihat pratonton pada saiz sasaran pada zum 100% dan bertanya sama ada setiap ciri penting masih jelas berbeza. Zum masuk membantu memeriksa tepi piksel, tetapi tidak dapat memberitahu anda sama ada seni itu jelas pada saiz fizikal yang dimaksudkan. Simpan versi induk resolusi penuh supaya pemudahan untuk satu paparan kecil tidak menimpa kegunaan lain.

Gunakan jiran terdekat apabila seni itu perlu mengekalkan palet yang ketat dan blok piksel bert tepi keras, kemudian periksa dengan teliti jika ada ciri yang hilang atau lebar garisan yang tidak sekata. Oleh sebab kaedah ini memilih piksel sumber yang berdekatan dan bukannya mencampurkan warna piksel jiran, peralihan warna yang dilembutkan akibat penapisan dwilinear dapat dielakkan. Kelemahannya, banyak perincian sumber boleh terbuang. Pillow: Filters

Bagi imej yang lebih kecil tetapi perlu mewakili keseluruhan sumber dengan lebih licin, bandingkan penapis pensampelan ke bawah berkualiti tinggi seperti Lanczos dengan pengurangan yang lebih ringkas berasaskan kawasan atau kotak. Kaedah ini menggabungkan maklumat daripada berbilang piksel sumber, yang boleh mengekalkan bentuk umum tetapi menghasilkan warna perantaraan di sekeliling tepi yang tajam. Godot menyifatkan Lanczos sebagai pilihan berkualiti tinggi yang amat sesuai untuk penskalaan ke bawah; Pillow mendokumentasikan pendekatan pensampelan bagi penapis yang berbeza. Uji pilihan tersebut pada potongan imej yang mengandungi garisan pepenjuru, garisan nipis dan tepi berkontras tinggi, kemudian pilih berdasarkan hasil pada saiz sebenar. Godot: Image Pillow: Filters

Nisbah integer paling berguna apabila menskalakan imej kecil yang siap untuk dipaparkan, atau apabila dimensi sumber boleh dibahagi sama rata dengan sasaran. Setiap piksel sumber akan memenuhi bilangan piksel output bulat yang sama. Penskalaan pecahan boleh mengagihkan piksel secara tidak sekata; contoh Godot membandingkan imej asas 640 × 360 yang diskalakan 2× kepada 1280 × 720 dengan skala pecahan yang menghasilkan saiz piksel tidak sekata. Godot: Multiple resolutions

Bagi paparan kecil yang tidak sepadan dengan nisbah integer yang kemas, kekalkan nisbah aspek dan pilih kompromi dengan sengaja: biarkan margin kosong, pangkas sedikit, atau sediakan versi khusus untuk reka letak tersebut. Penskalaan integer mungkin meninggalkan jalur kosong atau menggunakan kawasan paparan yang lebih kecil. Ini bukan penyelesaian menyeluruh untuk mengecilkan imej induk yang besar, terutamanya apabila dimensi sumber dan destinasi tidak boleh dibahagi sama rata.

Eksport pada dimensi piksel sasaran, kemudian lihat fail yang dieksport pada saiz yang dimaksudkan dalam aplikasi, pelayar atau peranti sebenar. Imej eksport yang tajam boleh menjadi lembut jika peringkat seterusnya menskalakannya secara licin. Untuk lukisan kanvas pelayar, pelicinan didayakan secara lalai; MDN mendokumentasikan cara mematikan imageSmoothingEnabled apabila imej yang diskalakan perlu mengekalkan tepi keras. CSS image-rendering: pixelated juga boleh mempengaruhi imej yang dipaparkan, tetapi MDN mengingatkan bahawa nisbah piksel peranti pecahan masih boleh menyebabkan piksel kelihatan tidak sekata. MDN: imageSmoothingEnabled MDN: Crisp pixel art look

Periksa tiga perkara pada saiz sebenar: sama ada perincian utama masih dapat dikenal pasti, sama ada garisan pepenjuru dan garis luar kelihatan seragam, serta sama ada imej diregangkan atau diambil sampelnya semula selepas dieksport. Periksa juga tetapan zum atau penskalaan pada paparan sasaran; zum pelayar dan penskalaan peranti bukan integer boleh mempengaruhi keseragaman piksel. Jika tepi kelihatan lembut, telusuri seluruh laluan daripada sumber ke paparan dan kenal pasti tempat pelicinan berlaku sebelum mengubah semula karya seni.

1. Tetapkan lebar dan tinggi sasaran, kemudian tentukan cara menangani sebarang perbezaan nisbah aspek.
2. Buat salinan kerja dan ringkaskan perincian yang tidak muat pada saiz itu.
3. Eksport versi jiran terdekat dan versi penapis licin untuk dibandingkan; sertakan potongan imej dengan perincian halus dan garisan pepenjuru.
4. Semak kedua-duanya pada saiz paparan sebenar, kemudian lukis semula mana-mana ciri penting yang hilang atau menjadi kabur.
5. Pastikan aplikasi atau pelayar tidak melakukan penskalaan semula kedua yang tidak diingini, dan simpan versi akhir pada dimensi yang dimaksudkan.

Pilih jiran terdekat untuk tepi keras yang jelas dan nisbah yang sejajar; pilih penapis pensampelan ke bawah yang licin apabila mengekalkan bentuk umum lebih penting daripada mengekalkan warna daripada palet asal sahaja. Jika kedua-dua versi tidak jelas, ubah seni atau pembingkaian pada saiz sasaran. Pensampelan semula boleh mengagihkan perincian, tetapi tidak dapat mengekalkan setiap ciri daripada imej yang lebih besar dalam bilangan piksel yang lebih sedikit.

• Godot Engine: Multiple resolutions
• Godot Engine: Image
• MDN: image-rendering
• Pillow: Concepts — Filters
• Unity: Pixel Perfect Camera reference
• MDN: CanvasRenderingContext2D.imageSmoothingEnabled
• MDN: Crisp pixel art look with image-rendering