Cara terbaik untuk memungkinkan pemain untuk "Mewarnai" gambar tanpa kehilangan kualitas warna?

Saya membuat game 2.5D isometrik (gambar 2D).

Saya ingin para pemain dapat "mewarnai" baju besi, pakaian, dan hal-hal lainnya. Saya menemukan bahwa semua yang abu-abu menyebabkan hilangnya pewarna yang lebih "alami". Misalnya, membuat naga dengan skala abu-abu merah / kuning dan kemudian menerapkan warna overlay, mengarah ke naga merah murni dengan semua kehilangan warna sekunder. Sementara itu, sekarat yang sama Merah / Kuning Naga Biru, membuatnya Biru / Putih yang tampak hebat.

Karakter dalam gim saya tidak memiliki berbagai macam peralatan. Permainan ini lebih dekat dengan bagaimana League of Legends menangani karakter dan grafik. Mungkin ada satu jenis karakter (mis. Pahlawan) tetapi beberapa pakaian untuk karakter sebagai opsi. Saya ingin para pemain dapat memiliki kustomisasi sebanyak mungkin dalam jumlah terbatas "pakaian" dan karakter.

Jadi saya ingin pemain dapat memilih karakter, memilih salah satu dari beberapa senjata, bergantian di antara beberapa pilihan kostum (berlapis ke karakter), dan kemudian mewarnai sebagian besar segalanya (memilih warna metalik khusus untuk senjata, memilih warna apa saja sama sekali untuk pakaian).

Jika saya bisa menggunakan grayscale tanpa kehilangan pewarnaan, saya akan melakukannya.

Berikut adalah contoh tentang apa yang saya bicarakan:

Bahkan tidak mungkin untuk "mewarnai" Naga, apa pun yang saya gunakan dalam opsi "Hamparan Warna" Photoshop. Jelas, saya melakukan kesalahan jika memungkinkan untuk mewarnainya dengan lebih baik menggunakan skala abu-abu. Untuk warna seperti Hijau atau Kuning atau Lighter Purple, ini berfungsi baik. Untuk warna lain, itu menghancurkan seni.

Namun, itu terlihat jauh lebih baik jika saya TIDAK skala abu-abu, dan alih-alih hanya menerapkan warna "HUE" ke gambar asli (Merah / Kuning).

Hue Merah

Rona ungu

Sekarang para pemain bisa mewarnai warna naga APA SAJA, dan itu akan tetap terlihat hebat! (Kuning berubah putih, sedangkan merah berubah menjadi warna pelangi.)

Apakah ini berarti bahwa PUTIH atau HITAM adalah warna sekunder terbaik? Kemudian gunakan semacam metode atau shader untuk mengubah warna putih (sekunder) menjadi sesuatu yang berbeda?

Apakah ada artikel tentang metode kompleks ini untuk mengambil gambar tunggal, dan berdasarkan pewarnaan, mewarnai piksel yang berbeda?

Untuk Naga, apakah itu akan bekerja dengan baik sebagai Naga Kontras Putih / Hitam tinggi? Apakah Merah / Kuning set warna terbaik? Ternyata jauh lebih baik untuk gambar daripada beberapa warna lain yang saya coba. Apakah Grayscale masih unggul?

Apakah "Blending Options" Photoshop tidak termasuk metode untuk "mewarnai" gambar dengan tepat untuk gim video? Apakah ada Shader / Metode kompleks yang memungkinkan saya untuk mencapai kesuksesan yang lebih baik?

Catatan: Jika GrayScale memungkinkan saya untuk mengurangi konsumsi RAM gambar saya, atau mencegah hilangnya kualitas selama kompresi lossy, itu akan menjadi sesuatu yang saya akan pertimbangkan dengan serius.

Hue-shifting adalah salah satu kemungkinan yang memungkinkan Anda mendapatkan beragam warna tanpa kehilangan detail warna. Ide dasarnya adalah untuk mengkonversi setiap piksel dari ruang RGB ke HSV, lalu mengimbangi rona dengan jumlah yang ditentukan pengguna, lalu mengonversi kembali ke RGB. Sebenarnya, ini dapat dilakukan lebih efisien dengan menerapkan matriks rotasi ke nilai RGB: buat matriks yang berputar di sekitar sumbu (1, 1, 1) dengan sudut rona yang ditentukan pengguna. Kemudian Anda cukup menerapkan matriks ini untuk setiap nilai RGB di pixel shader Anda.

Ini akan memungkinkan naga merah-kuning untuk dipindahkan ke naga kuning-hijau, hijau-cyan, biru-sian, biru-magenta, atau magenta-merah. Ini agak membatasi karena dua warna tidak dapat diubah secara independen dengan pendekatan ini. Mereka akan mempertahankan rona relatif mereka saat mereka ditulis dalam gambar asli. Ada juga beberapa warna yang tidak dapat Anda akses, misalnya Anda tidak dapat membuat naga hitam-putih dengan cara ini. Namun, ini mungkin cukup untuk keperluan Anda.

Kemungkinan lain, jika model Anda memiliki dua atau tiga "warna kunci" (merah dan kuning di sini), Anda dapat membuat gambar asli menggunakan saluran warna terpisah untuk setiap warna kunci. Dalam hal ini, Anda akan membuat naga merah dan hijau alih-alih merah dan kuning, dan jika Anda memiliki warna ketiga, Anda dapat membuatnya dengan warna biru. Kemudian, Anda dapat membiarkan pengguna memilih tiga warna utama, dan menggunakan nilai-nilai merah, hijau, dan biru pada gambar sebagai jumlah dari warna-warna yang ditentukan pengguna untuk berbaur. Jadi pixel shader Anda akan terlihat seperti

finalColor = image.r * userColor1 + image.g * userColor2 + image.b * userColor3;

Ini akan memungkinkan pengguna memilih kombinasi warna apa pun yang mereka inginkan, termasuk hal-hal seperti hitam dan putih, atau ungu dan emas.

Masalah yang Anda hadapi adalah bahwa Anda tidak bisa begitu saja "mewarnai" seluruh gambar, penampilan yang Anda lihat lebih dari sekadar warna dasar. Untuk satu Anda memiliki gradien halus dari satu bahan ke yang lain, tetapi yang lebih penting Anda juga memiliki refleksi, highlight dan bayangan, yang tidak dipengaruhi oleh warna dasar. (Itu pada dasarnya ditambahkan di atasnya.)

Jadi, Anda perlu menguraikan gambar menjadi komponen-komponennya.

Contoh A :

Dalam hal ini kami memiliki 3 lapisan:

• Latar Belakang - Ini berisi elemen yang tidak boleh diwarnai.
• Bagian yang harus diwarnai - Ini dikalikan dengan warnanya. (OpenGL mengalikan secara default jika Anda menentukan warna selain putih.)
• Sorotan - Ini ditarik aditif di atas seluruh gambar. Bukan putih tapi kuning, untuk meniru perubahan rona. Objek bukan hanya satu warna, rona berubah bersamaan dengan kecerahan.

Saya pribadi akan merekomendasikan menggunakan tekstur topeng untuk mencapai apa yang Anda inginkan. Ini akan memastikan bahwa tekstur RGB24 utama Anda akan menjaga kualitas warna aslinya tanpa mengorbankan presisi. Ini juga akan memberi Anda banyak kebebasan artistik untuk memadukan tekstur utama Anda dengan topeng warna Anda.

Setiap topeng dapat dilihat sebagai tekstur skala abu-abu yang secara linier akan menginterpolasi warna tekstur dasar Anda dengan warna kustom Anda. Katakanlah Anda membiarkan pengguna Anda menyesuaikan dua warna, pixel shader akan terlihat seperti ini:

input: MainTexture (RGB), Mask1Texture (A), Mask2Texture (A), Colour1 (float), Colour2 (float)

output: (Mask1Texture + Mask2Texture) -MainTexture + Colour1 * Mask1Texture + Colour2 * Mask2Texture

Ini menunjukkan bahwa semakin banyak topeng memiliki nilai besar untuk satu piksel, semakin sedikit tekstur utama Anda akan berdampak pada warna keluaran piksel itu. Misalnya Anda dapat mengubah tekstur naga Anda menjadi skala abu-abu dan menghapus semuanya kecuali sayap Anda untuk memiliki warna sayap kustom, apa pun warna tubuhnya.

Saya telah menggunakan teknik ini untuk permainan seluler dan itu tidak akan memengaruhi kinerja Anda secara keseluruhan. Mungkin dikenakan biaya 33% lebih banyak RAM per tekstur tetapi trade-off untuk kualitas mungkin sepadan.

Ps Jika Anda hanya berpikir untuk menggunakan satu warna khusus, Anda cukup menggunakan saluran Alpha dari tekstur utama RGBA32 Anda sebagai masker.

Anda dapat menggunakan palet warna dan membiarkan pemain mengedit palet. Jika Anda menggunakan shader, Anda dapat menggunakan tekstur 1D sebagai palet dan nilai abu-abu asli sebagai indeks.

Untuk mengonversi gambar warna asli menjadi gambar dengan 255 warna, Anda dapat mengambil semua nilai warna piksel Anda dan mengelompokkannya dalam ruang warna 3d hingga 255 cluster dengan algoritma k-means. Atau gunakan alat konversi gambar umum. Maka penting untuk menyebutkan bahwa interpolasi tekstur nilai abu-abu akan menjadi interpolasi indeks dalam tekstur warna Anda. Ini dapat menyebabkan hasil di mana Anda memiliki beberapa warna antara dua texel dari gambar asli Anda. Ini dapat diselesaikan dengan menonaktifkan interpolasi (saya pikir Anda tidak ingin melakukan itu) atau dengan menyortir palet warna Anda dengan cara yang bermanfaat.

Anda bisa mengonversi gambar menjadi gambar abu-abu tetapi tetap menyimpannya dengan saluran rgba. simpan nilai bobot di saluran alfa lalu gunakan ini untuk memutuskan berapa banyak pewarna yang diterapkan pada piksel. berat ini dapat dihitung berdasarkan seberapa dekat warnanya dengan putih. semakin mendekati putih pikselnya, semakin sedikit pewarna yang berlaku atau semakin rendah beratnya. ini akan meninggalkan sorotan paling terang dengan aslinya, tetapi menerapkan sedikit pewarna untuk itu. warna piksel akhir kemudian dapat ditemukan dengan menghitung setiap saluran Ro + (Rd * Ao) di mana Ro adalah merah asli, Rd adalah merah dalam warna pewarna dan Ao adalah Alpha dari aslinya. jadi semua piksel putih tidak mendapat warna baru dan semua piksel hitam menganggap warna pewarna.