スプライトの概要

現在2Dゲームに取り組んでおり、現在の仕事は選択したオブジェクトの輪郭を描くことです。

基本的にぼかしシェーダーを使用して完全に実行します。最初に垂直ガウスぼかしシェーダーを使用してスプライトを描画し、次に水平ガウスぼかしシェーダーを使用してスプライトを描画してから、通常どおりスプライトを描画します。

これが私のぼかしシェーダーです：sampler TextureSampler：register（s0）;

#define SAMPLE_COUNT 15

float2 SampleOffsets[SAMPLE_COUNT];
float SampleWeights[SAMPLE_COUNT];


float4 PixelShaderFunction(float2 texCoord : TEXCOORD0) : COLOR0
{
    float4 c = 0;

    // Combine a number of weighted image filter taps.
    for (int i = 0; i < SAMPLE_COUNT; i++)
    {
        c += tex2D(TextureSampler, texCoord + SampleOffsets[i]) * SampleWeights[i];
    }

    return c;
}

SampleOffetsは、丸めピクセルをテストできるオフセットです。SampleWeightsは、ガウス関数（http://en.wikipedia.org/wiki/Gaussian_blur）で計算された重みです。

結果は次のとおりです。

それはそれほど悪くはなく、非常に滑らかですが、ゲームでは十分に見えません...しかし、厚さを制御して（大きくして）、アルファでフェードする前に（不透明にするために）最初の不透明なアウトラインを追加したいと思います。それはもっと見えます）。そして、ガウスぼかしは私の仕事について思ったほど良くないかもしれません:)

もう1つのアイデアは、.pngから自動的に生成することです（フォトショップスクリプトを使用して自動化します）。アウトラインピクセルをカスタムカラーで塗りつぶし、たとえばアルファ値を赤コンポーネントに格納し、他のすべてのコンポーネントを0に設定するだけです。次に、透明なピクセルを目的の色に置き換えるシェーダーを適用するだけです。

float4 PixelShaderFunction2(float2 texCoord : TEXCOORD0) : COLOR0
{
    float4 color = tex2D(TextureSampler, texCoord);
    float4 newColor = 0;
    if (color.a == 0 && color.r != 0)
    {
        color.a = color.r;
        // Blue outline
        color.b = 1;
    }
}

問題は、スプライトにDXT5圧縮を使用しているため、シェーダーで取得する色が、書いたものとまったく同じになるかどうか確信が持てないことです。だから私も試さなかったのですが…。

どんなアドバイスでも大歓迎です:)

おそらく探しているのは、ガウスぼかしの前、後、または前後のエッジ検出の形式です。おそらく、Sobel Edge Detectionのバージョンが機能する可能性があります。あなたのゲームが2Dであることは知っていますが、wikiページが粗すぎる場合は、UDKで動作させる方法に関するチュートリアルを参照してください。

スピードを上げる必要がある場合にのみ、エッジ検出で実際にアルファチャネルのエッジを検出する必要があります。

テキストのアウトラインで私にとってうまくいったのは：

• アウトラインの色を選択してください
• （x-1、y-1）にテキストをアウトラインカラーで描画します
• （x + 1、y-1）にテキストをアウトラインカラーで描画します
• （x-1、y + 1）にテキストをアウトラインカラーで描画します
• （x + 1、y + 1）にテキストをアウトラインの色で描画します
• （x、y）にテキストを描画します

あなたは同じことをすることができます-あなたがする必要があるのはあなたのアウトラインカラーで着色された不透明なピクセルでスプライトを描くことです。（丸いエッジが丸く見えるように透明度の値を維持します）。

これは機能し、スケーリングされたバージョンを描画するよりも見栄えがよく、他のいくつかのクールなプロパティがあります（太字のアウトラインアルファを制御でき、スプライトイメージの「穴」を保持できるなど）-唯一の欠点は、アウトラインの幅をうまく制御しすぎています。

私はこれのすべてに少し新しいですが、これが私の考えです：

テクスチャのアルファチャネルを使用して、別のテクスチャを作成できます。しきい値を下回るアルファ値は完全に透明に設定されます。上記のものは完全に不透明になります。この新しいテクスチャを使用して、RGBの値を任意の色に設定できます。この新しい「テクスチャ」を、キャラクターのテクスチャよりも少し大きくスケーリングします。これは、キャラクターの周りに素敵な無地の色を与えます。次に、その色をガウスシェーダーで使用して、作成したテクスチャーの周りに輪郭のある輝きを与えます。これは別のテクスチャを作成せずに実行でき、すべてキャラクターテクスチャに基づいたシェーダーになると思います。

これはまったく意味がありますか？