[Unity 2D Shader] 2D 스프라이트 팔레트 스왑 쉐이더

색상만 다른 여러 픽셀 이미지를 위한 쉐이더

위 이미지와 같이 게임을 제작하다보면 픽셀의 형태는 동일하나 색상만 다른 경우가 존재한다. 이런 경우 각 이미지를 만들어 사용하는 방법도 있지만 스프라이트 스왑 기법을 사용하면 생산성을 높일 수 있다.

팔레트 스왑은 이미지를 색상이 아닌 컬러 인덱스를 가지도록 만들고 이후 렌더링 시 현재 선택된 팔레트에서 각 인덱스의 색상을 가져와 렌더링 하는 기법이다.

 

구현

유니티에서 이를 구현할 수 있는 한가지 방법은 기본 스프라이트 쉐이더를 다음과 같이 수정하면 된다.

1. 컬러들을 지정할 팔레트 2D 텍스처 프로퍼티를 추가한다.

2. spriteFrag에서 SampleSpriteTexture(IN.texcoord)를 통해 스프라이트 픽셀 값을 추출한다.

3. 2번에서 얻은 값을 색상이 아닌 인덱스로써 사용하여 1번에서 추가한 텍스처의 해당 인덱스 위치의 색상을 추출해서 가져온다.

4. 3번에서 얻은 값을 픽셀 단편 색상으로 출력한다.

 

여기서 스프라이트 이미지의 각 픽셀의  RGBA값은 위에서 말한대로 색상이 아닌 컬러 인덱스를 지정하도록 만들어지고 사용되어야 한다.만약 하나의 팔레트만 사용한다면 R값을 0~255 인덱스를 지정하는데 사용하여 텍스처의 256가지 색중 하나를 지정하도록 만들 수 있다.만약 2개이상의 텍스처를 사용한다면 R값으로 텍스처를 지정하고 G값으로 해당 텍스처의 인덱스를 지정하는 방식으로 사용할 수 있다. 이를 이용하면 한 이미지에서 부위를 나누어 런타임에서 각각 다른 팔레트를 적용시킬 수 있다.

 

예시: 3개의 팔레트 텍스처를 사용

아래 예시는 과거 프로젝트에서 사용했던 쉐이더로 1x256사이즈의 팔레트 텍스처(각 픽셀이 0~255번째 색상을 나타냄) 3개를 받아 처리하는 쉐이더이다. 각 팔레트 텍스처는 머리, 몸통, 총기를 나타내며 각각에 해당하는 장비를 착용시 해당 장비의 팔레트 텍스처가 메테리얼의 해당 텍스처 슬롯에 들어가 렌더링되는 방식이다.

이 쉐이더에 사용되는 스프라이트 이미지는 R값에 장비 타입(0,1,2로 body, head, gun을 나타냄)을, G값에 팔레트 컬러 인덱스 값을, B값은 dont care, A값은 이미지 투명도에 해당하는 값으로 생성되고 사용된다.

쉐이더는 기본 스프라이트 쉐이더와 동일하나 _Body,_Head,_Gun 세개의 팔레트 텍스처 프로퍼티를 가진다는 점과 픽셀 셰이더, SpriteFrag와 아래와 같다는 점을 제외하고는 동일하다.

fixed4 SpriteFrag(v2f IN) : SV_Target
{
    fixed4 c;
    fixed4 SpriteC = SampleSpriteTexture(IN.texcoord);

    if (SpriteC.r == (float)0)
        c = tex2D(_Body, float2((float)SpriteC.g * 255 / 256, 0)) * IN.color;
    else if (SpriteC.r == (float)1 / 255)
        c = tex2D(_Head, float2((float)SpriteC.g * 255 / 256, 0)) * IN.color;
    else if (SpriteC.r == (float)2 / 255)
        c = tex2D(_Gun, float2((float)SpriteC.g * 255 / 256, 0)) * IN.color;
    else
        c = fixed4(0, 0, 0, 0);


    c.a = SpriteC.a * IN.color.a;

    c.rgb *= c.a;

    return c;
}