不規則な形状のヘルスバーを手続き的にレンダリングするにはどうすればよいですか？

従来の長方形または心臓ベースのヘルスバーの問題は、十分に理解されており、簡単に解決できます。しかし、以下で作成したモックアップのように、より「創造的に形作られた」ヘルスバーに受け入れられるソリューションは何ですか？

これを行う明白な方法は、「中間の」スプライトを使用することです。したがって、3番目の画像は、さまざまなレベルの健康のための他の多くのトランジションとともに、独自のスプライトになります。しかし、それは実に洗練されていないようであり、健康状態間のスムーズな移行を作成するために必要な中間者の数は多くなります。

私が思いつく他の唯一のアイデアは、「空の健康」スプライトの上に「完全な健康」スプライトをオーバーレイし、健康の各目盛りを表すピクセル座標のセットをプリベイクし、健康として不透明または透明にすることです上下します。

この質問は言語やプラットフォームにとらわれないことを意図していますが、回答に役立つ場合は、任意の言語/ライブラリ/フレームワークで具体的なサンプルを提供してください。

シェーダーでこれを実現する非常に簡単な方法があります。3つのテクスチャが必要です：空のヘルスバー、ヘルスバーテクスチャ、一方の端に1つの極端な（たとえば、最も暗い黒または最も透明なアルファ値）の分布の勾配を持つマスクもう一方の端に。それは画像に最もよく示されていますが、現在は曲線グラデーションを線形のみ描画することはできません-しかし、あなたのアーティストは何の問題もないと確信しています： 今、シェーダーでテクスチャとしきい値の両方をサンプリングし、そうでないすべてのピクセルを破棄します入力のしきい値よりも明るい（シェーダー入力のヘルス％に基づく）。
あなたは可能性テクスチャの代わりにマスキングに数式を使用しますが、それを行った場合、上記の数式で作成できる形状（=単純な形状）に非常に制限されます。
* コメントを見る

ピクセルシェーダーとして数学的に実装：

CPUで、V2でHealthDirectionとそのドット積を計算します

GPUで、各ピクセルの中心点から離れる正規化された方向を計算します。各ドット積をHealthDirections 'と比較して、「背景」をシェーディングするか、カラーにするかを選択します。

このアルゴリズムを「反転」し、他の方向から作業した場合、各ピクセルの方向を「元に戻して」パーセンテージに戻し、代わりにそれぞれをHealthPercentと比較できます。各ピクセルの割合を計算すると、GPUで赤から緑へのフェードを実行するのは簡単になります。

最初にアルゴリズムをクワッドに適用してバーを描画します。rangeMinとrangeMax（ベイク処理可能）およびclip（）の間の色を出力するか、他の場所で透明に出力します。次に、アルファを使用して、その上に（変更された）スプライトを描画します。CADでバーをトレースし、塗りつぶしてから、ペイントのソリッドカラーシェイプを「マジックワンド」して削除しました。私の手は、AutoCADとペイントを手作業で混合しているため、がらくたに見えます。内側のエッジを透明にブレンドすると仮定すると、完璧。

白い境界線は、クワッドの境界です。それと赤いXは参照専用です：

「穴のあるスプライト」は、ヘルスバーと同時にレンダリングする必要はありません。すべてのヘルスバーが完成した後、それらは一度にインスタンス化され描画されます。アルゴリズムはシェーダーに内蔵されているため、インスタンス化を追加して、インスタンス化された1つの描画呼び出しですべてのヘルスバーを描画することもできます。画面上のすべてのヘルスバーを描画するには、2つのDrawInstanced（...）呼び出しが必要であり、「クレイジーファースト」である必要があります。