• 【100个 Unity实用技能】☀️ | UGUI Text中加入超链接文本,可直接点击跳转

    发布日期:2024-11-04 13:27    点击次数:146

    图片

    Unity 小科普

    老规矩,先介绍一下 Unity 的科普小知识:

    图片

    图片

    图片

    Unity是 实时3D互动内容创作和运营平台 。包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。Unity 平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。 也可以简单把 Unity 理解为一个游戏引擎,可以用来专业制作游戏! Unity 实用小技能学习 【100个 Unity实用技能】☀️ | UGUI Text中加入超链接文本,可直接点击跳转

    在项目中我们可能会有需求让文本显示中增加以一个可以进行点击的具有超链接的文本。

    最常见的是在一段正常文本内容中,有中间几个字可以进行点击并执行某种事件,比如很多游戏的聊天大厅中会有玩家发出一段文字并带有装备的名称,此时点击装备就可以弹窗显示装备的信息,这个也算是在文本中加入超链接的一种。

    下面就来看一下怎样使用Unity中的UGUI来实现这种效果,实现的方式应该有许多种,这里就演示两种给大家参考使用了!

    第一种方法:重写一个Text文本控件

    需要新建一个脚本HyperlinkText .cs放到项目中,核心脚本代码如下:

    using System;
    using System.Collections;
    using System.Collections.Generic;
    using System.Text;
    using System.Text.RegularExpressions;
    using UnityEngine;
    using UnityEngine.Events;
    using UnityEngine.EventSystems;
    using UnityEngine.UI;
     
    /// <summary>
    /// 文本控件,支持超链接
    /// </summary>
    public class HyperlinkText : Text, IPointerClickHandler
    {
        /// <summary>
        /// 超链接信息类
        /// </summary>
        private class HyperlinkInfo
        {
            public int startIndex;
     
            public int endIndex;
     
            public string name;
     
            public readonly List<Rect> boxes = new List<Rect>();
        }
     
        /// <summary>
        /// 解析完最终的文本
        /// </summary>
        private string m_OutputText;
     
        /// <summary>
        /// 超链接信息列表
        /// </summary>
        private readonly List<HyperlinkInfo> m_HrefInfos = new List<HyperlinkInfo>();
     
        /// <summary>
        /// 文本构造器
        /// </summary>
        protected static readonly StringBuilder s_TextBuilder = new StringBuilder();
     
        [Serializable]
        public class HrefClickEvent : UnityEvent<string> { }
     
        [SerializeField]
        private HrefClickEvent m_OnHrefClick = new HrefClickEvent();
     
        /// <summary>
        /// 超链接点击事件
        /// </summary>
        public HrefClickEvent onHrefClick
        {
            get { return m_OnHrefClick; }
            set { m_OnHrefClick = value; }
        }
     
     
        /// <summary>
        /// 超链接正则
        /// </summary>
        private static readonly Regex s_HrefRegex = new Regex(@"<a href=([^>\n\s]+)>(.*?)(</a>)", RegexOptions.Singleline);
     
        private HyperlinkText mHyperlinkText;
     
        protected override void Awake()
        {
            base.Awake();
            mHyperlinkText = GetComponent<HyperlinkText>();
        }
        protected override void OnEnable()
        {
            base.OnEnable();
            mHyperlinkText.onHrefClick.AddListener(OnHyperlinkTextInfo);
        }
     
        protected override void OnDisable()
        {
            base.OnDisable();
            mHyperlinkText.onHrefClick.RemoveListener(OnHyperlinkTextInfo);
        }
     
     
        public override void SetVerticesDirty()
        {
            base.SetVerticesDirty();
    #if UNITY_EDITOR
            if (UnityEditor.PrefabUtility.GetPrefabType(this) == UnityEditor.PrefabType.Prefab)
            {
                return;
            }
    #endif
            m_OutputText = GetOutputText(text);
     
        }
     
     
        protected override void OnPopulateMesh(VertexHelper toFill)
        {
            var orignText = m_Text;
            m_Text = m_OutputText;
            base.OnPopulateMesh(toFill);
            m_Text = orignText;
            UIVertex vert = new UIVertex();
     
            // 处理超链接包围框
            foreach (var hrefInfo in m_HrefInfos)
            {
                hrefInfo.boxes.Clear();
                if (hrefInfo.startIndex >= toFill.currentVertCount)
                {
                    continue;
                }
     
                // 将超链接里面的文本顶点索引坐标加入到包围框
                toFill.PopulateUIVertex(ref vert, hrefInfo.startIndex);
                var pos = vert.position;
                
                var bounds = new Bounds(pos, Vector3.zero);
                for (int i = hrefInfo.startIndex, m = hrefInfo.endIndex; i < m; i++)
                {
                    if (i >= toFill.currentVertCount)
                    {
                        break;
                    }
     
                    toFill.PopulateUIVertex(ref vert, i);
                    pos = vert.position;
                    if (pos.x < bounds.min.x) // 换行重新添加包围框
                    {
                        hrefInfo.boxes.Add(new Rect(bounds.min, bounds.size));
                        bounds = new Bounds(pos, Vector3.zero);
                    }
                    else
                    {
                        bounds.Encapsulate(pos); // 扩展包围框
     
                    }
                }
     
                hrefInfo.boxes.Add(new Rect(bounds.min, bounds.size));
            }
        }
     
        /// <summary>
        /// 获取超链接解析后的最后输出文本
        /// </summary>
        /// <returns></returns>
        protected virtual string GetOutputText(string outputText)
        {
            s_TextBuilder.Length = 0;
            m_HrefInfos.Clear();
            var indexText = 0;
            foreach (Match match in s_HrefRegex.Matches(outputText))
            {
                s_TextBuilder.Append(outputText.Substring(indexText, match.Index - indexText));
     
                string str = s_TextBuilder.ToString();
                char[] array = str.ToCharArray();                //把字符串转化成字符数组
                IEnumerator enumerator = array.GetEnumerator();         //得到枚举器
                StringBuilder stringBuilder = new StringBuilder();
                while (enumerator.MoveNext())                         //开始枚举
                {
                    if ((char)enumerator.Current != ' ')         //向StringBuilder类对象添加非空格字符
                        stringBuilder.Append(enumerator.Current.ToString());
                }
     
                var group = match.Groups[1];
                var hrefInfo = new HyperlinkInfo
                {
                    startIndex = stringBuilder.Length * 4, // 超链接里的文本起始顶点索引
                    endIndex = (stringBuilder.Length + match.Groups[2].Length - 1) * 4 + 3 ,
                    name = group.Value
                };
     
                m_HrefInfos.Add(hrefInfo);
                s_TextBuilder.Append("<color=blue>");  // 超链接颜色
                s_TextBuilder.Append(match.Groups[2].Value);
                s_TextBuilder.Append("</color>");
                indexText = match.Index + match.Length;
            }
            s_TextBuilder.Append(outputText.Substring(indexText, outputText.Length - indexText));
            return s_TextBuilder.ToString();
        }
     
        /// <summary>
        /// 点击事件检测是否点击到超链接文本
        /// </summary>
        /// <param name="eventData"></param>
        public void OnPointerClick(PointerEventData eventData)
        {
            Vector2 lp = Vector2.zero;
            
            RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, eventData.position, eventData.pressEventCamera, out lp);
     
            foreach (var hrefInfo in m_HrefInfos)
            {
                var boxes = hrefInfo.boxes;
                for (var i = 0; i < boxes.Count; ++i)
                {
                    if (boxes[i].Contains(lp))
                    {
                        m_OnHrefClick.Invoke(hrefInfo.name);
                        return;
                    }
                }
            }
        }
        /// <summary>
        /// 当前点击超链接回调
        /// </summary>
        /// <param name="info">回调信息</param>
        private void OnHyperlinkTextInfo(string info)
        {
            Debug.Log("超链接信息:" + info);
            Application.OpenURL(info);
        }
    }
    

    脚本完成后,在场景中新建一个Text组件(或者Create->Empty也可以),然后将原有的Text组件删掉,添加刚才新建的脚本组件HyperlinkText 。

    此时在该组件中添加文字文本测试:<a href=https://xiaoy.blog.csdn.net/>[小Y博客]</a>,场景中如下显示:

    图片

    此时运行项目,对蓝色字体进行点击即可完成超链接跳转功能。

    如不想跳转网页链接,而是执行项目中的某个事件(如打开某个窗口),可以在脚本中的OnHyperlinkTextInfo()方法中进行具体事件的逻辑添加。

    图片

    第二种方法:通过在Text组件中内嵌Button的方式完成点击功能

    这个方法其实就是属于比较朴实无华的方案了,通过在Text组件再添加一个Button放到指定文字下面完成点击事件,这就属于基本的UGUI操作了,不属于超链接文本那一类。

    不过从表现效果来看,功能是完全可以完成实现的,并且还可以通过富文本来定制各种颜色的文本显示效果。

    图片

    图片

    对于一些需要静态显示的文本来说,这种最原始的方法反而可以更有效的实现功能,但如果是动态文本,那还是不推荐这种方法的。

    🎬 博客主页:https://xiaoy.blog.csdn.net

    🎥 本文由 呆呆敲代码的小Y 原创,首发于 CSDN🙉

    🎄 学习专栏推荐:Unity系统学习专栏

    🌲 游戏制作专栏推荐:游戏制作

    🌲Unity实战100例专栏推荐:Unity 实战100例 教程

    🏅 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!

    📆 未来很长,值得我们全力奔赴更美好的生活✨

    ------------------❤️分割线❤️-------------------------

    图片

    图片

    图片

    图片

    资料白嫖,技术互助

    学习路线指引(点击解锁)知识定位人群定位🧡 Unity系统学习专栏 🧡入门级本专栏从Unity入门开始学习,快速达到Unity的入门水平💛 Unity实战类项目 💛进阶级计划制作Unity的 100个实战案例!助你进入Unity世界,争取做最全的Unity原创博客大全。❤️ 游戏制作专栏 ❤️ 难度偏高分享学习一些Unity成品的游戏Demo和其他语言的小游戏!💚 游戏爱好者万人社区💚 互助/吹水数万人游戏爱好者社区,聊天互助,白嫖奖品💙 Unity100个实用技能💙 Unity查漏补缺针对一些Unity中经常用到的一些小知识和技能进行学习介绍,核心目的就是让我们能够快速学习Unity的知识以达到查漏补缺

    图片

    本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报。