プレーヤーが色品質を損なうことなく画像を「染色」できるようにする最良の方法は？

2.5Dアイソメ（2D画像）ゲームを作成しています。

プレイヤーが鎧や衣服などを「染める」ことができるようにしたいのです。私は、すべてをグレースケール化すると、より「自然な」カラーリングのいくつかを失うことにつながります。たとえば、赤/黄色のグレースケールでドラゴンを作成してからオーバーレイカラーを適用すると、二次色がすべて失われた純粋に赤いドラゴンになります。その間、同じ赤/黄色のドラゴンブルーが死ぬと、見た目は青/白になります。

私のゲームのキャラクターには、多種多様な装備がありません。このゲームは、League of Legendsがキャラクターとグラフィックスを処理する方法に近いものです。単一のタイプのキャラクター（例：ヒーロー）が存在する場合がありますが、オプションとしてキャラクターの複数の衣装があります。プレイヤーは、限られた数の「衣装」とキャラクターで可能な限り多くのカスタマイズを行えるようにしたいと思います。

ですから、プレイヤーがキャラクターを選択し、いくつかの武器の1つを選択し、少数の衣装の選択肢（キャラクターの上に重ねて）を交互に切り替えて、ほとんどすべてを染色できるようにします（武器の特定のメタリックカラーを選択し、任意の色を選択します）衣料品のために）。

着色を失わずにグレースケールを使用できるようになれば、私はそうします。

ここに私が話していることの例があります：

Photoshopの「カラーオーバーレイ」オプションで何を使用しても、ドラゴンを「染色」することはできません。明らかに、グレースケールを使用してより適切に色付けできる場合、私は間違っています。緑や黄色、明るい紫などの色の場合、これで問題ありません。他の色については、芸術を破壊します。

ただし、グレースケールを行わずに、元の（赤/黄色）画像に「HUE」色を単純に適用すると、見栄えがよくなります。

赤い色合い

紫の色合い

これで、プレイヤーはドラゴンを任意の色に染めることができます。（黄色は白に変わり、赤は虹の色に変わります。）

これは、ホワイトまたはブラックが最適なセカンダリカラーであることを意味しますか？次に、何らかの方法またはシェーダーを使用して、白い（セカンダリ）色を別の色に変更しますか？

単一の画像を撮影し、着色に基づいて異なるピクセルを染色するこの複雑な方法に関する記事はありますか？

ドラゴンにとって、それは白/黒の高コントラストドラゴンとして最もよく機能するでしょうか？レッド/イエローは最高のカラーセットですか？私が試した他のいくつかの色よりも、画像の方がはるかに優れています。グレースケールはまだ優れていますか？

Photoshopの「ブレンドオプション」には、ビデオゲームの画像を適切に「染色」する方法が含まれていませんか？より良い成功を達成できる複雑なシェーダー/方法はありますか？

注：GrayScaleを使用して画像のRAM消費量を削減したり、非可逆圧縮中の品質の低下を防ぐことができる場合、それは私が真剣に検討するものです。

色相シフトは、色の詳細を失わずに色の範囲を取得できる可能性の1つです。基本的な考え方は、各ピクセルをRGBからHSV空間に変換し、ユーザー定義の量だけ色相をオフセットしてから、RGBに変換し直すことです。実際には、RGB値に回転行列を適用することにより、これをより効率的に行うことができます。ユーザー定義の色相角だけ（1、1、1）軸を中心に回転する行列を作成します。次に、このマトリックスをピクセルシェーダーの各RGB値に単純に適用できます。

これにより、赤黄色のドラゴンを黄緑、緑シアン、青緑、青マゼンタ、または赤紫のドラゴンにシフトできます。このアプローチでは、2つの色を個別に変更することはできないため、これには少し制限があります。元の画像で作成されているため、相対的な色相を維持します。また、アクセスできない色もいくつかあります。たとえば、この方法で白黒のドラゴンを作ることはできません。それでも、これはあなたの目的には十分かもしれません。

別の可能性として、モデルに2つまたは3つの「キーカラー」（ここでは赤と黄色）がある場合、キーカラーごとに個別のカラーチャネルを使用して元の画像を作成できます。この場合、赤と黄色の代わりに赤と緑のドラゴンを作成し、3番目の色がある場合は青で作成できます。次に、ユーザーに3つの主要な色を選択させ、画像内の赤、緑、青の値をユーザー定義の色の量として使用してブレンドすることができます。したがって、ピクセルシェーダーは次のようになります。

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

これにより、ユーザーは、黒や白、紫や金など、好きな色の組み合わせを選択できます。

あなたが直面している問題は、画像全体を単純に「色付け」することはできず、見た目は単なるベースカラー以上のものであるということです。ある素材から別の素材への細かいグラデーションがありますが、さらに重要なことには、ベースカラーの影響を受けない反射、ハイライト、シャドウもあります。（これらは基本的にその上に追加されます。）

そのため、画像をコンポーネントに分解する必要があります。

例：

この場合、3つのレイヤーがあります。

• 背景-これには、着色すべきではない要素が含まれています。
• 着色する必要のあるパーツ-これに色を掛けます。（白以外の色を指定すると、デフォルトでOpenGLが乗算されます。）
• ハイライト-これらは画像全体に付加的に描画されます。色相の変化をエミュレートするために、白ではなく黄色です。オブジェクトは単色ではなく、色相は明るさとともに変化します。

個人的には、マスクテクスチャを使用して、目的を達成することをお勧めします。これにより、メインのRGB24テクスチャは、精度を犠牲にすることなく元の色品質を維持します。また、メインのテクスチャをカラーマスクとブレンドするための芸術的な自由が十分に得られます。

各マスクは、ベーステクスチャの色をカスタムカラーで線形補間するグレースケールテクスチャとして表示できます。ユーザーに2色をカスタマイズさせるとすると、ピクセルシェーダーは次のようになります。

入力：MainTexture（RGB）、Mask1Texture（A）、Mask2Texture（A）、Colour1（float）、Colour2（float）

出力：（Mask1Texture + Mask2Texture）-MainTexture + Colour1 * Mask1Texture + Colour2 * Mask2Texture

これは、1つのピクセルのマスクの値が大きいほど、メインテクスチャがそのピクセルの出力色に与える影響が小さくなることを示しています。たとえば、ドラゴンのテクスチャをグレースケールに変換し、翼以外のすべてを消去して、体の色に関係なくカスタムの翼色にすることができます。

この手法をモバイルゲームに使用しましたが、全体的なパフォーマンスには影響しません。テクスチャごとに33％のRAMが必要になる場合がありますが、品質とのトレードオフはおそらく価値があります。

Psカスタムカラーを1つだけ使用することを考えている場合は、RGBA32メインテクスチャのアルファチャネルをマスクとして使用できます。

カラーパレットを使用して、プレーヤーにパレットを編集させることができます。シェーダーを使用する場合、1Dテクスチャをパレットとして使用し、元のグレー値をインデックスとして使用できます。

トゥルーカラーイメージを255色のイメージに変換するには、すべてのピクセルカラー値を取得し、k-meansアルゴリズムを使用して3Dカラースペースで255クラスターにグループ化します。または、一般的な画像変換ツールを使用します。次に、グレー値テクスチャの補間がカラーテクスチャのインデックスの補間になることに言及することが重要です。これにより、元の画像の2つのテクセルの間にいくつかの色があるという結果になります。これは、補間を無効にすることで解決できます（これはしたくないと思います）、または便利な方法でカラーパレットを並べ替えることで解決できます。

画像をグレー画像に変換しても、rgbaチャンネルで保存できます。アルファチャネルに重み値を保存し、これを使用してピクセルに適用する染料の量を決定します。この重みは、色が白にどれだけ近いかに基づいて計算できます。ピクセルが白に近いほど、適用する色素が少なくなるか、重みが低くなります。これにより、ほとんどのハイライトは元の明るさのままになりますが、少しの染料が適用されます。最終的なピクセルの色は、各チャンネルRo +（Rd * Ao）を計算することで見つけることができます。ここで、Roは元の赤、Rdは染料の色の赤、Aoは元のアルファです。したがって、すべての白いピクセルは新しい色を取得せず、すべての黒いピクセルは染料の色を想定します。