1. 项目概述为什么UI跑马灯是必备技能在Unity UI开发中处理动态文本展示是个高频需求。想象一个游戏公告板、一个聊天窗口或者一个实时更新的比分牌当文本内容超出UI容器的可视范围时直接截断或换行都会破坏用户体验。这时一个流畅的文本滚动跑马灯效果就成了优雅的解决方案。它能让有限的空间承载无限的信息流是提升界面专业度和交互流畅性的关键细节。很多新手开发者甚至一些有经验的同行可能会觉得实现一个跑马灯无非就是移动Text组件的位置。但实际操作过你就会发现这里面的坑一点也不少滚动速度如何与文本长度自适应循环衔接时如何做到无缝平滑性能开销如何控制尤其是在移动设备上文本内容动态更新时滚动状态又该如何重置这些问题不解决做出来的跑马灯要么卡顿要么闪烁要么逻辑混乱。今天我就结合自己踩过的无数个坑从最基础的原理讲起手把手带你实现一个高性能、可配置、易维护的Unity Text滚动跑马灯。我们会深入Unity的UI系统底层剖析RectTransform与Text组件的协作并最终封装成一个即插即用的MarqueeText组件。无论你是正在优化游戏HUD的UI工程师还是想为应用添加动态公告的前端开发者这篇内容都能让你直接“抄作业”。2. 核心原理与方案选型不止是移动位置那么简单在动手写代码之前我们必须搞清楚Unity UI系统的工作机制。Unity的UGUIUnity GUI是一个基于Canvas的渲染系统所有UI元素都是RectTransform组件和各类渲染组件如Image,Text,TextMeshPro的组合。跑马灯效果的核心本质上是控制Text组件所依附的RectTransform的锚定位置anchoredPosition在水平或垂直方向上的持续变化。2.1 两种主流实现思路的权衡市面上常见的实现思路主要有两种各有优劣。思路一单文本位移法这是最直观的方法。只有一个Text组件通过不断修改其RectTransform的anchoredPosition.x水平滚动或anchoredPosition.y垂直滚动来实现移动。当文本完全移出视图时瞬间将其位置重置到起始点形成循环。优点实现简单只有一个GameObjectDraw Call最少。缺点循环时有“跳变”感。当文本尾部离开屏幕、头部还未进入屏幕的瞬间屏幕是空白的除非文本长度远超容器宽度否则很难做到视觉上的无缝衔接。此外重置位置的时机判断需要精确计算文本和容器的像素宽度受字体、字号、字符间距影响大容易出错。思路二双文本拼接法为了消除“跳变”更专业的做法是使用两个相同的Text组件比如Text_A和Text_B。初始时Text_A在容器内Text_B紧贴在Text_A的右侧或下方容器外。两者同时向左滚动。当Text_A完全移出容器左侧时立即将其放置到Text_B的右侧如此循环往复。优点真正实现了视觉上的无限、无缝循环滚动效果非常平滑。缺点多了一个Text组件理论上会增加一个Draw Call但如果两个Text在同一Canvas下且材质相同Unity可能会进行合批实际影响需测试。实现逻辑稍复杂需要管理两个文本对象的位置关系。注意对于简单的、非严格的无限循环场景如只滚动一次的公告单文本法足够。但对于需要持续、平滑滚动的核心UI如游戏主页的新闻跑马灯双文本拼接法是生产环境的首选。它能提供最好的视觉效果用户体验的提升远大于那一点点额外的复杂度。因此本文将重点详解双文本拼接法的实现。2.2 关键组件与性能考量Canvas确保你的UI在合适的Canvas下。对于频繁更新的跑马灯最好将其放在一个独立的、渲染模式为Screen Space - Camera或World Space的Canvas上并考虑启用Canvas Group来管理其显隐而非直接SetActive以减少重建开销。Text vs TextMeshProUnity原生的Text组件在功能上足够但在大量文本、复杂字体或高频更新时性能不如TextMeshPro。TextMeshPro是Unity官方推荐的文本解决方案渲染效率更高支持更丰富的文本效果如字距调整、富文本并且自带的TMP_Text组件提供了preferredWidth等属性能更准确地获取文本渲染后的实际宽度这对我们计算滚动逻辑至关重要。强烈建议在新项目或性能敏感的场景中使用TextMeshPro。下文示例将兼顾两者但以TextMeshPro为主进行讲解。RectTransform的锚点这是最容易出错的地方。跑马灯文本的RectTransform锚点Anchor必须设置为水平拉伸Stretch吗不一定。如果你的跑马灯容器宽度固定文本只需在固定区域内滚动那么将文本的锚点设置为左边居中Left, Center或自定义对齐然后只修改anchoredPosition.x会更简单直观。关键在于你要明确滚动轴向上的坐标参考系。我们通常将容器视为一个“视窗”文本在这个视窗内移动因此控制文本自身的anchoredPosition更为直接。3. 双文本无缝跑马灯完整实现接下来我们一步步构建这个MarqueeText组件。我会先给出TextMeshPro版本的完整代码然后再说明如何适配原生Text。3.1 组件结构与属性定义首先创建一个C#脚本命名为TMP_MarqueeText。using UnityEngine; using TMPro; // 引入TextMeshPro命名空间 using UnityEngine.UI; // 如果需要用到Mask组件 [RequireComponent(typeof(RectTransform))] public class TMP_MarqueeText : MonoBehaviour { [Header(基础设置)] [SerializeField] private TMP_Text textPrefab; // 文本预制体需提前在Inspector中赋值 [SerializeField] private string content 这里是跑马灯文本内容...; // 要显示的文本 [SerializeField] private float scrollSpeed 50.0f; // 滚动速度像素/秒 [SerializeField] private bool playOnAwake true; // 是否在唤醒时开始播放 [SerializeField] private bool horizontalScroll true; // true为水平滚动false为垂直滚动 [Header(循环与边界)] [SerializeField] private float spacing 10.0f; // 两个文本之间的间隔 [SerializeField] private bool loop true; // 是否循环播放 // 运行时变量 private TMP_Text[] textInstances new TMP_Text[2]; // 两个文本实例 private RectTransform containerRect; // 容器RectTransform private float instanceWidth; // 单个文本实例的宽度 private bool isPlaying false; private Vector2 startPosition; // 文本的起始位置通常是容器右侧外 void Awake() { containerRect GetComponentRectTransform(); InitializeMarquee(); if (playOnAwake) { Play(); } } void Update() { if (!isPlaying) return; float delta scrollSpeed * Time.deltaTime; Vector2 moveDelta horizontalScroll ? new Vector2(-delta, 0) : new Vector2(0, -delta); // 移动两个文本实例 for (int i 0; i textInstances.Length; i) { if (textInstances[i] ! null) { textInstances[i].rectTransform.anchoredPosition moveDelta; } } // 检查并重置位置以实现循环 CheckAndResetPosition(); } }这段代码定义了核心属性并在Update中实现了基本的移动逻辑。但关键的初始化(InitializeMarquee)和重置检查(CheckAndResetPosition)还没写这正是难点所在。3.2 核心难点初始化与无缝循环逻辑InitializeMarquee方法需要完成以下几件事清理可能存在的旧实例。实例化两个文本对象并设置其父对象和文本内容。精确计算单个文本的渲染宽度。正确摆放两个文本的初始位置一个在容器内起点一个紧接其后。private void InitializeMarquee() { // 1. 清理旧实例 foreach (var instance in textInstances) { if (instance ! null) Destroy(instance.gameObject); } if (textPrefab null) { Debug.LogError(TMP_MarqueeText: 请指定Text预制体, this); return; } // 2. 实例化并设置 for (int i 0; i 2; i) { textInstances[i] Instantiate(textPrefab, containerRect); textInstances[i].rectTransform.localScale Vector3.one; textInstances[i].text content; // 关键设置锚点和轴心点方便定位 // 锚点设为左上角(0,1)这样anchoredPosition的(0,0)就在容器的左上角 textInstances[i].rectTransform.anchorMin new Vector2(0, 1); textInstances[i].rectTransform.anchorMax new Vector2(0, 1); textInstances[i].rectTransform.pivot new Vector2(0, 1); // 轴心点也在左上角 } // 3. 强制Canvas立即重建以获取正确的文本尺寸重要 Canvas.ForceUpdateCanvases(); // 4. 计算文本宽度。使用preferredWidth它包含了渲染后的实际宽度。 instanceWidth textInstances[0].preferredWidth; if (instanceWidth 0) { Debug.LogWarning(文本宽度为0或未计算请检查字体或内容。, this); instanceWidth 100f; // 给一个默认值 } // 5. 设置初始位置 startPosition horizontalScroll ? new Vector2(containerRect.rect.width, 0) : // 水平滚动起始于容器右侧外 new Vector2(0, -containerRect.rect.height); // 垂直滚动起始于容器底部外 textInstances[0].rectTransform.anchoredPosition startPosition; // 第二个文本放在第一个文本的右侧或下方加上间隔 Vector2 secondPos horizontalScroll ? new Vector2(startPosition.x instanceWidth spacing, startPosition.y) : new Vector2(startPosition.x, startPosition.y - instanceWidth - spacing); textInstances[1].rectTransform.anchoredPosition secondPos; }CheckAndResetPosition方法是实现无缝循环的魔法所在。我们需要判断任意一个文本实例是否已经完全移出了容器的可视范围相反方向。如果是就将其重置到另一个文本实例的后面形成接力。private void CheckAndResetPosition() { if (!loop) return; for (int i 0; i textInstances.Length; i) { RectTransform rt textInstances[i].rectTransform; float currentPos horizontalScroll ? rt.anchoredPosition.x : rt.anchoredPosition.y; float limitPos horizontalScroll ? -instanceWidth : instanceWidth; // 移出界限 // 判断是否完全移出容器从另一侧 bool isOutOfView horizontalScroll ? (currentPos limitPos) : (currentPos -limitPos); if (isOutOfView) { // 找到另一个文本实例 int otherIndex (i 0) ? 1 : 0; RectTransform otherRt textInstances[otherIndex].rectTransform; Vector2 otherPos otherRt.anchoredPosition; // 将当前文本重置到另一个文本的后面 Vector2 resetPos; if (horizontalScroll) { resetPos new Vector2(otherPos.x instanceWidth spacing, startPosition.y); } else { resetPos new Vector2(startPosition.x, otherPos.y - instanceWidth - spacing); } rt.anchoredPosition resetPos; // 可选动态更新文本内容如果需要显示不同内容 // textInstances[i].text GetNextContent(); } } }3.3 控制方法与边界处理为了让组件更易用我们还需要添加一些公共方法。public void Play() { isPlaying true; // 可以在这里添加开始播放的动画或事件 } public void Pause() { isPlaying false; } public void Stop() { isPlaying false; // 重置到初始状态 InitializeMarquee(); } public void SetContent(string newContent) { if (content newContent) return; content newContent; // 停止当前滚动用新内容重新初始化 Stop(); InitializeMarquee(); if (playOnAwake) Play(); // 如果原本是播放状态则继续播放 } // 在Inspector中修改速度时实时生效 void OnValidate() { // 注意OnValidate只在编辑器模式下运行 if (Application.isPlaying isPlaying) { // 可以在这里处理运行时修改速度的逻辑但通常不需要因为Update中直接使用scrollSpeed } }4. 实战细节、性能优化与避坑指南代码写完了但离“好用”还差得远。下面这些是我在项目中真实踩过的坑和总结的优化点。4.1 精确获取文本尺寸Canvas.ForceUpdateCanvases()的妙用与慎用上面代码中有一行Canvas.ForceUpdateCanvases()它的作用是强制所有Canvas立即执行布局和渲染计算这样我们才能在同一帧内获取到preferredWidth这个准确值。如果没有这行代码preferredWidth可能返回0或者上一帧的旧值导致初始位置计算错误。但是这是一个有性能开销的操作它会导致所有标记为脏的UI元素立即重建。如果每帧都调用会对性能造成严重影响。优化方案只在必要时调用如InitializeMarquee、SetContent时调用。使用协程延迟一帧在某些情况下可以yield return new WaitForEndOfFrame();后再获取宽度利用Unity本帧的自然渲染流程避免强制更新。缓存结果如果文本内容不变instanceWidth只需要计算一次。可以将它序列化[SerializeField]并在编辑器模式下预先计算好通过一个[ContextMenu(“Calculate Width”)]的按钮运行时直接使用缓存值彻底避免运行时计算。4.2 容器与遮罩看不见的边界管理我们的跑马灯通常需要在某个特定区域内显示超出的部分要隐藏。这就需要用到Mask或RectMask2D组件。Mask基于图像的Alpha通道进行裁剪功能强大但性能开销稍大。RectMask2D基于矩形进行裁剪性能极佳是2D UI遮罩的首选。实操步骤创建一个空的GameObject作为“跑马灯容器”。为其添加RectTransform、RectMask2D组件。调整RectTransform的尺寸为你需要的视窗大小。将我们的TMP_MarqueeText脚本挂载到这个容器上。将textPrefab拖拽赋值。这个预制体应该是一个独立的、带有TMP_Text组件的GameObject。关键设置确保textPrefab的RectTransform的锚点Anchor和轴心点Pivot设置与脚本中初始化时设置的一致如左上角。不一致会导致定位计算复杂化。4.3 适配Unity原生Text组件如果你因为项目历史原因必须使用原生UnityEngine.UI.Text原理完全一样只是API稍有不同。脚本调整将TMP_Text替换为Text并移除TMPro命名空间。获取宽度原生Text没有preferredWidth。你需要通过Text.preferredWidth来获取注意这是属性不是方法。同样需要在Canvas.ForceUpdateCanvases()之后调用才能获得准确值。性能注意原生Text在频繁更新文本或改变尺寸时引发的网格重建开销可能比TextMeshPro更大需更关注性能。一个简单的适配版本关键部分如下using UnityEngine.UI; public class LegacyTextMarquee : MonoBehaviour { [SerializeField] private Text textPrefab; // 使用原生Text private Text[] textInstances new Text[2]; private void CalculateWidth() { Canvas.ForceUpdateCanvases(); // 原生Text通过preferredWidth属性获取 instanceWidth textInstances[0].preferredWidth; } // ... 其余逻辑与TMP版本类似 }4.4 性能优化清单合批检查确保两个Text实例使用完全相同的字体、材质、纹理。这样Unity的UI合批系统才能将它们合并为一个Draw Call。你可以在Frame Debugger窗口中查看Draw Call数量来验证。避免每帧SetText除非内容动态变化否则不要在Update中频繁调用textInstances[i].text ...这会导致网格频繁重建。控制Update频率如果跑马灯速度很慢或者不是核心视觉元素可以考虑不用Update而用协程WaitForSeconds来控制移动间隔减少每帧的计算。对象池如果你的场景中需要动态创建和销毁大量跑马灯比如列表项务必使用对象池来管理Text实例避免频繁的Instantiate和Destroy。4.5 常见问题与排查技巧问题1跑马灯不滚动或滚动方向相反。排查检查scrollSpeed的正负值。在Update的移动逻辑中anchoredPosition.x减小是向左移动增大是向右移动。确认你的horizontalScroll布尔值和moveDelta计算是否正确。检查isPlaying是否为truePlay()方法是否被调用问题2文本闪烁或循环时有明显跳跃。排查这几乎肯定是CheckAndResetPosition中的边界判断逻辑有误。limitPos的计算是否准确instanceWidth获取是否正确添加Debug.Log输出currentPos和limitPos观察重置触发时的值。检查两个文本实例的初始间距spacing是否设置过小或为负确保它大于等于0。问题3文本显示不全或被意外裁剪。排查首先检查RectMask2D组件的范围是否正确。其次检查textPrefab本身的RectTransform尺寸是否被意外设置过小通常Text或TMP_Text组件的RectTransform尺寸应设置为自动由文本内容决定不要手动设置固定宽高除非你有特殊布局需求。问题4在编辑器里运行正常打包后位置错乱。排查这通常是获取preferredWidth的时机问题。在Awake或Start中UI可能还未完成初始布局。尝试将初始化逻辑放在Start中或者使用Coroutine配合yield return null等待一帧后再执行InitializeMarquee。问题5滚动速度不稳定时快时慢。排查确保移动计算使用了Time.deltaTime来平衡帧率差异。永远不要用固定值去修改anchoredPosition。检查是否有其他代码如动画系统也在修改同一个RectTransform的位置造成冲突。5. 功能扩展与高级应用一个基础的跑马灯组件完成后我们可以根据项目需求进行扩展让它变得更强大。5.1 支持富文本与样式混合TextMeshPro天生支持富文本。你可以直接在content字符串中加入color#FF0000红色/color这样的标签。我们的组件无需修改即可支持因为TMP_Text.text属性会直接解析这些标签。但需要注意富文本可能会影响preferredWidth的计算极端复杂的样式混合最好预先测试。5.2 添加缓动动画与交互渐入渐出可以在容器边缘添加一个CanvasGroup通过修改其alpha值或者使用一个渐变的Image作为遮罩让文本在进入和离开视窗时有淡入淡出效果。暂停/继续悬停通过实现IPointerEnterHandler和IPointerExitHandler接口当鼠标或触摸悬停在跑马灯上时调用Pause()离开时调用Play()提升交互体验。点击事件为每个textInstances添加Button组件或事件触发器并动态监听点击。难点在于需要将点击事件正确映射到当前显示的内容上因为两个实例在循环复用。可以通过在SetContent时为每一段内容生成唯一ID并在点击时根据ID来触发对应回调。5.3 应对超长文本与性能如果文本非常长instanceWidth会很大导致两个文本实例间隔非常远在重置位置前会有很长的空白期。这不是无缝循环的理想状态。解决方案分段处理将超长文本按容器宽度的整数倍进行分割。创建多于2个的文本实例如4个让它们首尾相连形成一个更长的“文本带”。滚动和重置逻辑类似但需要管理一个文本实例池和当前显示的内容索引队列。 这种方法更复杂但能保证无论多长的文本在视窗内都能保持至少两个片段在连续滚动视觉效果更佳。这通常用于新闻播报等场景。实现一个稳定可靠的Unity Text跑马灯远不止是写几行移动位置的代码。从双文本的无缝衔接到性能敏感的Canvas.ForceUpdateCanvases调用从RectMask2D的选用到TextMeshPro与原生Text的差异每一个细节都影响着最终效果和运行效率。我最深的体会是UI效果开发三分在实现七分在调试和优化。务必在真机尤其是目标移动设备上测试你的跑马灯观察其在不同帧率下的流畅度、内存占用以及电池消耗情况。把上面提供的TMP_MarqueeText组件当作一个起点根据你的具体项目需求打磨它的每一个参数和细节你就能得到一个真正属于你自己的、工业级的UI动态文本解决方案。
1. 项目概述为什么UI跑马灯是必备技能在Unity UI开发中处理动态文本展示是个高频需求。想象一个游戏公告板、一个聊天窗口或者一个实时更新的比分牌当文本内容超出UI容器的可视范围时直接截断或换行都会破坏用户体验。这时一个流畅的文本滚动跑马灯效果就成了优雅的解决方案。它能让有限的空间承载无限的信息流是提升界面专业度和交互流畅性的关键细节。很多新手开发者甚至一些有经验的同行可能会觉得实现一个跑马灯无非就是移动Text组件的位置。但实际操作过你就会发现这里面的坑一点也不少滚动速度如何与文本长度自适应循环衔接时如何做到无缝平滑性能开销如何控制尤其是在移动设备上文本内容动态更新时滚动状态又该如何重置这些问题不解决做出来的跑马灯要么卡顿要么闪烁要么逻辑混乱。今天我就结合自己踩过的无数个坑从最基础的原理讲起手把手带你实现一个高性能、可配置、易维护的Unity Text滚动跑马灯。我们会深入Unity的UI系统底层剖析RectTransform与Text组件的协作并最终封装成一个即插即用的MarqueeText组件。无论你是正在优化游戏HUD的UI工程师还是想为应用添加动态公告的前端开发者这篇内容都能让你直接“抄作业”。2. 核心原理与方案选型不止是移动位置那么简单在动手写代码之前我们必须搞清楚Unity UI系统的工作机制。Unity的UGUIUnity GUI是一个基于Canvas的渲染系统所有UI元素都是RectTransform组件和各类渲染组件如Image,Text,TextMeshPro的组合。跑马灯效果的核心本质上是控制Text组件所依附的RectTransform的锚定位置anchoredPosition在水平或垂直方向上的持续变化。2.1 两种主流实现思路的权衡市面上常见的实现思路主要有两种各有优劣。思路一单文本位移法这是最直观的方法。只有一个Text组件通过不断修改其RectTransform的anchoredPosition.x水平滚动或anchoredPosition.y垂直滚动来实现移动。当文本完全移出视图时瞬间将其位置重置到起始点形成循环。优点实现简单只有一个GameObjectDraw Call最少。缺点循环时有“跳变”感。当文本尾部离开屏幕、头部还未进入屏幕的瞬间屏幕是空白的除非文本长度远超容器宽度否则很难做到视觉上的无缝衔接。此外重置位置的时机判断需要精确计算文本和容器的像素宽度受字体、字号、字符间距影响大容易出错。思路二双文本拼接法为了消除“跳变”更专业的做法是使用两个相同的Text组件比如Text_A和Text_B。初始时Text_A在容器内Text_B紧贴在Text_A的右侧或下方容器外。两者同时向左滚动。当Text_A完全移出容器左侧时立即将其放置到Text_B的右侧如此循环往复。优点真正实现了视觉上的无限、无缝循环滚动效果非常平滑。缺点多了一个Text组件理论上会增加一个Draw Call但如果两个Text在同一Canvas下且材质相同Unity可能会进行合批实际影响需测试。实现逻辑稍复杂需要管理两个文本对象的位置关系。注意对于简单的、非严格的无限循环场景如只滚动一次的公告单文本法足够。但对于需要持续、平滑滚动的核心UI如游戏主页的新闻跑马灯双文本拼接法是生产环境的首选。它能提供最好的视觉效果用户体验的提升远大于那一点点额外的复杂度。因此本文将重点详解双文本拼接法的实现。2.2 关键组件与性能考量Canvas确保你的UI在合适的Canvas下。对于频繁更新的跑马灯最好将其放在一个独立的、渲染模式为Screen Space - Camera或World Space的Canvas上并考虑启用Canvas Group来管理其显隐而非直接SetActive以减少重建开销。Text vs TextMeshProUnity原生的Text组件在功能上足够但在大量文本、复杂字体或高频更新时性能不如TextMeshPro。TextMeshPro是Unity官方推荐的文本解决方案渲染效率更高支持更丰富的文本效果如字距调整、富文本并且自带的TMP_Text组件提供了preferredWidth等属性能更准确地获取文本渲染后的实际宽度这对我们计算滚动逻辑至关重要。强烈建议在新项目或性能敏感的场景中使用TextMeshPro。下文示例将兼顾两者但以TextMeshPro为主进行讲解。RectTransform的锚点这是最容易出错的地方。跑马灯文本的RectTransform锚点Anchor必须设置为水平拉伸Stretch吗不一定。如果你的跑马灯容器宽度固定文本只需在固定区域内滚动那么将文本的锚点设置为左边居中Left, Center或自定义对齐然后只修改anchoredPosition.x会更简单直观。关键在于你要明确滚动轴向上的坐标参考系。我们通常将容器视为一个“视窗”文本在这个视窗内移动因此控制文本自身的anchoredPosition更为直接。3. 双文本无缝跑马灯完整实现接下来我们一步步构建这个MarqueeText组件。我会先给出TextMeshPro版本的完整代码然后再说明如何适配原生Text。3.1 组件结构与属性定义首先创建一个C#脚本命名为TMP_MarqueeText。using UnityEngine; using TMPro; // 引入TextMeshPro命名空间 using UnityEngine.UI; // 如果需要用到Mask组件 [RequireComponent(typeof(RectTransform))] public class TMP_MarqueeText : MonoBehaviour { [Header(基础设置)] [SerializeField] private TMP_Text textPrefab; // 文本预制体需提前在Inspector中赋值 [SerializeField] private string content 这里是跑马灯文本内容...; // 要显示的文本 [SerializeField] private float scrollSpeed 50.0f; // 滚动速度像素/秒 [SerializeField] private bool playOnAwake true; // 是否在唤醒时开始播放 [SerializeField] private bool horizontalScroll true; // true为水平滚动false为垂直滚动 [Header(循环与边界)] [SerializeField] private float spacing 10.0f; // 两个文本之间的间隔 [SerializeField] private bool loop true; // 是否循环播放 // 运行时变量 private TMP_Text[] textInstances new TMP_Text[2]; // 两个文本实例 private RectTransform containerRect; // 容器RectTransform private float instanceWidth; // 单个文本实例的宽度 private bool isPlaying false; private Vector2 startPosition; // 文本的起始位置通常是容器右侧外 void Awake() { containerRect GetComponentRectTransform(); InitializeMarquee(); if (playOnAwake) { Play(); } } void Update() { if (!isPlaying) return; float delta scrollSpeed * Time.deltaTime; Vector2 moveDelta horizontalScroll ? new Vector2(-delta, 0) : new Vector2(0, -delta); // 移动两个文本实例 for (int i 0; i textInstances.Length; i) { if (textInstances[i] ! null) { textInstances[i].rectTransform.anchoredPosition moveDelta; } } // 检查并重置位置以实现循环 CheckAndResetPosition(); } }这段代码定义了核心属性并在Update中实现了基本的移动逻辑。但关键的初始化(InitializeMarquee)和重置检查(CheckAndResetPosition)还没写这正是难点所在。3.2 核心难点初始化与无缝循环逻辑InitializeMarquee方法需要完成以下几件事清理可能存在的旧实例。实例化两个文本对象并设置其父对象和文本内容。精确计算单个文本的渲染宽度。正确摆放两个文本的初始位置一个在容器内起点一个紧接其后。private void InitializeMarquee() { // 1. 清理旧实例 foreach (var instance in textInstances) { if (instance ! null) Destroy(instance.gameObject); } if (textPrefab null) { Debug.LogError(TMP_MarqueeText: 请指定Text预制体, this); return; } // 2. 实例化并设置 for (int i 0; i 2; i) { textInstances[i] Instantiate(textPrefab, containerRect); textInstances[i].rectTransform.localScale Vector3.one; textInstances[i].text content; // 关键设置锚点和轴心点方便定位 // 锚点设为左上角(0,1)这样anchoredPosition的(0,0)就在容器的左上角 textInstances[i].rectTransform.anchorMin new Vector2(0, 1); textInstances[i].rectTransform.anchorMax new Vector2(0, 1); textInstances[i].rectTransform.pivot new Vector2(0, 1); // 轴心点也在左上角 } // 3. 强制Canvas立即重建以获取正确的文本尺寸重要 Canvas.ForceUpdateCanvases(); // 4. 计算文本宽度。使用preferredWidth它包含了渲染后的实际宽度。 instanceWidth textInstances[0].preferredWidth; if (instanceWidth 0) { Debug.LogWarning(文本宽度为0或未计算请检查字体或内容。, this); instanceWidth 100f; // 给一个默认值 } // 5. 设置初始位置 startPosition horizontalScroll ? new Vector2(containerRect.rect.width, 0) : // 水平滚动起始于容器右侧外 new Vector2(0, -containerRect.rect.height); // 垂直滚动起始于容器底部外 textInstances[0].rectTransform.anchoredPosition startPosition; // 第二个文本放在第一个文本的右侧或下方加上间隔 Vector2 secondPos horizontalScroll ? new Vector2(startPosition.x instanceWidth spacing, startPosition.y) : new Vector2(startPosition.x, startPosition.y - instanceWidth - spacing); textInstances[1].rectTransform.anchoredPosition secondPos; }CheckAndResetPosition方法是实现无缝循环的魔法所在。我们需要判断任意一个文本实例是否已经完全移出了容器的可视范围相反方向。如果是就将其重置到另一个文本实例的后面形成接力。private void CheckAndResetPosition() { if (!loop) return; for (int i 0; i textInstances.Length; i) { RectTransform rt textInstances[i].rectTransform; float currentPos horizontalScroll ? rt.anchoredPosition.x : rt.anchoredPosition.y; float limitPos horizontalScroll ? -instanceWidth : instanceWidth; // 移出界限 // 判断是否完全移出容器从另一侧 bool isOutOfView horizontalScroll ? (currentPos limitPos) : (currentPos -limitPos); if (isOutOfView) { // 找到另一个文本实例 int otherIndex (i 0) ? 1 : 0; RectTransform otherRt textInstances[otherIndex].rectTransform; Vector2 otherPos otherRt.anchoredPosition; // 将当前文本重置到另一个文本的后面 Vector2 resetPos; if (horizontalScroll) { resetPos new Vector2(otherPos.x instanceWidth spacing, startPosition.y); } else { resetPos new Vector2(startPosition.x, otherPos.y - instanceWidth - spacing); } rt.anchoredPosition resetPos; // 可选动态更新文本内容如果需要显示不同内容 // textInstances[i].text GetNextContent(); } } }3.3 控制方法与边界处理为了让组件更易用我们还需要添加一些公共方法。public void Play() { isPlaying true; // 可以在这里添加开始播放的动画或事件 } public void Pause() { isPlaying false; } public void Stop() { isPlaying false; // 重置到初始状态 InitializeMarquee(); } public void SetContent(string newContent) { if (content newContent) return; content newContent; // 停止当前滚动用新内容重新初始化 Stop(); InitializeMarquee(); if (playOnAwake) Play(); // 如果原本是播放状态则继续播放 } // 在Inspector中修改速度时实时生效 void OnValidate() { // 注意OnValidate只在编辑器模式下运行 if (Application.isPlaying isPlaying) { // 可以在这里处理运行时修改速度的逻辑但通常不需要因为Update中直接使用scrollSpeed } }4. 实战细节、性能优化与避坑指南代码写完了但离“好用”还差得远。下面这些是我在项目中真实踩过的坑和总结的优化点。4.1 精确获取文本尺寸Canvas.ForceUpdateCanvases()的妙用与慎用上面代码中有一行Canvas.ForceUpdateCanvases()它的作用是强制所有Canvas立即执行布局和渲染计算这样我们才能在同一帧内获取到preferredWidth这个准确值。如果没有这行代码preferredWidth可能返回0或者上一帧的旧值导致初始位置计算错误。但是这是一个有性能开销的操作它会导致所有标记为脏的UI元素立即重建。如果每帧都调用会对性能造成严重影响。优化方案只在必要时调用如InitializeMarquee、SetContent时调用。使用协程延迟一帧在某些情况下可以yield return new WaitForEndOfFrame();后再获取宽度利用Unity本帧的自然渲染流程避免强制更新。缓存结果如果文本内容不变instanceWidth只需要计算一次。可以将它序列化[SerializeField]并在编辑器模式下预先计算好通过一个[ContextMenu(“Calculate Width”)]的按钮运行时直接使用缓存值彻底避免运行时计算。4.2 容器与遮罩看不见的边界管理我们的跑马灯通常需要在某个特定区域内显示超出的部分要隐藏。这就需要用到Mask或RectMask2D组件。Mask基于图像的Alpha通道进行裁剪功能强大但性能开销稍大。RectMask2D基于矩形进行裁剪性能极佳是2D UI遮罩的首选。实操步骤创建一个空的GameObject作为“跑马灯容器”。为其添加RectTransform、RectMask2D组件。调整RectTransform的尺寸为你需要的视窗大小。将我们的TMP_MarqueeText脚本挂载到这个容器上。将textPrefab拖拽赋值。这个预制体应该是一个独立的、带有TMP_Text组件的GameObject。关键设置确保textPrefab的RectTransform的锚点Anchor和轴心点Pivot设置与脚本中初始化时设置的一致如左上角。不一致会导致定位计算复杂化。4.3 适配Unity原生Text组件如果你因为项目历史原因必须使用原生UnityEngine.UI.Text原理完全一样只是API稍有不同。脚本调整将TMP_Text替换为Text并移除TMPro命名空间。获取宽度原生Text没有preferredWidth。你需要通过Text.preferredWidth来获取注意这是属性不是方法。同样需要在Canvas.ForceUpdateCanvases()之后调用才能获得准确值。性能注意原生Text在频繁更新文本或改变尺寸时引发的网格重建开销可能比TextMeshPro更大需更关注性能。一个简单的适配版本关键部分如下using UnityEngine.UI; public class LegacyTextMarquee : MonoBehaviour { [SerializeField] private Text textPrefab; // 使用原生Text private Text[] textInstances new Text[2]; private void CalculateWidth() { Canvas.ForceUpdateCanvases(); // 原生Text通过preferredWidth属性获取 instanceWidth textInstances[0].preferredWidth; } // ... 其余逻辑与TMP版本类似 }4.4 性能优化清单合批检查确保两个Text实例使用完全相同的字体、材质、纹理。这样Unity的UI合批系统才能将它们合并为一个Draw Call。你可以在Frame Debugger窗口中查看Draw Call数量来验证。避免每帧SetText除非内容动态变化否则不要在Update中频繁调用textInstances[i].text ...这会导致网格频繁重建。控制Update频率如果跑马灯速度很慢或者不是核心视觉元素可以考虑不用Update而用协程WaitForSeconds来控制移动间隔减少每帧的计算。对象池如果你的场景中需要动态创建和销毁大量跑马灯比如列表项务必使用对象池来管理Text实例避免频繁的Instantiate和Destroy。4.5 常见问题与排查技巧问题1跑马灯不滚动或滚动方向相反。排查检查scrollSpeed的正负值。在Update的移动逻辑中anchoredPosition.x减小是向左移动增大是向右移动。确认你的horizontalScroll布尔值和moveDelta计算是否正确。检查isPlaying是否为truePlay()方法是否被调用问题2文本闪烁或循环时有明显跳跃。排查这几乎肯定是CheckAndResetPosition中的边界判断逻辑有误。limitPos的计算是否准确instanceWidth获取是否正确添加Debug.Log输出currentPos和limitPos观察重置触发时的值。检查两个文本实例的初始间距spacing是否设置过小或为负确保它大于等于0。问题3文本显示不全或被意外裁剪。排查首先检查RectMask2D组件的范围是否正确。其次检查textPrefab本身的RectTransform尺寸是否被意外设置过小通常Text或TMP_Text组件的RectTransform尺寸应设置为自动由文本内容决定不要手动设置固定宽高除非你有特殊布局需求。问题4在编辑器里运行正常打包后位置错乱。排查这通常是获取preferredWidth的时机问题。在Awake或Start中UI可能还未完成初始布局。尝试将初始化逻辑放在Start中或者使用Coroutine配合yield return null等待一帧后再执行InitializeMarquee。问题5滚动速度不稳定时快时慢。排查确保移动计算使用了Time.deltaTime来平衡帧率差异。永远不要用固定值去修改anchoredPosition。检查是否有其他代码如动画系统也在修改同一个RectTransform的位置造成冲突。5. 功能扩展与高级应用一个基础的跑马灯组件完成后我们可以根据项目需求进行扩展让它变得更强大。5.1 支持富文本与样式混合TextMeshPro天生支持富文本。你可以直接在content字符串中加入color#FF0000红色/color这样的标签。我们的组件无需修改即可支持因为TMP_Text.text属性会直接解析这些标签。但需要注意富文本可能会影响preferredWidth的计算极端复杂的样式混合最好预先测试。5.2 添加缓动动画与交互渐入渐出可以在容器边缘添加一个CanvasGroup通过修改其alpha值或者使用一个渐变的Image作为遮罩让文本在进入和离开视窗时有淡入淡出效果。暂停/继续悬停通过实现IPointerEnterHandler和IPointerExitHandler接口当鼠标或触摸悬停在跑马灯上时调用Pause()离开时调用Play()提升交互体验。点击事件为每个textInstances添加Button组件或事件触发器并动态监听点击。难点在于需要将点击事件正确映射到当前显示的内容上因为两个实例在循环复用。可以通过在SetContent时为每一段内容生成唯一ID并在点击时根据ID来触发对应回调。5.3 应对超长文本与性能如果文本非常长instanceWidth会很大导致两个文本实例间隔非常远在重置位置前会有很长的空白期。这不是无缝循环的理想状态。解决方案分段处理将超长文本按容器宽度的整数倍进行分割。创建多于2个的文本实例如4个让它们首尾相连形成一个更长的“文本带”。滚动和重置逻辑类似但需要管理一个文本实例池和当前显示的内容索引队列。 这种方法更复杂但能保证无论多长的文本在视窗内都能保持至少两个片段在连续滚动视觉效果更佳。这通常用于新闻播报等场景。实现一个稳定可靠的Unity Text跑马灯远不止是写几行移动位置的代码。从双文本的无缝衔接到性能敏感的Canvas.ForceUpdateCanvases调用从RectMask2D的选用到TextMeshPro与原生Text的差异每一个细节都影响着最终效果和运行效率。我最深的体会是UI效果开发三分在实现七分在调试和优化。务必在真机尤其是目标移动设备上测试你的跑马灯观察其在不同帧率下的流畅度、内存占用以及电池消耗情况。把上面提供的TMP_MarqueeText组件当作一个起点根据你的具体项目需求打磨它的每一个参数和细节你就能得到一个真正属于你自己的、工业级的UI动态文本解决方案。
函数：原理、应用与性能优化指南)
双梁正问题 【 torch 实战】（Python代码实现）)
