<div id="readability-page-1" class="page"><div id="kakaoContent">

                <div>
                                            <p><a href="/m/category/%EC%9C%A0%EB%8B%88%ED%8B%B0">유니티</a></p><h2>유니티: 11. Text 추가 효과 적용 - Deformer</h2>
                    <p><cite>
                        <span>Seonghwan</span>
                    </cite>
                </p></div>
                <p><time>2021. 5. 13. 16:01</time>
                    <span>
                        
                                                    <a href="#comment" onclick="Utils.smoothScroll(this);return false">
                                
                            </a>
                        
                                                    <span id="title_daumlike">
                                
                                <span id="mobile-reaction"></span>
                                
                            </span>
                                            </span>
                </p>

                
                <div>
                    <p data-ke-size="size18">uGUI와 TextMeshPro 모두에서 사용가능한 Text 컴포넌트 애니메이터를 만드려고 uGUI 코드와 TMPro 코드를 읽어보던 중 BaseMeshEffect 컴포넌트를 이용한 효과 주입이 가능함을 발견했습니다.</p>

<figure data-origin-width="1056" data-origin-height="225" data-ke-mobilestyle="widthOrigin"><span data-url="https://blog.kakaocdn.net/dn/oBdgJ/btq4O96R0E3/VTJZsvdcG0X0FzKRO6AZaK/img.png" data-lightbox="lightbox" data-alt="외곽선, 그림자 효과 컴포넌트"><img src="https://blog.kakaocdn.net/dn/oBdgJ/btq4O96R0E3/VTJZsvdcG0X0FzKRO6AZaK/img.png" data-origin-width="1056" data-origin-height="225" data-ke-mobilestyle="widthOrigin"></span><figcaption>외곽선, 그림자 효과 컴포넌트</figcaption></figure>

<p data-ke-size="size18">uGUI 패키지에 포함되어있는 Outline, Shadow 컴포넌트인데요. BaseMeshEffect를 이용해 추가적인 효과를 더해주는 기능을 제공합니다. 이를 참고해서 Mesh 버텍스를 랜덤하게 이동시켜 글자가 꿈틀거리는 효과를 만들었습니다.</p>

<figure data-origin-width="839" data-origin-height="358" data-filename="Honeycam 2021-05-13 15-51-54.gif" data-ke-mobilestyle="widthOrigin"><span data-url="https://blog.kakaocdn.net/dn/qWQfW/btq4ScVUSz2/PMmMOl4IupxuyPN7k9Xq9k/img.gif" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/qWQfW/btq4ScVUSz2/PMmMOl4IupxuyPN7k9Xq9k/img.gif" data-origin-width="839" data-origin-height="358" data-filename="Honeycam 2021-05-13 15-51-54.gif" data-ke-mobilestyle="widthOrigin"></span></figure>

<p data-ke-size="size18">기능 구현을 확인했고, 다른 이펙트와 겹쳐 사용이 가능한지 확인도 했습니다. 단순히 생성된 메쉬의 버텍스 위치만 옮겨주는 거다보니 크게 문제는 없을거라 생각했습니다.</p>

<figure data-origin-width="839" data-origin-height="358" data-filename="Honeycam 2021-05-13 15-56-06.gif" data-ke-mobilestyle="widthOrigin"><span data-url="https://blog.kakaocdn.net/dn/sRg0l/btq4Scaylsd/KEgWNQVukXlWwA8EbZW2E1/img.gif" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/sRg0l/btq4Scaylsd/KEgWNQVukXlWwA8EbZW2E1/img.gif" data-origin-width="839" data-origin-height="358" data-filename="Honeycam 2021-05-13 15-56-06.gif" data-ke-mobilestyle="widthOrigin"></span></figure>

<p data-ke-size="size18">그림자(Shadow)와 외곽선(Outline)효과도 문제없이 함께 적용됩니다. 프로파일링 결과 성능은 조금 저하되었지만 신경쓸 정도는 아닙니다. uGUI와 TMPro 패키지 내에 직접 기능을 구현해 성능상의 이점을 볼 수 있게 작업예정입니다.</p>

<div data-ke-type="moreLess" data-text-more="더보기" data-text-less="닫기"><p><a>더보기</a></p><div>
<p data-ke-size="size18"># <span>TextDeformer.cs&nbsp;</span></p>

<pre id="code_1621061614865" data-ke-language="cs" data-ke-type="codeblock"><code>using System.Collections.Generic;

namespace UnityEngine.UI
{
	[AddComponentMenu("UI/Effects/Text Deformation", 18)]
	[RequireComponent(typeof(Text))]
	public sealed class TextDeformer : BaseMeshEffect
	{
		private TextDeformer() { }
        
		[SerializeField] [Range(0, 5f)] private float m_power = 1f;
		[SerializeField] [Range(0, 0.5f)] private float m_updateInterval = 0.1f;

		private readonly List&lt;UIVertex&gt; vertexList = new List&lt;UIVertex&gt;();
		
		private UIVertex targetVertex = default;
		private Vector3 vertexOffset = default;
		private float estimatedDeltaTime = default;

		private void Update()
		{
			if (m_updateInterval &lt;= 0f)
			{
				graphic.SetVerticesDirty();
				return;
			}

			if (estimatedDeltaTime &lt; m_updateInterval)
			{
				estimatedDeltaTime += Time.deltaTime;
				return;
			}

			estimatedDeltaTime -= m_updateInterval;
			graphic.SetVerticesDirty();
		}

		public override void ModifyMesh(VertexHelper vertex)
		{
			vertexList.Clear();
			vertex.GetUIVertexStream(vertexList);
			
			int count = vertexList.Count;
			for (int i = 0; i &lt; count; i += 6)
			{
				SetOffset();
				SetPosition(i);
				SetPosition(i + 5);

				SetOffset();
				SetPosition(i + 2);
				SetPosition(i + 3);

				SetOffset();
				SetPosition(i + 1);

				SetOffset();
				SetPosition(i + 4);
			}

			vertex.Clear();
			vertex.AddUIVertexTriangleStream(vertexList);
		}

		private void SetOffset()
		{
			vertexOffset.x = Random.Range(-m_power, m_power);
			vertexOffset.y = Random.Range(-m_power, m_power);
		}

		private void SetPosition(int index)
		{
			targetVertex = vertexList[index];
			targetVertex.position += vertexOffset;
			vertexList[index] = targetVertex;
		}
	}
}</code></pre>


</div>
</div>

                                                            
                    
											
					
                    
                    
                </div>

                                    
                
                
                                    
                
                


                

                                    
                
                
            </div></div>

Fireplace

samueljeon

uGUI와 TextMeshPro 모두에서 사용가능한 Text 컴포넌트 애니메이터를 만드려고 uGUI 코드와 TMPro 코드를 읽어보던 중 BaseMeshEffect 컴포넌트를 이용한 효과 주입이 가능함을 발견했습니다.
 
 
uGUI 패키지에 포함되어있는 Outline, Shadow 컴포넌트인데요. BaseMeshEffect를 이용해 추가적인 효과를 더해주는 기능을 제공합니다. 이를 참고해서 Mesh 버텍스를 랜덤하게 이동시켜 글자가 꿈틀거리는 효과를 만들었습니다.
 
 
기능 구현을 확인했고, 다른 이펙트와 겹쳐 사용이 가능한지 확인도 했습니다. 단순히 생성된 메쉬의 버텍스 위치만 옮겨주는 거다보니 크게 문제는 없을거라 생각했습니다.
 
 
그림자(Shadow)와 외곽선(Outline)효과도 문제없이 함께 적용됩니다. 프로파일링 결과 성능은 조금 저하되었지만 신경쓸 정도는 아닙니다. uGUI와 TMPro 패키지 내에 직접 기능을 구현해 성능상의 이점을 볼 수 있게 작업예정입니다.
 
더보기
# TextDeformer.cs 
 
using System.Collections.Generic;
namespace UnityEngine.UI
{
	[AddComponentMenu("UI/Effects/Text Deformation", 18)]
	[RequireComponent(typeof(Text))]
	public sealed class TextDeformer : BaseMeshEffect
	{
		private TextDeformer() { }
        
		[SerializeField] [Range(0, 5f)] private float m_power = 1f;
		[SerializeField] [Range(0, 0.5f)] private float m_updateInterval = 0.1f;
		private readonly List<UIVertex> vertexList = new List<UIVertex>();
		
		private UIVertex targetVertex = default;
		private Vector3 vertexOffset = default;
		private float estimatedDeltaTime = default;
		private void Update()
		{
			if (m_updateInterval <= 0f)
			{
				graphic.SetVerticesDirty();
				return;
			}
			if (estimatedDeltaTime < m_updateInterval)
			{
				estimatedDeltaTime += Time.deltaTime;
				return;
			}
			estimatedDeltaTime -= m_updateInterval;
			graphic.SetVerticesDirty();
		}
		public override void ModifyMesh(VertexHelper vertex)
		{
			vertexList.Clear();
			vertex.GetUIVertexStream(vertexList);
			
			int count = vertexList.Count;
			for (int i = 0; i < count; i += 6)
			{
				SetOffset();
				SetPosition(i);
				SetPosition(i + 5);
				SetOffset();
				SetPosition(i + 2);
				SetPosition(i + 3);
				SetOffset();
				SetPosition(i + 1);
				SetOffset();
				SetPosition(i + 4);
			}
			vertex.Clear();
			vertex.AddUIVertexTriangleStream(vertexList);
		}
		private void SetOffset()
		{
			vertexOffset.x = Random.Range(-m_power, m_power);
			vertexOffset.y = Random.Range(-m_power, m_power);
		}
		private void SetPosition(int index)
		{
			targetVertex = vertexList[index];
			targetVertex.position += vertexOffset;
			vertexList[index] = targetVertex;
		}
	}
}

유니티: 11. Text 추가 효과 적용 - Deformer

댓글