1. 项目概述与核心思路最近在带几个刚入行的朋友做Unity项目他们总想从一些有视觉冲击力、又能快速看到效果的模块入手。聊起这个我第一个想到的就是游戏里的加载页面尤其是像《王者荣耀》那种一个精致的背景图配上一个动感十足的进度条等待时间都感觉没那么枯燥了。这确实是个绝佳的UI入门实战案例它麻雀虽小五脏俱全涵盖了UGUI的核心组件使用、图片资源管理、逻辑控制与视觉反馈的结合。今天我就以“复刻王者荣耀加载页面”为目标带大家从头到尾走一遍把里面的门道讲透。无论你是刚接触Unity UI的新手还是想优化自己项目中加载体验的开发者这篇内容都能给你提供一套可直接“抄作业”的方案。这个项目的核心目标很明确创建一个视觉上接近《王者荣耀》加载页面的UI重点是实现那个平滑增长、带有光效流动的进度条。听起来简单但要做好我们需要拆解几个关键点首先是UI布局背景、Logo、进度条框架、百分比文本等元素如何层级分明地摆放其次是进度条本身它不是一个简单的Slider而是由底图、填充图、流动光效、进度文本等多个部分复合而成的最后是控制逻辑如何让进度条根据真实的加载进度平滑更新并处理好加载完成后的场景跳转。我们会完全使用Unity内置的UGUI系统来实现不依赖额外的插件确保大家能掌握最本质的原理。2. 界面布局与资源准备2.1 画布Canvas与屏幕适配一切UI的起点都是Canvas。在Unity中新建一个UI Canvas时系统通常会帮你自动创建EventSystem。对于加载页面这种需要全屏覆盖的UICanvas的渲染模式Render Mode我强烈建议使用“Screen Space - Overlay”。这个模式下UI会直接渲染在屏幕最上层不受场景内3D相机的影响性能开销也相对较小。屏幕适配是第一个要踩稳的坑。我们需要在Canvas Scaler组件上进行设置。王者荣耀这类手游需要兼顾多种屏幕比例特别是现在流行的全面屏手机。我的经验是将UI Scale Mode设置为“Scale With Screen Size”然后设定一个参考分辨率Reference Resolution比如 1920 x 1080 或 2340 x 1080后者是很多安卓旗舰机的分辨率。Match选项可以选择 0.5兼顾宽高或者根据你的背景图是更依赖宽度还是高度来调整。这里有个关键技巧将Canvas Scaler的“Screen Match Mode”设为“Match Width or Height”并调整Match值。如果你的背景图在宽屏上容易露出黑边那就让Match偏向Height值接近1如果担心在窄屏上两侧内容被裁剪就让Match偏向Width值接近0。这个没有绝对标准需要根据你的核心视觉元素来微调。注意务必在项目初期就用目标设备或Unity的Game窗口模拟多种分辨率如19.5:9, 20:9, 16:9进行测试确保UI布局不会严重错位或拉伸。2.2 层级结构与基础组件搭建加载页面的UI层级结构清晰自底向上通常是全屏背景Image一张高清的游戏主题背景图设置为拉伸全屏。Logo或标题Image/Text放置在屏幕中上部。进度条容器Panel或空GameObject用于归拢所有进度条相关元素方便整体控制位置。进度条底图Image进度条的背景样式比如一个深色的槽。进度条填充图Image类型为Filled这是进度条的主体会根据百分比填充。流动光效Image一个细长的、半透明的光带图片在填充条上方循环移动。进度文本TextMeshPro - Text显示“XX%”的文本。在Unity中创建时我建议这样操作先创建一个空GameObject命名为“LoadingScreen”然后在其下创建上述各个UI元素。将进度条底图、填充图、光效、文本都放在一个名为“ProgressBar”的Panel下。这样做的好处是你只需要调整“ProgressBar”这个节点的位置就能移动整个进度条组件保持内部元素的相对位置不变管理起来非常方便。对于进度条填充图关键步骤是选中填充图Image组件将“Image Type”从“Simple”改为“Filled”。填充方式Fill Method通常选择“Horizontal”水平从左到右这也是最常见的形式。此时你通过代码或Inspector窗口修改“Fill Amount”属性0到1就能控制填充的进度了。3. 进度条视觉组件深度解析3.1 填充图Filled Image的进阶设置很多人用Filled Image就只调个Fill Amount其实里面有几个参数对提升视觉效果很有帮助。Fill Method填充方法除了Horizontal还有Vertical、Radial 360等。Radial适合做圆形进度条。我们这里用Horizontal。Fill Origin填充起点决定从哪个方向开始填充。对于从左到右的进度选择“Left”。Fill Amount填充量核心参数0为空1为满。Clockwise顺时针在径向填充时使用。为了让进度条动画更平滑我们不会在代码里直接跳跃式地设置Fill Amount而是使用Mathf.Lerp或Mathf.MoveTowards进行插值。例如目标进度是targetProgress当前显示进度是currentDisplayProgress每帧更新currentDisplayProgress Mathf.Lerp(currentDisplayProgress, targetProgress, Time.deltaTime * smoothSpeed);其中smoothSpeed是平滑速度值越大追赶越快动画越“急”值越小则越“缓”。通常设置在5-10之间能获得比较自然的加速追赶效果。3.2 流动光效的实现技巧流动光效是让进度条“活”起来的关键。我们准备一张细长的、一端渐隐的白色或淡蓝色光带PNG图片确保背景透明。创建一个Image使用这张光效图将其锚点Anchor预设为左中Left, Middle。将其放置在进度条填充图的上层在Hierarchy中顺序在下并调整位置使其初始状态隐藏在进度条填充区域的左端外侧。编写一个简单的循环移动动画。通常有两种思路基于位置的移动在Update函数中根据当前填充比例计算光效应该出现的位置。例如光效始终在填充条的“前锋”位置。lightEffect.anchoredPosition new Vector2(fillImage.rectTransform.rect.width * currentDisplayProgress, 0);但这样光效会跳跃。更好的方法是让光效在填充区域内循环移动即使进度暂停光效也在动增加等待时的动态感。基于UV的移动更优为光效Image的材质使用一个Unlit/Transparent类型的Shader并通过脚本修改其材质的主纹理偏移_MainTex_ST。这种方式性能更好且能轻松实现平滑循环。原理是不断增加纹理的X轴偏移量material.SetTextureOffset(“_MainTex”, new Vector2(offset, 0));offset随时间累加到达一定值后归零实现无缝循环。记得在脚本开始时获取材质实例material GetComponent().material;为避免多实例问题可以使用material GetComponent().materialForRendering;或自行管理材质实例。3.3 进度文本的实时更新与美化使用TextMeshProTMP来显示进度百分比这是Unity目前官方推荐的文本方案渲染质量高功能强大。创建一个TMP Text对象将其锚点Anchor设置为进度条填充图的上方或内部。 在更新进度显示的逻辑中我们需要同步更新这个文本。注意显示的数字应该是我们平滑过渡后的currentDisplayProgress而不是真实的加载进度这样文字和填充条的动画才能同步。progressText.text Mathf.RoundToInt(currentDisplayProgress * 100).ToString() “%”;这里用Mathf.RoundToInt进行四舍五入取整比Mathf.FloorToInt向下取整在视觉上更友好因为100%的出现会更及时。 美化方面可以为百分比数字添加描边Outline或阴影Shadow效果TMP组件自带了这些功能。颜色可以设置为与游戏主题色相符的亮色如金色或青色使其在背景上更突出。4. 核心控制逻辑与代码实现4.1 加载进度模拟与真实场景加载在演示或开发初期我们经常需要模拟加载进度。一个简单的方法是使用协程Coroutine和yield return。IEnumerator SimulateLoading() { float simulatedProgress 0f; float duration 3.0f; // 模拟加载总时长 float timer 0f; while (timer duration) { timer Time.deltaTime; simulatedProgress Mathf.Clamp01(timer / duration); // 这里将模拟进度传递给进度条更新逻辑 UpdateProgressBar(simulatedProgress); yield return null; // 等待下一帧 } // 加载完成跳转场景 OnLoadingComplete(); }然而真实的游戏加载往往涉及多个步骤读取资源、初始化系统、加载场景等。更专业的做法是使用UnityEngine.SceneManagement.SceneManager.LoadSceneAsync。这个异步操作会返回一个AsyncOperation对象它提供了真实的加载进度。AsyncOperation asyncLoad SceneManager.LoadSceneAsync(“YourTargetSceneName”); asyncLoad.allowSceneActivation false; // 关键先不自动激活场景 while (!asyncLoad.isDone) { // asyncLoad.progress 的范围是 [0, 0.9]因为最后0.1是激活阶段 float trueProgress asyncLoad.progress / 0.9f; // 映射到 [0, 1] UpdateProgressBar(trueProgress); // 当进度0.9时表示加载已就绪等待一个条件如点击或自动延时再激活 if (asyncLoad.progress 0.9f) { // 这里可以显示“点击继续”的提示 // 当条件满足时asyncLoad.allowSceneActivation true; } yield return null; }将allowSceneActivation设为false可以让我们在场景加载完毕后仍然停留在加载界面直到所有准备工作如播放一个加载完成的动画、等待用户点击就绪后再跳转体验更可控。4.2 进度条更新管理器我们需要一个中心脚本来协调填充条、光效、文本的更新。这个脚本可以挂在“ProgressBar”或“LoadingScreen”对象上。using UnityEngine; using UnityEngine.UI; using TMPro; public class LoadingProgressBar : MonoBehaviour { [Header(“进度条组件”)] public Image fillImage; // 填充图 public Image lightEffect; // 流动光效 public TextMeshProUGUI progressText; // 进度文本 [Header(“动画设置”)] public float smoothSpeed 5f; // 平滑速度 public float lightEffectSpeed 1f; // 光效流动速度 private float currentDisplayProgress 0f; // 当前显示进度平滑后 private Material lightEffectMaterial; // 光效材质实例 private float lightEffectOffset 0f; // 光效纹理偏移量 void Start() { // 初始化光效材质 if (lightEffect ! null) { lightEffectMaterial lightEffect.materialForRendering; if (lightEffectMaterial null) lightEffectMaterial new Material(lightEffect.material); // 创建实例 lightEffect.material lightEffectMaterial; } // 初始状态 SetProgressImmediate(0f); } void Update() { // 1. 平滑更新光效UV偏移独立于进度循环流动 if (lightEffectMaterial ! null) { lightEffectOffset Time.deltaTime * lightEffectSpeed; if (lightEffectOffset 1.0f) lightEffectOffset - 1.0f; lightEffectMaterial.SetTextureOffset(“_MainTex”, new Vector2(lightEffectOffset, 0)); } // 2. 更新进度文本基于平滑后的显示进度 if (progressText ! null) { progressText.text Mathf.RoundToInt(currentDisplayProgress * 100).ToString() “%”; } } // 外部调用此方法来更新目标进度 public void UpdateTargetProgress(float targetProgress) { targetProgress Mathf.Clamp01(targetProgress); // 使用Lerp平滑过渡显示进度 currentDisplayProgress Mathf.Lerp(currentDisplayProgress, targetProgress, Time.deltaTime * smoothSpeed); // 更新填充图 if (fillImage ! null) { fillImage.fillAmount currentDisplayProgress; } } // 立即设置进度用于重置或跳转 public void SetProgressImmediate(float progress) { progress Mathf.Clamp01(progress); currentDisplayProgress progress; if (fillImage ! null) fillImage.fillAmount progress; if (progressText ! null) progressText.text Mathf.RoundToInt(progress * 100).ToString() “%”; } }这个管理器提供了UpdateTargetProgress方法供外部如场景加载协程调用驱动整个进度条的视觉更新。光效的流动是独立循环的确保即使进度卡住页面也有动态效果。4.3 加载状态管理与场景切换完整的加载页面还需要处理不同的状态。我通常定义一个简单的状态机Loading加载中更新进度条显示百分比。Complete加载完成进度到达100%可能播放一个“加载完成”的轻微动画如填充条闪烁一下或文字放大缩小并显示一个“点击屏幕继续”的提示按钮或文本。Transition跳转中用户点击后播放一个简单的淡出动画然后正式激活并跳转到目标场景。状态管理可以通过枚举和协程来实现。当AsyncOperation的进度达到0.9即加载就绪后我们可以将状态切换到Complete显示提示UI。用户交互后再执行场景激活和页面退场动画。5. 性能优化与常见问题排查5.1 资源管理与Draw Call优化加载页面本身资源应尽量轻量但也要注意优化。图集Sprite Atlas将进度条相关的所有小图片底图、填充图、光效、按钮图标打包到一个Sprite Atlas中。这能显著减少Draw Call。在Unity中创建Sprite Atlas后只需将相关图片拖入并确保UI Image的“Sprite”来源是这个图集即可。材质实例化如前所述流动光效如果需要修改材质属性务必使用materialForRendering或Instantiate(material)来获取或创建材质实例避免修改共享材质影响所有使用该材质的UI元素。隐藏与销毁加载页面跳转后旧场景的资源会被卸载。但如果你使用对象池或在DDOLDontDestroyOnLoad对象上保留了加载页面记得在适当时机将其禁用或销毁释放内存。5.2 常见问题与解决方案实录在实际操作中你可能会遇到以下问题问题现象可能原因排查与解决方案进度条填充图不显示或显示异常1. Image组件的Source Image未赋值。2. Image Type未设置为Filled。3. 填充图原始图片资源不是“Sprite (2D and UI)”类型。1. 检查Inspector面板确保图片已拖拽赋值。2. 确认Image Type为Filled并检查Fill Method和Fill Origin是否正确。3. 在Project窗口选中图片在Inspector中检查Texture Type是否为“Sprite (2D and UI)”。进度条更新卡顿、不流畅1. 在Update中直接进行大量同步加载操作阻塞主线程。2. 平滑插值的smoothSpeed值过大或过小。3. 每帧都创建新的临时对象如字符串拼接。1. 确保加载操作是异步的如使用LoadSceneAsync、Addressables.LoadAssetAsync。2. 调整smoothSpeed值5-10是常用范围也可以使用更平滑的Mathf.SmoothDamp函数。3. 优化代码避免在Update中频繁进行string 操作可缓存部分字符串或使用StringBuilder。流动光效在设备上不显示1. 用于光效的Shader在目标平台如GLES2不支持。2. 材质属性修改未生效修改了共享材质。3. 光效图片的Alpha通道有问题。1. 使用Unity标准的UI/Default Shader或Mobile/Particles/Alpha Blended等跨平台保证的Shader。2. 确保脚本中获取和修改的是材质实例materialForRendering。3. 检查图片导入设置确保Read/Write Enabled已勾选如果需要运行时修改并检查Alpha Source是否正确。加载到90%就长时间卡住1. 使用LoadSceneAsync时未将allowSceneActivation设为false但代码在等待一个永远不会满足的条件。2. 场景中有在Start或Awake中执行非常耗时的同步操作。1. 检查你的加载协程逻辑确保在进度0.9后有明确的逻辑来将allowSceneActivation设为true例如监听一个按钮点击事件。2. 优化目标场景的初始化代码将耗时操作移至后台线程或分帧进行。在不同分辨率下UI错位1. Canvas Scaler设置不当。2. UI元素的锚点Anchor和轴心Pivot设置不合理。1. 重新审视Canvas Scaler的参考分辨率和Match模式用多种宽高比进行测试。2. 对于需要始终相对于屏幕某侧或中心定位的元素如进度条容器使用锚点预设如底部居中。避免使用绝对坐标PosX, PosY。5.3 实操心得与进阶技巧“假进度”的艺术真实的加载进度往往在前期很快后期很慢。直接显示真实进度会让玩家觉得最后阶段卡住了。一个常见的技巧是使用一个非线性函数来映射真实进度到显示进度。例如让前80%的真实进度对应显示到95%最后20%的真实进度缓慢走完剩下的5%。这能极大提升等待体验的主观流畅感。增加随机提示或小知识在加载界面空白处随机显示一些游戏操作技巧、英雄背景故事或美术设定图能有效转移玩家等待时的焦虑情绪。这只需要一个Text组件或一个轮播图配合一个字符串数组或资源数组即可实现。音乐与音效加载界面通常播放游戏的主菜单音乐或一个简短的循环音乐片段。当进度达到100%时可以播放一个清脆的“完成”音效给予玩家明确的反馈。可跳过动画如果你的加载页面有一个开场动画比如Logo浮现最好在播放一次后或者在玩家点击屏幕后提供跳过或加速播放的选项。尊重玩家的时间。最后加载页面是玩家进入游戏世界的第一印象它的流畅度和精致度直接影响了玩家对游戏品质的初步判断。花些时间打磨这个看似简单的界面绝对是值得的。这套基于UGUI的实现方案不仅适用于《王者荣耀》风格的加载页其核心思路——层级管理、组件控制、异步加载与视觉反馈——可以套用到任何你需要制作进度提示的场景中。