스프라이트

현재 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 )

결과는 다음과 같습니다.

나쁘지 않고 매끄럽지 않지만 게임에서 충분히 보이지 않습니다 ...하지만 두께를 조절하고 (더 크게 만들기 위해) 알파로 페이딩하기 전에 첫 번째 불투명 한 윤곽선을 추가하고 싶습니다 (만들기 위해) 더 잘 보입니다). 그리고 가우시안 블러가 내 작업에 대해 생각한 것만 큼 좋지 않은 것 같습니다. :)

또 다른 아이디어는 .png에서 자동으로 생성하는 것입니다 (Photoshop 스크립트를 사용하여 자동으로 생성). 윤곽선 픽셀을 사용자 정의 색상으로 채우고 알파 구성 요소에 알파 값을 저장하고 다른 모든 구성 요소를 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라는 것을 알고 있지만 위키 페이지가 너무 거칠 다면 UDK에서 더 잘 번역 될 수 있는 방법에 대한 자습서 가 있습니다.

속도 향상이 필요한 경우 가장자리 감지 기능은 알파 채널의 가장자리 만 찾아야합니다.

텍스트 개요와 함께 나를 위해 일한 것은 다음과 같습니다.

• 윤곽선 색상을 선택하십시오
• 개요 색상으로 (x-1, y-1)에 텍스트를 그립니다.
• (x + 1, y-1)에 윤곽선 색상으로 텍스트를 그립니다.
• 윤곽선 색상으로 (x-1, y + 1)에 텍스트를 그립니다.
• (x + 1, y + 1)에 윤곽선 색상으로 텍스트를 그립니다.
• (x, y)에 텍스트를 그립니다.

동일한 작업을 수행 할 수 있습니다. 윤곽선 색상으로 불투명 한 픽셀로 스프라이트를 그리면됩니다. 둥근 모서리가 여전히 둥글게 보이도록 투명도 값을 유지합니다.

이 방법은 확장 버전을 그리는 것보다 낫고 대담한 윤곽선 알파를 제어하고 스프라이트 이미지에 "구멍"을 유지하는 것과 같은 다른 멋진 속성을 가지고 있습니다. 단지 단점은 t 윤곽선의 너비를 너무 잘 제어하십시오.

나는이 모든 것에 익숙하지 않지만 여기에 내 아이디어가 있습니다.

텍스처의 알파 채널을 사용하여 다른 텍스처를 만들 수 있습니다. 임계 값 미만의 모든 알파 값은 완전히 투명하게 설정됩니다. 위의 모든 것은 완전히 불투명합니다. 이 새로운 텍스처를 사용하여 RGB의 값을 원하는 색상으로 설정할 수 있습니다. 이 새로운 "텍스처"를 캐릭터 텍스처보다 약간 크게 조정하십시오. 캐릭터 주위에 멋진 단색을 줄 것입니다. 그런 다음 Gaussian 셰이더와 함께 해당 색상을 사용하여 생성 된 텍스처 주위에 멋진 윤곽이 빛납니다. 다른 텍스처를 만들지 않고이 작업을 수행 할 수 있으며 캐릭터 텍스처를 기반으로 한 모든 셰이더가 될 것입니다.

이것은 전혀 의미가 있습니까?