Il modo migliore per consentire ai giocatori di "tingere" le immagini senza perdere la qualità del colore?

Sto creando un gioco isometrico 2.5D (immagini 2D).

Voglio che i giocatori siano in grado di "tingere" la loro armatura, i vestiti e altre cose. Trovo che ingrigire tutto porti a perdere alcuni dei coloranti più "naturali". Ad esempio, creare un drago con scala di grigi rosso / giallo e quindi applicare il colore di sovrapposizione, porta a un drago puramente rosso con tutta la perdita del colore secondario. Nel frattempo, morire quello stesso drago blu rosso / giallo, lo rende blu / bianco che sembra fantastico.

I personaggi del mio gioco non hanno una grande varietà di equipaggiamento. Il gioco è più vicino a come League of Legends gestisce personaggi e grafica. Potrebbero esserci un solo tipo di personaggio (es. Hero) ma più opzioni per il personaggio come opzioni. Voglio che i giocatori siano in grado di avere quanta più personalizzazione possibile nel numero limitato di "abiti" e personaggi.

Quindi voglio che i giocatori siano in grado di selezionare un personaggio, scegliere una delle diverse armi, alternare tra una manciata di scelte di costume (sovrapposte ai personaggi), e quindi tingere la maggior parte di tutto (scegliere un colore metallico specifico per le armi, scegliere qualsiasi colore affatto per l'abbigliamento).

Se dovessi essere in grado di utilizzare la scala di grigi senza perdere parte della colorazione, lo farei.

Ecco un esempio di ciò di cui sto parlando:

Non è nemmeno possibile "tingere" il drago, indipendentemente da ciò che uso nelle opzioni "Color Overlay" di Photoshop. Ovviamente, sto sbagliando se è possibile colorarlo meglio usando la scala di grigi. Per un colore come il verde o il giallo o un viola più chiaro, questo funziona bene. Per qualsiasi altro colore, distrugge l'arte.

Tuttavia, sembra molto meglio se NON lo seleziono in scala di grigi e invece applico semplicemente un colore "HUE" all'immagine originale (rosso / giallo).

Tonalità rossa

Tonalità viola

Ora i giocatori potrebbero tingere il colore di QUALSIASI drago, e sarebbe comunque bello! (Il giallo diventa bianco, mentre il rosso diventa qualsiasi colore dell'arcobaleno.)

Questo significa che BIANCO o NERO è il miglior colore secondario? Quindi utilizzare una sorta di metodo o shader per cambiare il colore bianco (secondario) in qualcosa di diverso?

Esistono articoli su questo complesso metodo di acquisizione di una singola immagine e in base alla colorazione, tingono pixel diversi?

Per il drago, funzionerebbe meglio come drago bianco / nero ad alto contrasto? Rosso / Giallo è il miglior set di colori? Risulta molto meglio per le immagini rispetto ad alcuni altri colori che ho provato. La scala di grigi è ancora superiore?

Le "Opzioni di fusione" di Photoshop non includono il metodo per "tingere" le immagini in modo appropriato per un videogioco? Ci sono shader / metodi complessi che mi consentono di ottenere un successo migliore?

Nota: se GrayScale mi consente di ridurre il consumo di RAM delle mie immagini o di prevenire la perdita di qualità durante la compressione con perdita, sarebbe qualcosa che prenderei seriamente in considerazione.

Lo spostamento della tonalità è una possibilità che ti consente di ottenere una gamma di colori senza perdere i dettagli del colore. L'idea di base è convertire ogni pixel dallo spazio RGB allo spazio HSV, quindi compensare la tonalità di una quantità definita dall'utente, quindi riconvertire in RGB. In realtà, questo può essere fatto in modo più efficiente applicando una matrice di rotazione ai valori RGB: crea una matrice che ruota attorno all'asse (1, 1, 1) in base all'angolo di tonalità definito dall'utente. Quindi puoi semplicemente applicare questa matrice a ciascun valore RGB nel tuo pixel shader.

Ciò consentirà al drago rosso-giallo di essere spostato su un drago giallo-verde, verde-ciano, ciano-blu, blu-magenta o rosso magenta. Questo è un po 'restrittivo in quanto i due colori non possono essere modificati indipendentemente con questo approccio. Manterranno la loro tonalità relativa quando sono stati creati nell'immagine originale. Ci sono anche alcuni colori a cui non puoi accedere, ad esempio non puoi creare un drago in bianco e nero in questo modo. Tuttavia, questo potrebbe essere sufficiente per i tuoi scopi.

Un'altra possibilità, se i tuoi modelli hanno due o tre "colori chiave" (rosso e giallo qui), puoi creare l'immagine originale usando un canale di colore separato per ciascun colore chiave. In questo caso, creeresti il ​​drago rosso e verde anziché rosso e giallo e se avessi un terzo colore potresti crearlo in blu. Quindi, puoi consentire all'utente di scegliere i tre colori chiave e utilizzare i valori rosso, verde e blu nell'immagine come quantità di quei colori definiti dall'utente per fondersi. Quindi il tuo pixel shader sarebbe simile a

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

Ciò consentirebbe agli utenti di scegliere qualsiasi combinazione di colore desiderassero, comprese cose come il bianco e nero, il viola e l'oro.

Il problema che stai affrontando è che non puoi semplicemente "tingere" l'intera immagine, l'aspetto che vedi è più di un semplice colore di base. Per uno hai gradienti fini da un materiale all'altro, ma soprattutto hai anche riflessi, luci e ombre, che non sono influenzati dal colore di base. (Questi sono sostanzialmente aggiunti sopra di esso.)

Quindi è necessario scomporre l'immagine nei suoi componenti.

Un esempio :

In questo caso abbiamo 3 livelli:

• Lo sfondo: contiene gli elementi che non devono essere colorati.
• La parte che dovrebbe essere colorata - Questo viene moltiplicato per il colore. (OpenGL si moltiplica per impostazione predefinita se si specifica un colore diverso dal bianco.)
• I punti salienti - Questi sono additivi disegnati sull'intera immagine. Non è bianco ma giallo, per emulare un cambiamento di tonalità. Gli oggetti non sono solo un singolo colore, la tonalità cambia insieme alla luminosità.

Consiglio personalmente di utilizzare le trame maschera per ottenere ciò che desideri. Ciò garantirà che la texture RGB24 principale manterrà la sua qualità cromatica originale senza sacrificare la precisione. Ti darà anche molta libertà artistica di fondere la tua trama principale con la tua maschera di colore.

Ogni maschera può essere visualizzata come una trama in scala di grigi che interpolerà linearmente il colore della trama di base con il colore personalizzato. Diciamo che stai permettendo ai tuoi utenti di personalizzare due colori, il pixel shader sarà simile a questo:

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

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

Ciò suggerisce che più una maschera ha un valore elevato per un pixel, meno la trama principale avrà un impatto sul colore di output di quel pixel. Ad esempio, potresti convertire la trama del drago in scala di grigi e cancellare tutto tranne le tue ali per avere un colore personalizzato, indipendentemente dal colore del corpo.

Ho usato questa tecnica per i giochi mobili e non influenzerà le tue prestazioni complessive. Potrebbe costare una RAM del 33% in più per trama ma il compromesso per la qualità probabilmente ne vale la pena.

Ps Se stai pensando di usare solo un colore personalizzato, puoi semplicemente usare il canale alfa della tua trama principale RGBA32 come maschera.

puoi usare le tavolozze dei colori e lasciare che il giocatore modifichi la tavolozza. Se si utilizzano shader, è possibile utilizzare trame 1D come palette e il valore di grigio originale come indice.

Per convertire un'immagine a colori reali in un'immagine con 255 colori, puoi prendere tutti i valori dei colori dei pixel e raggrupparli nello spazio colore 3d in 255 cluster con l'algoritmo k-mean. Oppure usa strumenti generici di conversione delle immagini. Quindi è importante menzionare che l'interpolazione della trama del valore del grigio sarà un'interpolazione di indici nelle trame dei colori. Questo può portare a un risultato in cui hai diversi colori tra due texel dell'immagine originale. Ciò può essere risolto disabilitando l'interpolazione (penso che tu non voglia farlo) o ordinando la tavolozza dei colori in modo utile.

potresti convertire l'immagine in un'immagine grigia ma comunque salvarla con i canali rgba. memorizzare un valore di peso nel canale alfa, quindi utilizzarlo per decidere la quantità di colorante da applicare a un pixel. questo peso può essere calcolato in base alla vicinanza del colore al bianco. più vicino al bianco è il pixel, meno colorante dovrebbe essere applicato o minore dovrebbe essere il peso. questo lascerà la maggior parte dei punti salienti con la loro leggerezza originale, ma applicherà un po 'di colorante. il colore finale del pixel può quindi essere trovato calcolando ciascun canale Ro + (Rd * Ao) dove Ro è il rosso originale, Rd è il rosso nel colore della tintura e Ao è l'Alfa dell'originale. quindi tutti i pixel bianchi non ottengono un nuovo colore e tutti i pixel neri assumono il colore della tintura.