[Unity] 오브젝트 위에 UI그리기(NPC 이름, 말풍선)

오버레이 적용했을 때

 

오버레이 적용안됐을 때

 

오브젝트 위에 UI를 그려야할때가 있습니다.

 

플레이어 머리의 닉네임

NPC의 말풍선

등등

 

TMP와 Overlay Shader로 쉽게 구현해볼 수 있습니다.

---

.

.

.

 

1. TMP의 제공되는 Overlay Shader 사용하기

머테리얼 복사하기

TMP로 폰트를 생성하면 기본으로 만들어진 머테리얼을 복사해줍니다. (구분하기 쉽게 이름도 변경)

 

 

 

 

머테리얼의 쉐이더 변경

폰트 머테리얼의 쉐이더를 Distance Field Overlay로 변경해줍니다.

(위는 PC용, 밑에는 모바일용 쉐이더)

 

 

 

생성한 머테리얼 텍스트에 적용

맨앞으로 랜더하고 싶은 TMP Text의 머테리얼 프리셋을 방금 만듬 머테리얼로 바꿔줍니다.

(저는 NPC의 이름으로 테스트 해보겠습니다.)

 

 

적용된 화면

오버레이가 적용된 모습

 

원래라면 나무에 가려져야할 Text가 맨 앞에 랜더되고 있습니다.

 

 

 

 

 

이번엔 이미지도 Overlay로 랜더 해보겠습니다.

 

이미지는 Overlay Shader를 사용해야 한다!

쉐이더 파일을 받거나 밑에 코드를 복붙하여 프로젝트에 쉐이더를 만들어 줍니다.

 

OverlayNoZTest.shader

0.00MB

 

 

Shader "UI/Default_OverlayNoZTest"
{
    Properties
    {
        [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
        _Color("Tint", Color) = (1,1,1,1)

        _StencilComp("Stencil Comparison", Float) = 8
        _Stencil("Stencil ID", Float) = 0
        _StencilOp("Stencil Operation", Float) = 0
        _StencilWriteMask("Stencil Write Mask", Float) = 255
        _StencilReadMask("Stencil Read Mask", Float) = 255
        _ColorMask("Color Mask", Float) = 15
    }
        SubShader
        {
            Tags
            {
                "Queue" = "Overlay"
                "IgnoreProjector" = "True"
                "RenderType" = "Transparent"
                "PreviewType" = "Plane"
                "CanUseSpriteAtlas" = "True"
            }
            Stencil
            {
                Ref[_Stencil]
                Comp[_StencilComp]
                Pass[_StencilOp]
                ReadMask[_StencilReadMask]
                WriteMask[_StencilWriteMask]

            }

            Cull Off
            Lighting Off
            ZWrite Off
            ZTest Off
            Blend SrcAlpha OneMinusSrcAlpha

            ColorMask[_ColorMask]

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

                struct appdata_t
                {
                    float4 vertex   : POSITION;
                    float4 color    : COLOR;
                    float2 texcoord : TEXCOORD0;
                };
                struct v2f
                {
                    float4 vertex   : SV_POSITION;
                    fixed4 color : COLOR;
                    half2 texcoord  : TEXCOORD0;
                };

                fixed4 _Color;
                fixed4 _TextureSampleAdd; //Added for font color support
                v2f vert(appdata_t IN)

                {
                    v2f OUT;
                    OUT.vertex = UnityObjectToClipPos(IN.vertex);
                    OUT.texcoord = IN.texcoord;

    #ifdef UNITY_HALF_TEXEL_OFFSET
                    OUT.vertex.xy += (_ScreenParams.zw - 1.0) * float2(-1,1);
    #endif
                    OUT.color = IN.color * _Color;
                    return OUT;
                }

                sampler2D _MainTex;
                fixed4 frag(v2f IN) : SV_Target

                {
                half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;  //Added for font color support
                clip(color.a - 0.01);
                return color;
                }
            ENDCG
            }
        }
}

 

 

 

오버레이용 머테리얼 생성!

 

 

 

 

쉐이더를 Overlay Shader로 변경

머테리얼 쉐이더 적용

 

 

 

 

 

 

원하는 이미지의 머테리얼을 방금 만듬 머테리얼로 적용시킵니다.

이미지의 머테리얼 적용

 

 

 

 

 

이미지까지 적용한 모습

텍스트와 이미지 둘다 적용된 모습이다.

 

 

이런식으로 내가 원하는 이미지와 텍스트를

오브젝트의 가려지지 않게 랜더하는 방법에 대해 포스팅 해보았습니다!

 

 

 

---

.

.

.

 

*저는 캔버스가 항상 카메라를 보고 있게하는 스크립트를 월드 캔버스에 추가한 상태입니다.

(원하는 월드캔버스에 컴포넌트 추가하면 사용할 수 있습니다.)

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class LookCameraCanvas : MonoBehaviour
{
    GameObject cam;
    private void Start()
    {
        cam = Camera.main.gameObject;

    }

    private void LateUpdate()
    {
        if(cam != null)
        {
            transform.LookAt(cam.transform);
            transform.Rotate(0, 180, 0);
        }
    }
}