[Unity], [Shader] URP 없이 구현하는 방향 지시형 UI 화살표

글에 사용된 모든 셰이더, 예시 UI, 구조는 직접 개발하고 프로젝트에서 구현한 사례입니다.

🎯 글의 목적

2D 게임에서 특정 대상(예: 아이템, 적, 미션 목표)을 화면 중앙의 플레이어 기준으로 "어디에 있는지" 알려주는 방향 지시 화살표를*Built-in Render Pipeline에서도 PostProcessing 없이** 셰이더만으로 구현한 방향 지시 UI를 정리하기 위함.

✅ 주요 특징

• URP/Shader Graph 없이도 작동 (Built-in Shader)
• Canvas UI에서도 적용 가능
• 단일 머티리얼로 Circle + Arrow 표시
• 각도, 색상, 크기 조절 가능

---

🧱 구조 요약

• UI 전용 Sprite에 Material 지정 (Circle + Arrow 포함된 셰이더)
• Transform.LookAt 또는 벡터 연산으로 타겟 방향 계산
• 계산된 각도를 MaterialPropertyBlock으로 셰이더에 전달해 방향 회전

---

📄 셰이더 코드 요약

Shader "Sprites/DetectCircleWithArrow"
{
			/*
            *  여기서 원 반지름의 크기, 화살표의 크기 등을 설정가능하게 노출
            */
    Properties
    {
        _MainTex("Sprite Texture", 2D) = "white" {}
        _Color("Color", Color) = (1, 0, 0, 1)
        _Radius("Radius", Float) = 0.4
        _Thickness("Thickness", Float) = 0.05
        _ArrowAngle("Arrow Angle (Deg)", Range(0,360)) = 0
        _ArrowSize("Arrow Size", Float) = 0.08
    }
    SubShader
    {
        Tags { "Queue" = "Transparent" "RenderType" = "Transparent" }
        LOD 100

        Cull Off
        Lighting Off
        ZWrite Off
        Blend SrcAlpha OneMinusSrcAlpha

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            // 생략: vert, CenteredUV, arrowShape 등
            

            fixed4 frag(v2f i) : SV_Target
            {
                float2 uv = CenteredUV(i.uv);
                float len = length(uv);

                float ring = smoothstep(_Radius, _Radius - _Thickness, len)
                           * (1.0 - smoothstep(_Radius + _Thickness, _Radius, len));

                float rad = radians(_ArrowAngle);
                float2 dir = float2(cos(rad), sin(rad));
                float arrow = arrowShape(uv, dir, _ArrowSize);

                float alpha = max(ring, arrow);
                return fixed4(_Color.rgb, _Color.a * alpha);
            }
            ENDCG
        }
    }
}

---

🛠 셋업 방식

1. Material 생성 및 셰이더 지정

• 위 셰이더로 머티리얼 생성 후, UI Image 혹은 SpriteRenderer에 적용

2. 실시간 각도 계산

• 플레이어에서 원하는 오브젝트로의 방향 벡터를 구하고 그 방향벡터의 각도를 구한다음 인디케이터를 회전시켜주면 됩니다.

void TowardObject(GameObject obj)
{
    detectCircleObj.SetActive(true);
    Vector3 dir = (obj.transform.position - transform.position).normalized;
    float angle = Mathf.Atan2(dir.y, dir.x) * Mathf.Rad2Deg;
    detectCircleObj.transform.rotation = Quaternion.Euler(0, 0, angle);
}

---

📌 활용 팁

• Circle 방향지시 UI는 캐릭터 기준 반투명 배경 위에 얹으면 시인성이 높아집니다.
• Shader 내 ArrowSize와 _Thickness를 애니메이션 매개변수로 연동하면, 거리나 중요도에 따라 강조 UI로 연출도 가능

---

✅ 마무리

Unity에서 URP나 별도 플러그인 없이도 충분히 실용적인 방향지시 UI를 만들 수 있습니다. 비용 효율적인 셰이더 구조를 기반으로 하여, 다양한 장르의 2D 게임에서도 가볍고 유연하게 활용할 수 있습니다.

---