TextMeshPro에서 링크 만들기

Posted by Eun JongHyeok on October 01, 2022
  1. 샘플 만들기
  2. 정규표현식 적용
  3. OnPointerClick 구현

TextMeshPro의 태그를 이용하여 링크기능을 만들 수 있습니다.

http URL이 넘어올 때 정규표현식으로 URL 체크후 브라우저로 띄울 수 있는 링크를 구현해보도록 하겠습니다.

정규표현식과 링크 URL이 클 경우 줄이는 방식은 해당 블로그를 참고하였습니다.

샘플 만들기

버튼을 눌렀을 때 TMPro에 텍스트를 세팅하도록 샘플 프로젝트를 만들었습니다.

img5

버튼을 클릭했을 때는 SetMessageToTMPro가 호출되도록 하였습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
public void SetMessageToTMPro()
{
    var txt = "URL 주소 : www.daum.net, \n다른 주소 : https://pixabay.com/images/search/nature/";

    // TMP Object
    var obj = GameObject.FindWithTag("TextDialog");
    if (obj == null)
        return;

    var tmp = obj.GetComponent<TextMeshProUGUI>();

    tmp.SetText(CreateLinkFromText(txt));
}

간단하게 테스트할 텍스트를 넣어줍니다.

정규표현식 적용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
string CreateLinkFromText(string text)
{
    Regex regx = new Regex("((http://|https://|www\\.)([A-Z0-9.-:]{1,})\\.[0-9A-Z?;~&#=\\-_\\./]{2,})", RegexOptions.IgnoreCase | RegexOptions.Singleline);
    MatchCollection matches = regx.Matches(text);
    foreach (Match match in matches)
        text = text.Replace(match.Value, ShortLink(match.Value, 12));
    return text;
}

string ShortLink(string link, int maxLength)
{
    string text = link;
    if (link.Length > maxLength)
        text = string.Format("{0}{1}", link.Substring(0, maxLength - 3), "...");
    return string.Format("<color=blue><u><link=\"{0}\">{1}</link></u></color>", link, text);
}

정규표현식에 맞는 URL을 발견하면 길이를 체크해서 적당한 크기의 링크를 만들어 줍니다.

이후에는 링크를 클릭했을 때의 동작을 구현해주어야합니다.

OnPointerClick 구현

TextMeshPro가 있는 게임 오브젝트에 아래의 스크립트를 추가합니다.

img6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
using TMPro;
using UnityEngine;
using UnityEngine.EventSystems;

[RequireComponent(typeof(TextMeshProUGUI))]
public class ClickHandlerScript : MonoBehaviour, IPointerClickHandler
{
    [SerializeField]
    private TextMeshProUGUI textDialog;

    public void OnPointerClick(PointerEventData eventData)
    {
        int linkIndex = TMP_TextUtilities.FindIntersectingLink(textDialog, eventData.position, eventData.pressEventCamera);
        if (linkIndex != -1)
        {
            TMP_LinkInfo linkInfo = textDialog.textInfo.linkInfo[linkIndex];
            string linkURL = linkInfo.GetLinkID();
            if (!string.IsNullOrEmpty(linkURL))
            {
                Application.OpenURL(linkURL);
            }
        }
    }
}

IPointerClickHandler의 OnPointerClick을 구현해면 클릭이 가능해집니다.

링크를 클릭하면 브라우저로 URL을 띄울 수 있습니다.

gif1


TextMeshPro

← Previous Post Next Post