1. 项目概述与核心价值在Unity项目开发中物体高亮Outline是一个高频需求无论是用于角色选中、道具交互还是关卡解谜提示一个清晰、美观的高亮效果都能极大提升游戏的视觉反馈和用户体验。市面上有像Highlight Plus、Outline Effect这样的明星付费插件效果强大但价格不菲。对于独立开发者、学生团队或预算有限的项目来说这笔开销可能成为负担。今天要聊的QuickOutline就是这样一个“宝藏”解决方案。它完全免费、开源由Unity社区贡献并维护专为Unity 2018及以上版本设计。其核心价值在于它用极简的代码和配置实现了一个性能开销可控、效果足够满足大部分项目需求的屏幕空间高亮方案。我曾在多个中小型项目中用它替代付费插件实测下来在移动端和PC端都有不错的表现。这篇文章我将结合自己踩过的坑和优化经验为你提供一份从零开始、手把手配置QuickOutline的保姆级指南让你彻底告别为高亮功能额外付费的日子。2. QuickOutline 核心原理与方案选型在深入配置之前我们先花点时间理解QuickOutline是怎么工作的这能帮助你在后续遇到问题时更快地定位和解决。2.1 屏幕空间后处理高亮原理QuickOutline本质上是一种屏幕空间后处理Screen-space Post-processing效果。它的工作流程可以简单理解为第一次渲染生成遮罩在正常的场景渲染之前QuickOutline会先对需要高亮的物体进行一次特殊的渲染。这次渲染不关心颜色、纹理只关心“这个像素属于哪个需要高亮的物体”。它会将需要高亮的物体渲染成纯色通常是白色到一张单独的纹理我们称之为“遮罩纹理”或“ID Map”中背景和其他物体则渲染为黑色。边缘检测拿到这张黑白分明的遮罩纹理后QuickOutline会使用图像处理中经典的边缘检测算法如Sobel算子对其进行处理。算法会分析每个像素与其周围像素的亮度差异差异大的地方就被判定为“边缘”。第二次渲染叠加高亮在正常的场景渲染完成之后QuickOutline将检测到的边缘信息以你设定的颜色如红色、蓝色和宽度叠加到最终的屏幕画面上从而形成高亮轮廓。这种方案的优点非常明显物体无关性它不关心高亮物体本身的材质是Standard、URP还是自定义Shader。只要这个物体能被渲染到遮罩纹理里就能被高亮。这解决了传统基于法线外扩Geometry Shader方案对模型和材质要求苛刻的问题。效果稳定轮廓线始终在屏幕空间不会因为物体旋转或摄像机角度变化而出现断裂或变形。实现相对简单核心是渲染和图像处理不涉及复杂的几何体操作。当然缺点也存在性能开销多了一次渲染通道Render Pass和全屏的图像处理对性能有额外消耗尤其是在低端移动设备上需要谨慎使用。深度复杂性对于相互遮挡的物体边缘检测可能不够精确有时会出现轮廓线“穿透”前景物体的现象。透明物体处理对于半透明物体轮廓可能显得不干净需要特殊处理。2.2 为什么选择QuickOutline而非其他方案面对高亮需求我们通常有几个选择付费插件如Highlight Plus功能全面效果炫酷支持发光、闪烁、描边动画等。适合预算充足、追求极致效果或没有时间自研的团队。自定义Shader法线外扩在顶点着色器中将顶点沿法线方向挤出然后渲染背面作为轮廓。性能最好但与模型法线质量强相关且对复杂材质如皮肤、毛发兼容性差。CommandBuffer 后处理自己实现一套类似QuickOutline的流程。灵活性最高但开发成本也最高。QuickOutline在免费、易用、效果和性能之间取得了最佳平衡。选择QuickOutline的核心理由零成本完全免费开源无任何授权费用。开箱即用导入后添加组件即可看到效果学习曲线平缓。社区支持作为流行的免费资产遇到问题时更容易在网上找到解决方案或讨论。足够好用对于“选中高亮”、“可交互物体提示”这类核心需求其提供的颜色、宽度、模糊等参数调节已经能满足90%以上的场景。源码可控因为是开源代码你可以在其基础上进行修改和优化以适应项目的特殊需求。注意QuickOutline更适合于场景中同时需要高亮的物体数量不多例如玩家当前选中的1个对象或场景中零星的可交互物品的情况。如果你需要为成百上千的物体同时添加高亮比如策略游戏里框选大量单位则需要考虑更底层的、批量化处理的方案QuickOutline可能不是最优选。3. 环境准备与插件获取3.1 确认Unity版本与渲染管线这是避免后续兼容性问题的第一步。QuickOutline官方明确支持Unity 2018.4 LTS及以上版本。我强烈建议你使用2019.4 LTS或2020.3 LTS这类长期支持版本它们在稳定性和社区资源上更有保障。更重要的是渲染管线Render Pipeline内置渲染管线Built-in RPQuickOutline原生支持兼容性最好。通用渲染管线URP从QuickOutline v3.0左右版本开始提供了对URP的实验性支持。但需要注意URP的版本迭代很快不同版本的URP包如7.x, 10.x, 12.x其Shader库和API可能有变化可能导致QuickOutline的Shader编译报错。高清渲染管线HDRP官方不支持。HDRP的架构与内置管线差异巨大QuickOutline的Shader无法直接兼容。如果你的项目使用HDRP需要寻找专门为HDRP设计的高亮方案或者考虑使用Shader Graph自行实现。操作建议在导入插件前在Unity Editor的Window - Rendering - Render Pipeline Converter中确认你项目使用的渲染管线。如果是URP项目请备份好项目并做好可能需要手动修改Shader代码的心理准备。3.2 下载与导入QuickOutlineQuickOutline可以通过多种方式获取最推荐的是使用Unity的Package Manager从Git URL安装这样可以方便地更新。方法一通过Package Manager安装推荐在Unity编辑器中打开Window - Package Manager。点击左上角的“”按钮选择“Add package from git URL...”。在弹出的输入框中粘贴QuickOutline的Git仓库地址https://github.com/chrisnolet/QuickOutline.git点击“Add”。Unity会自动下载、编译并导入该包到你的项目中。方法二手动下载UnityPackage访问QuickOutline的GitHub发布页面通常仓库的Release标签页。下载最新的.unitypackage文件。在Unity编辑器中Assets - Import Package - Custom Package...选择你下载的.unitypackage文件导入。导入后的结构导入成功后你会在项目的Packages目录下或Assets目录中看到“QuickOutline”文件夹。核心文件通常包括Runtime/Outline.cs核心的MonoBehaviour组件脚本。Runtime/OutlineEffect.cs管理全局后处理效果的脚本。Resources/Shaders/存放轮廓渲染和边缘检测所需的Shader文件。Demo/示例场景强烈建议先打开看看效果。4. 核心组件配置详解导入成功后我们就可以开始使用了。QuickOutline的使用主要围绕两个核心组件Outline和OutlineEffect。4.1 Outline 组件为单个物体添加高亮Outline组件是挂载在你需要高亮的单个GameObject上的。它定义了该物体高亮的具体外观。添加与基础配置在Hierarchy中选择你想要高亮的物体比如一个Cube、一个角色模型。在Inspector窗口底部点击“Add Component”。搜索并添加“Outline”组件。添加后你会看到如下参数Outline Mode: 轮廓模式。OutlineAll显示物体完整的轮廓默认。适合大多数情况。OutlineVisible只显示摄像机能看到的轮廓。性能稍好但轮廓可能不完整。OutlineHidden只显示被其他物体遮挡部分的轮廓。可用于特殊提示如“有物体在墙后”。OutlineAndSilhouette同时显示轮廓和剪影物体被遮挡部分用纯色填充。效果最醒目但也最耗性能。Outline Color: 轮廓线的颜色。点击色块可以选择。Outline Width: 轮廓线的宽度。值越大线越粗。注意这个值是在屏幕空间的像素宽度因此在不同分辨率下视觉粗细是稳定的。通常设置在2到10之间超过15可能会显得很粗糙。Outline Material: 内部使用的材质一般无需手动修改除非你需要深度定制Shader。一个实用的技巧对于复杂的模型如角色直接挂在根物体上可能导致轮廓线包裹整个模型的包围盒看起来像一个方盒子。更好的做法是为角色创建一个空的子GameObject将所有需要轮廓的SkinnedMeshRenderer或MeshRenderer拖到这个空物体下然后将Outline组件挂在这个空物体上。这样轮廓会更贴合模型的实际形状。4.2 OutlineEffect 组件全局后处理管理器OutlineEffect组件是一个单例Singleton通常只需要在场景中存在一个实例负责管理所有Outline组件的渲染和后处理。它应该挂载在一个不会被销毁的物体上比如你的“GameManager”或一个专用的“PostProcess”物体上。添加与关键参数在场景中创建一个空GameObject命名为“OutlineManager”。为其添加“OutlineEffect”组件。其参数面板更为复杂我们逐一拆解Line Color/Line Width已废弃。在较新版本中轮廓的颜色和宽度由每个Outline组件独立控制这里的设置无效。保留它们是为了兼容旧项目。Blur Size模糊尺寸。这是影响轮廓效果最重要的参数之一。它决定了在边缘检测后对轮廓线进行高斯模糊的强度。值 0无模糊轮廓线是清晰锐利的锯齿状像素边。在低宽度下可能看起来像“毛刺”。值 1 ~ 3推荐范围。轻微的模糊可以让轮廓线看起来更平滑、更柔和像抗锯齿过的效果。值 5模糊过度轮廓线会变得非常粗且扩散失去清晰的线条感性能开销也增大。我的经验值对于大多数卡通或风格化项目Blur Size 1.5配合Outline Width 5效果很好。对于写实项目可能需要更细 (Width3) 和更锐利 (Blur Size0.5) 的线条。Use Fill是否启用填充。如果勾选会在轮廓线内部填充颜色颜色由Fill Color决定。Fill Color填充颜色。通常设置为与轮廓线颜色相同但透明度Alpha很高的颜色用于轻微提亮选中物体而不是实心填充。Fill Material/Outline Material内部使用的后处理材质高级用户可在此替换自定义Shader。AutoEnable是否自动启用。通常保持勾选让组件在Start时自动运行。Corner Outlines角轮廓。勾选后会在模型的硬边转角处也绘制轮廓使轮廓更有立体感。建议勾选效果提升明显。Additive Rendering叠加渲染。勾选后轮廓效果会以叠加Additive的方式与场景混合使轮廓在亮部和暗部都更可见。建议勾选。Scale With Screen轮廓宽度是否随屏幕分辨率缩放。如果希望在任何分辨率下轮廓的视觉粗细比例不变就勾选。Alpha CutoffAlpha截止值。用于处理带透明通道的纹理如树叶、栅栏。像素Alpha值低于此值的部分不会被计入轮廓。对于Sprite或透明物体可能需要调整此值如设为0.5。Debug Mode调试模式。勾选后会在Game视图左上角显示轮廓渲染的中间步骤纹理如遮罩图用于调试轮廓为什么没有出现或形状不对。排查问题时非常有用。5. 实战集成从静态高亮到动态交互仅仅让物体静态高亮是不够的我们需要让它响应玩家的操作。下面以最常见的“鼠标悬停/点击高亮”为例展示如何将QuickOutline集成到游戏交互逻辑中。5.1 基础交互脚本示例我们创建一个名为InteractableOutline的C#脚本。这个脚本将处理鼠标事件并控制Outline组件的启用与禁用。using UnityEngine; [RequireComponent(typeof(Outline))] // 确保物体上有Outline组件 public class InteractableOutline : MonoBehaviour { private Outline _outlineComponent; // 可以定义不同的颜色用于不同状态 public Color hoverColor Color.cyan; public Color selectColor Color.green; private Color _originalColor; void Start() { // 获取Outline组件 _outlineComponent GetComponentOutline(); if (_outlineComponent null) { Debug.LogError(InteractableOutline requires an Outline component!, this); return; } // 保存初始颜色并初始禁用高亮 _originalColor _outlineComponent.OutlineColor; _outlineComponent.enabled false; } // 鼠标进入碰撞体时触发 void OnMouseEnter() { if (_outlineComponent ! null) { _outlineComponent.OutlineColor hoverColor; _outlineComponent.enabled true; } } // 鼠标离开碰撞体时触发 void OnMouseExit() { if (_outlineComponent ! null) { _outlineComponent.enabled false; // 恢复颜色可选 _outlineComponent.OutlineColor _originalColor; } } // 鼠标在物体上点击时触发 void OnMouseDown() { if (_outlineComponent ! null) { _outlineComponent.OutlineColor selectColor; // 点击后可以保持高亮直到点击其他物体 // _outlineComponent.enabled true; } // 这里可以触发其他交互逻辑如拾取物品、打开菜单等 Debug.Log($Interacted with {gameObject.name}); } }使用步骤将上述脚本挂载到已经添加了Outline组件的物体上。确保该物体或其子物体拥有一个Collider如Box Collider、Mesh Collider否则OnMouseEnter等事件无法触发。在Inspector中你可以为Hover Color和Select Color设置不同的颜色以区分悬停和选中状态。运行游戏将鼠标移动到物体上即可看到高亮效果。5.2 基于射线检测的3D/UI通用方案OnMouseXXX系列函数在简单的Demo中很方便但在复杂的、有UI界面或需要多点触控的项目中可能不可靠。更健壮的方式是使用射线检测Raycast。下面是一个使用Unity新输入系统Input System和射线检测的升级版脚本using UnityEngine; using UnityEngine.InputSystem; // 需要安装并启用Input System Package public class AdvancedOutlineInteraction : MonoBehaviour { public Camera playerCamera; public float interactionDistance 10f; public LayerMask interactableLayer; // 专门用于交互物体的Layer private Outline _currentHighlightedObj; private Outline _currentSelectedObj; void Update() { HandleRaycast(); } void HandleRaycast() { // 从屏幕中心或鼠标位置发射射线 Ray ray playerCamera.ScreenPointToRay(Mouse.current.position.ReadValue()); RaycastHit hit; // 进行射线检测只检测指定Layer的物体 if (Physics.Raycast(ray, out hit, interactionDistance, interactableLayer)) { Outline outline hit.collider.GetComponentInParentOutline(); // 如果射线击中了新的可高亮物体 if (outline ! null outline ! _currentHighlightedObj) { // 取消之前的高亮 if (_currentHighlightedObj ! null) { _currentHighlightedObj.enabled false; } // 高亮新的物体 _currentHighlightedObj outline; _currentHighlightedObj.enabled true; // 可以在这里设置悬停颜色 // _currentHighlightedObj.OutlineColor hoverColor; } // 处理点击选择使用Input System if (Mouse.current.leftButton.wasPressedThisFrame) { // 取消之前的选择 if (_currentSelectedObj ! null _currentSelectedObj ! outline) { // _currentSelectedObj.OutlineColor originalColor; // 恢复颜色 } // 选择当前物体 _currentSelectedObj outline; if (_currentSelectedObj ! null) { // _currentSelectedObj.OutlineColor selectColor; // 触发选择事件 OnObjectSelected(hit.collider.gameObject); } } } else { // 射线没有击中任何可交互物体取消悬停高亮但保留选择高亮 if (_currentHighlightedObj ! null _currentHighlightedObj ! _currentSelectedObj) { _currentHighlightedObj.enabled false; _currentHighlightedObj null; } } } void OnObjectSelected(GameObject selectedObj) { Debug.Log($Selected: {selectedObj.name}); // 这里可以扩展显示物品信息、播放音效、触发任务等 } }这个方案的优点更可控可以精确控制交互距离、忽略的层等。与输入系统解耦可以轻松适配键盘、手柄、触摸等多种输入方式。性能更好只在每帧进行一次射线检测而不是依赖物理回调。逻辑清晰明确区分了“悬停”和“选中”两种状态。配置要点为你所有需要交互的物体创建一个新的Layer例如命名为“Interactable”。将这些物体的Layer设置为“Interactable”。在AdvancedOutlineInteraction脚本的interactableLayer参数中选择“Interactable”层。确保场景中有一个Camera被赋值给playerCamera变量。6. 性能优化与高级调试QuickOutline虽然轻量但在低端设备或复杂场景中不当使用仍可能成为性能瓶颈。以下是一些关键的优化和调试策略。6.1 性能开销分析与优化点渲染开销Draw Call增加问题每个被Outline组件管理的Renderer在生成遮罩时都会产生额外的Draw Call。优化合并Mesh对于场景中大量静态的、需要高亮的小物体如一堆金币、草药考虑将它们合并成一个Mesh。这样多个物体只需要一个Outline组件和一个额外的Draw Call。减少Outline组件数量不是每个物体都必须单独一个Outline。如前所述可以将一个复杂模型的所有子Renderer放在一个空父节点下父节点挂一个Outline组件。使用LODLevel of Detail为高亮物体配置LOD Group。在远处使用面数更少的LOD模型参与轮廓渲染减少像素计算量。这需要修改QuickOutline源码使其在渲染遮罩时也能响应LOD。后处理开销全屏模糊问题Blur Size参数直接关联高斯模糊的采样半径值越大每个像素需要采样和计算的周围像素越多开销呈平方增长。优化降低模糊质量这是最有效的手段。尝试将Blur Size降到1.0以下。很多时候轻微的模糊如0.8足以消除锯齿且视觉差异不大。降低渲染纹理分辨率修改OutlineEffect源码让遮罩纹理和中间纹理以半分辨率甚至四分之一分辨率渲染。轮廓线本身是低频信息对分辨率不敏感。这能大幅减少模糊操作处理的像素数量。这是一个高级优化需要一定的Shader和渲染知识。分帧渲染如果游戏帧率要求不是绝对稳定如60FPS可以考虑让轮廓效果以30FPS的频率更新。这需要在OutlineEffect中控制OnRenderImage的调用频率。脚本开销Update循环问题如果你的交互脚本在每帧的Update中进行射线检测并频繁开关Outline.enabled会产生开销。优化使用事件驱动只在状态真正改变时如从悬停A物体切换到悬停B物体才修改Outline组件的enabled状态和颜色避免每帧设置相同的值。对象池管理对于大量动态生成销毁的同类可交互物体如子弹、特效可以预先创建好带Outline组件的对象池复用Outline组件避免频繁的GetComponent和组件添加操作。6.2 常见问题排查与修复即使按照指南操作你可能还是会遇到一些问题。下面是一个快速排查清单问题现象可能原因解决方案轮廓完全不显示1.OutlineEffect组件未启用或未添加到场景。2. 摄像机未设置渲染到纹理Depth Texture。3. 物体Layer被OutlineEffect的Camera组件Culling Mask排除。1. 检查场景中是否有且仅有一个启用的OutlineEffect组件。2. 在主摄像机上确保Depth Texture Mode设置为Depth或DepthNormals对于内置管线。3. 检查OutlineEffect组件所在GameObject上的Camera组件如果有的Culling Mask是否包含了高亮物体所在的Layer。轮廓闪烁或时有时无1. 多个OutlineEffect实例冲突。2. 脚本中每帧频繁开关Outline.enabled且逻辑有误。3. 物体在摄像机近/远裁剪面附近。1. 确保场景中只有一个OutlineEffect。2. 调试你的交互脚本确认状态切换逻辑正确。3. 调整摄像机的Clipping Planes。轮廓线太粗/太模糊Outline Width或Blur Size参数设置过大。逐步调小Outline Width(3-8) 和Blur Size(0.5-2.0)找到视觉和性能的平衡点。轮廓线有锯齿毛刺Blur Size设置过小或为0。适当增加Blur Size(0.8-1.5)利用模糊进行抗锯齿。透明物体轮廓不正确透明物体的Shader不写入深度导致轮廓遮罩无法正确生成。1. 尝试调整OutlineEffect的Alpha Cutoff值。2. 对于复杂的透明Shader如树叶、粒子可能需要为其编写一个特殊的、用于轮廓渲染的替代Shader替换Outline组件的Outline Material。URP项目下Shader报错QuickOutline的Shader与当前URP版本不兼容。1. 检查QuickOutline的GitHub Issues或论坛看是否有针对你URP版本的补丁。2. 手动修改Shader代码将过时的HLSL宏或函数替换为当前URP版本支持的写法例如替换UnityBuildTexture2DStructNoScale等。这需要Shader编程经验。3. 考虑使用URP自带的Render Objects特性配合自定义Shader实现类似效果这可能更稳定。轮廓出现在UI前面OutlineEffect的渲染顺序在UI之后。调整Canvas的渲染模式或Sort Order或者修改OutlineEffect脚本确保其OnRenderImage在UI渲染之前执行这通常很复杂。一个更简单的方法是确保UI Canvas使用Screen Space - Overlay模式它默认渲染在所有摄像机效果之上。最重要的调试工具勾选OutlineEffect组件上的Debug Mode。它会在Game视图左上角显示几个小图Outline最终生成的轮廓遮罩图黑白。Blurred模糊后的轮廓图。Final最终叠加到屏幕的效果图调试用。 通过观察这些图你可以直观地看到轮廓是否被正确生成、模糊效果如何从而快速定位问题是出在遮罩渲染阶段还是后处理混合阶段。7. 扩展思路与进阶应用掌握了基础配置和集成后我们可以玩点更花的让高亮效果更好地为游戏设计服务。7.1 实现动态效果脉动与闪烁静态轮廓有时显得呆板。我们可以通过脚本动态修改Outline Width或Outline Color来实现脉动Pulsing或闪烁Blinking效果用于提示关键物品或危险区域。using UnityEngine; public class PulsingOutline : MonoBehaviour { private Outline _outline; public float pulseSpeed 2.0f; // 脉动速度 public float minWidth 3.0f; public float maxWidth 8.0f; private float _originalWidth; private Color _originalColor; void Start() { _outline GetComponentOutline(); if (_outline ! null) { _originalWidth _outline.OutlineWidth; _originalColor _outline.OutlineColor; } } void Update() { if (_outline ! null _outline.enabled) { // 使用正弦函数生成平滑的脉动值 float pulse Mathf.Sin(Time.time * pulseSpeed) * 0.5f 0.5f; // 将值映射到0-1 _outline.OutlineWidth Mathf.Lerp(minWidth, maxWidth, pulse); // 也可以让颜色在两种颜色间过渡 // Color pulseColor Color.Lerp(colorA, colorB, pulse); // _outline.OutlineColor pulseColor; } } // 外部调用可以开启或关闭脉动 public void EnablePulsing(bool enable) { this.enabled enable; if (!enable _outline ! null) { _outline.OutlineWidth _originalWidth; _outline.OutlineColor _originalColor; } } }7.2 轮廓样式切换不同状态不同外观在RPG或解谜游戏中物体可能具备多种状态。我们可以通过管理一个“轮廓样式”的配置库来实现快速切换。using UnityEngine; [System.Serializable] public class OutlineStyle { public string styleName; public Color color; public float width; public float blurSize; // 注意需要修改OutlineEffect或每个物体单独管理模糊不推荐 } public class OutlineStyleManager : MonoBehaviour { public OutlineStyle[] styles; private OutlineEffect _outlineEffect; void Start() { _outlineEffect FindObjectOfTypeOutlineEffect(); } // 为指定物体应用样式 public void ApplyStyleToObject(GameObject obj, string styleName) { Outline outline obj.GetComponentOutline(); OutlineStyle style System.Array.Find(styles, s s.styleName styleName); if (outline ! null style ! null) { outline.OutlineColor style.color; outline.OutlineWidth style.width; // 如果需要全局修改模糊度 // if(_outlineEffect ! null) _outlineEffect.BlurSize style.blurSize; } } // 示例根据物品稀有度应用不同轮廓 public void ApplyRarityOutline(GameObject item, ItemRarity rarity) { switch(rarity) { case ItemRarity.Common: ApplyStyleToObject(item, Common); // 灰色细线 break; case ItemRarity.Rare: ApplyStyleToObject(item, Rare); // 蓝色中等宽度 break; case ItemRarity.Epic: ApplyStyleToObject(item, Epic); // 紫色较粗带脉动 break; case ItemRarity.Legendary: ApplyStyleToObject(item, Legendary); // 金色很粗闪烁 break; } } } public enum ItemRarity { Common, Rare, Epic, Legendary }7.3 在UI世界空间元素上的应用QuickOutline主要用于3D物体但有时我们也需要高亮UI中的3D模型比如在背包界面中旋转展示的武器。这时需要确保渲染轮廓的摄像机能够“看到”这个UI下的模型。操作步骤在UI Canvas下创建一个RawImage或一个专门用于渲染3D模型的区域。在这个区域下创建一个新的Camera将其设置为只渲染你想高亮的模型所在的Layer例如“UI_Model”并且其Depth值比主UI摄像机高。将这个新Camera的渲染目标Target Texture设置给RawImage。将OutlineEffect组件挂在这个新Camera所在的GameObject上而不是主摄像机上。确保需要高亮的模型位于“UI_Model”层并且其Outline组件正常工作。这样轮廓效果就会在这个独立的渲染上下文中生效而不会干扰主游戏画面。