Shader on GameSweetGame

Unity Sword Trail Effect

Fri, 21 Feb 2025 00:00:00 +0900

I added basic attack animations to my character controller.

Swinging the sword felt empty. Games I’ve played always had that afterimage trail effect when swinging fast.

Implementation

Generate a mesh along the sword’s trajectory.

Draw a texture on the mesh and push it with a shader. The timing needs to follow right behind the sword’s path.

To sync the timing, adjust the shader texture Offset while watching the sword in the animation.

After searching for how animation stores shader texture values, I found Material._MainTex_ST.

Now I can control shader values through animation.

Tip: Set the shader texture mode to Clamp instead of Wrap. Otherwise the texture keeps repeating. With Clamp, it extends the last pixel seamlessly.

Basic sword trail effect done. Next step: make it 3D and add more options for fancier effects.

Extra Tip

When keying the animation, use the Broken tangent option to prevent the texture from visibly snapping back to the start when the attack animation ends.

DirectX 라이팅 기초 — Ambient, Diffuse, Specular

Wed, 03 Jan 2024 00:00:00 +0900

라이팅 계산

float4 fvTotalAmbient = fvAmbient * fvBaseColor;
float4 fvTotalDiffuse = fvDiffuse * fNDotL * fvBaseColor;
float4 fvTotalSpecular = fvSpecular * pow( fRDotV, fSpecularPower );

return( saturate( fvTotalAmbient + fvTotalDiffuse + fvTotalSpecular ) );

메모

saturate()는 0~1 사이의 값으로 클램핑
HDR에서는 saturate 함수를 사용하면 안 됨 (1.0 이상의 값이 필요하기 때문)
텍스처 압축하기 때문에 큰 용량 가능
림라이트는 버텍스에서 노멀벡터와 연산 하는게 테크닉

DirectX UI 시스템 구현

Mon, 01 Jan 2024 00:00:00 +0900

엔티티를 만들 때 UITestScript를 컴포넌트로 추가한다. 생성할 때 종류를 넣어준다.

Update 함수 안에 종류 별로 구현.

UI 종류

STATIC — 그냥 가만히 있는 UI
ONMOUSE — 마우스를 올리면 숨쉬고 있는 UI
GAUGE — 게임에서 시간이나 배고픔, 미니게임 등 사용가능한 게이지 UI
만약 애니메이션이 추가 되면 더 늘려야 함

Shader Code

float4 main(PixelIn input) : SV_TARGET
{
 float4 texColor = float4(1, 1, 1, 0);

 if(UItype == 1)
 {
 // 텍스처 좌표가 0과 1을 벗어나면 frac 함수를 사용하여
 // 해당 범위 내로 되돌려주어 반복
 input.tex.x = frac(input.tex.x);
 input.tex.y = frac(input.tex.y);
 texColor = shaderTexture.Sample(SampleType, input.tex);
 if (texColor.a < 0.01)
 discard;
 }
 else if(UItype == 2)
 {
 float2 textureOffset = float2(0.0f, 0.0f);
 float2 textureSize = float2(1.0f, 1 - textureTranslation);

 // 텍스처 좌표가 특정 영역을 벗어나면 투명하게 처리
 if (input.tex.x < textureOffset.x ||
 input.tex.x > textureOffset.x + textureSize.x ||
 1 - input.tex.y < textureOffset.y ||
 1 - input.tex.y > textureOffset.y + textureSize.y)
 {
 discard;
 }
 else
 {
 texColor = shaderTexture.Sample(SampleType, input.tex);
 }
 }
 else
 {
 texColor = shaderTexture.Sample(SampleType, input.tex);
 if (texColor.a < 0.01)
 discard;
 }
 return texColor;
}

핵심 포인트

UItype == 1 (ONMOUSE): frac()으로 텍스처 좌표를 0~1 범위로 반복시켜 숨쉬는 느낌 구현
UItype == 2 (GAUGE): textureTranslation으로 텍스처 표시 영역을 조절해서 게이지 채워지는 효과
else (STATIC): 단순 텍스처 샘플링, 알파 0.01 미만이면 discard