Apa yang membuat scaling pixel art berbeda dari gambar lain?


13

Baru-baru ini saya melatih seorang pengembang yang baru membuat gim seni pixel, dan menyadari ada beberapa "kebijaksanaan konvensional" seputar penskalaan pixel art yang tidak jelas bagi pendatang baru, dan mungkin tidak terdokumentasi dengan baik. Jadi, inilah upaya untuk memperbaikinya ....


  1. Saya pernah mendengar bahwa saya seharusnya hanya skala pixel art sebesar 200%, 300% dll. Tidak di antara ukuran seperti 120%

    • Mengapa demikian? Tidakkah seharusnya menskala "hanya berfungsi" seperti halnya dengan gambar lain?
    • Bagaimana jika saya benar-benar perlu membuat karakter saya hanya sebagian kecil atau lebih kecil untuk mendapatkan gameplay atau tampilan yang tepat? Bagaimana cara saya memperbaikinya?
  2. Saya diberitahu "buruk" menggunakan seni pixel pada skala yang berbeda dalam satu game - mengapa?

    • Misalnya, jika saya memperbesar karakter saya sehingga setiap sprite texel adalah piksel layar 4x4, sedangkan latar belakang seni saya ditingkatkan sehingga setiap sprite texel adalah 6x6 piksel layar. Bukankah sebuah pixel merupakan pixel pada akhir hari?

Jawaban:


31

Penskalaan dengan Angka Utuh

Penskalaan dengan 2x, 3x ... n x sederhana - setiap piksel hanya menjadi n x n kuadrat piksel, dan tampilan sprite asli terlestarikan dengan sempurna (termasuk semua garis tajam, sudut, dan tangga zig-zags) .

Kami mengalami kesulitan saat melakukan penskalaan pixel art dengan jumlah fraksional (mis. 1.5x) karena pixel pada dasarnya bersifat diskrit. Kami tidak dapat benar-benar memiliki "setengah piksel."

Untuk jenis seni lain kita sering dapat pergi dengan pencampuran piksel sumber yang berdekatan di mana piksel harus "setengah berwarna," dan pada resolusi tinggi artefak biasanya tidak terlihat. Tetapi pada pixel art chunky besar ini dengan cepat menghancurkan tampilan yang tajam.

Jadi sebagai gantinya kita biasanya akan menggunakan filter "Nearest Neighbor" (juga disebut Point filtering) sehingga setiap piksel setelah penskalaan mengambil warnanya dari tepat satu piksel dalam sprite asli.

Ini memiliki kerutan lain: karena jumlah piksel setelah penskalaan bukan kelipatan jumlah-seluruh dari jumlah piksel sumber, beberapa piksel sumber akan terduplikasi lebih dari yang lain (jika ditingkatkan) atau dilewati seluruhnya (jika diperkecil).

Sayangnya, perangkat lunak pengeditan gambar dan pemfilteran tekstur GPU tidak terlalu pemilih tentang di mana mereka menggandakan atau melewati piksel - mereka hanya mengikuti aturan pembulatan dasar - yang dapat membuat hasil terlihat terdistorsi dan tidak merata.

Lihatlah contoh di bawah ini. Di tengah kami telah meningkatkan sprite jamur sebesar 150% menggunakan penyaringan Nearest Neighbor, dan hasilnya terlihat miring dan serampangan. Satu mata lebih besar dari yang lain, beberapa garis besar tebal sementara yang lain tetap tipis, dan bintik-bintik bulat terlihat kuning ... itu tidak terlihat seperti sesuatu yang sengaja dibuat oleh seniman piksel.

Contoh artefak menggunakan skala non-integer

Jika kita benar-benar membutuhkan sprite menjadi 150% lebih besar (katakanlah, untuk membuat gameplay terasa benar, atau untuk mendukung resolusi tampilan alternatif ), maka kita dapat mengecat ulang area masalah seperti contoh di sebelah kanan. Sekarang lebih seperti sesuatu yang akan dibuat oleh seorang seniman, dan secara gaya konsisten dengan seni lain dalam permainan. (Meskipun saya sendiri bukan seniman pixel yang hebat, jadi masih bisa lebih baik 😉)

Sayangnya tidak ada banyak cara pintas yang bagus untuk ini. Untuk skala bilangan bulat, Anda dapat menggunakan algoritme peningkatan skala seni pixel yang dirancang khusus - beragam tersedia di alat-alat seperti ImageResizer - untuk mendapatkan titik awal yang lebih pendek daripada Tetangga Terdekat, tetapi masih membutuhkan mata seniman dan lemak siku untuk dapatkan hasil berkualitas tinggi.


Selain: skala fraksional juga dapat muncul pada saat runtime .

Bayangkan gim Anda dalam resolusi NES (256 x 240), dan Anda ingin menampilkannya di layar 1080p.

1080 ÷ 240 = 4.5, jadi beberapa piksel sumber atau "texels" dalam adegan Anda dapat meledak hingga 5 piksel layar, sementara yang lain hanya 4, menciptakan distorsi seperti yang kita lihat di atas. Dalam gerakan mereka cenderung membuat riak dan kilau sprite secara mengganggu, tanpa sebab yang jelas:

Contoh jamur skala-kecil yang bergerak, menunjukkan artefak yang beriak

Anda akan sering melihat orang-orang menyarankan pembulatan posisi kamera atau objek ke integer piksel, tetapi itu tidak benar-benar memperbaiki masalah. Pembulatan sudah terjadi sebagai bagian dari penyaringan tetangga terdekat - masalahnya adalah bahwa beberapa piksel layar membulatkan ke sumber texel yang sama (menduplikasinya), sementara yang lain tidak, menyebabkan hasil yang tidak merata.

Solusinya adalah dengan menggunakan kombinasi padding / cropping atau set aset alternatif untuk kembali ke rasio jumlah piksel layar yang konsisten untuk semua resolusi layar yang ingin Anda dukung - lihat beberapa contoh Unity di sini . Ini adalah kasus lain di mana tidak ada perbaikan universal yang mudah, dan Anda harus menerapkan penilaian dan keterampilan untuk menjaga permainan Anda terlihat tajam.

Menjaga agar Skala Pixel Konsisten

"Aturan" ini bermula pada konsistensi gaya.

Saat Anda menggunakan seni pixel pada skala yang berbeda, itu bisa terlihat seperti aset yang dirangkai bersama dari gim yang berbeda, alih-alih memiliki estetika terpadu.

Contoh penskalaan aset secara berbeda dalam satu game

Dalam contoh di sebelah kiri, saya mengumpulkan beberapa sprite dari Super Mario World, semua pada skala yang sama, dan itu terlihat hebat.

Di tengah, saya meningkatkan Mario dan tingkat menjadi dua kali lipat resolusi latar belakang, dan mol untuk tiga kali lipat resolusi. Karena saya menggunakan skala bilangan bulat, kami tidak mendapatkan distorsi atau riak di mana pun, tetapi masih terlihat sedikit lucu.

Untuk satu, latar belakang jauh lebih rinci daripada latar depan. Ini dapat mewakili kurva yang halus dan highlight yang tajam, yang membuat latar depan terlihat sangat "gumpal" kontras, daripada memiliki nuansa seni pixel yang konsisten. Dan garis besar mol terlihat lebih tebal dan bergerigi dibandingkan bagian depan lainnya.

Di sebelah kanan saya tunjukkan lagi, dengan mengecat ulang aset dalam skala piksel yang sama, kita dapat menghadirkan kembali rasa yang lebih terpadu dan disengaja dengan ukuran aset baru.

Tetapi apakah saya harus?

Tidak terlalu. Ini permainan Anda, dan Anda bisa membuatnya seperti yang Anda inginkan.

Terutama saat membuat prototipe dan menemukan kesenangan dalam gim Anda, bisa mencoba berbagai hal dengan cepat lebih penting daripada membuatnya terlihat sempurna. Anda mungkin akan mendapatkan ukuran hal-hal penting seperti karakter Anda salah berkali-kali sebelum Anda menemukan yang terbaik untuk gim Anda, dan itu akan payah harus mengecat ulang setiap bingkai animasi setiap kali Anda ingin mencoba sesuatu yang berbeda. Jadi, sejak awal, jangan berkeringat.

Untuk game yang dirilis, itu panggilan penilaian. Polisi pixel art tidak akan melarang Anda mendistribusikan game Anda jika Anda tidak mengikuti aturan, dan banyak pemain tidak akan bisa menggambarkan perbedaannya. Namun perhatian pada detail piksel ini adalah sesuatu yang dianggap oleh banyak pemain (dan pengulas) tanda penting kualitas - jadi kenali audiens Anda, dan putuskan yang terbaik untuk pengalaman yang ingin Anda tawarkan kepada mereka.

Satu pertimbangan terakhir adalah bahwa banyak gim seni pixel memiliki gameplay presisi sangat tinggi. Pikirkan melompat di antara platform 1-blok di game Mega Man awal. Dalam situasi ini, kotak piksel yang konsisten (dan kotak ubin) bisa menjadi isyarat penting bagi pemain dalam menilai dan mengeksekusi gerakan mereka. Memperkenalkan ketidakteraturan dalam bidang ini sebenarnya bisa membuat permainan lebih sulit untuk dipelajari, yang bisa membuat frustasi.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.