1. 项目概述为什么我们需要自定义视口在虚幻引擎5UE5中默认的玩家控制器和摄像机管理为我们提供了一个全屏的、单一的渲染视口。对于绝大多数游戏这已经足够了。但当你想要实现一些更具沉浸感或创新性的玩法时这个“默认”方案就显得有些力不从心了。比如你想制作一个角色同时操作无人机进行侦察的游戏需要一个小窗口实时显示无人机视角或者你想复刻一些经典游戏的双人同屏分屏体验又或者你想在游戏内的监控屏幕上动态显示另一个场景的实时画面。这些需求都指向了一个共同的技术点超越单一全屏视口创建自定义的、可灵活控制的“画中画”或分屏视口。这个功能的核心价值在于信息的多维度呈现与交互。它不仅仅是视觉上的分割更是游戏逻辑和玩家体验的深度扩展。通过蓝图或C实现它意味着你获得了对渲染管线的更深层控制权能够将游戏世界的不同切片以任意大小、任意位置、甚至任意渲染设置呈现在同一个屏幕上。这对于提升游戏的策略深度、叙事表现力和沉浸感至关重要。本教程将带你从原理到实践完整走通在UE5中创建自定义视口的技术路径。无论你是偏好可视化编程的蓝图设计师还是追求极致性能与控制的C程序员都能找到对应的实现方案。我们会深入探讨Scene Capture场景捕获、Render Target渲染目标、UMG虚幻动态图形以及视口Actor的协同工作原理并分享在实际项目中调试和优化这类功能时积累的宝贵经验。2. 核心原理与架构设计在动手写第一行代码或连第一个蓝图节点之前我们必须先理解UE5渲染一帧画面的基本流程以及我们可以在哪个环节“插入”我们自定义的视口。这有助于我们建立清晰的技术蓝图避免后期陷入混乱。2.1 UE5渲染管线与我们的切入点简化的UE5渲染流程可以概括为游戏世界场景中的Actor、灯光、材质 - 玩家摄像机定义观察视角和范围 - 渲染线程进行可见性计算、几何处理、光照计算等 - 最终呈现到屏幕通常是全屏的后缓冲区。我们的目标是在这个流程中额外开辟一条并行的渲染路径。这条路径使用另一个或几个虚拟的“摄像机”去观察游戏世界的特定部分并将渲染结果输出到一张“图片”即渲染目标Render Target上而不是直接输出到屏幕。然后我们再在最终显示到屏幕的UI层通过UMG或某个3D物体的表面通过材质将这张“图片”贴上去。因此整个架构围绕以下几个核心组件构建场景捕获组件Scene Capture Component这是我们的“虚拟摄像机”。它可以被放置在场景的任何位置拥有独立的变换位置、旋转、视野FOV和渲染设置。它的任务就是将“看到”的画面渲染出来。渲染目标Render Target 简称RT这是一张在GPU内存中的纹理Texture充当虚拟摄像机的“胶片”或“数字传感器”。Scene Capture组件会将每一帧的画面渲染到这张RT上。显示载体UMGUI最常用的方式。创建一个Image控件将其Brush的纹理设置为我们的RT。这样RT的内容就会作为UI元素显示在屏幕上我们可以自由控制其位置、大小和透明度实现“画中画”。材质Material将RT作为纹理采样输入到一个动态材质中然后将这个材质应用到某个静态网格体如一个电视屏幕、一面镜子上。这常用于游戏内的监控屏、反光镜等。玩家控制器与视口管理我们需要在游戏模式或玩家控制器中逻辑地创建和管理这些Scene Capture组件和RT资源并确保它们在正确的时机更新每帧或按需。2.2 蓝图 vs C方案选型考量两种方式都能实现目标但侧重点和适用场景不同。蓝图方案优点快速原型验证逻辑直观可见适合设计师和快速迭代。对于简单的“画中画”如一个固定的监控视角蓝图完全够用。缺点性能开销相对较大尤其是每帧更新的动态捕获。复杂的多视口管理在蓝图中会变得连线繁杂难以维护。对于需要精细控制渲染状态如切换后期处理体积、动态修改捕获属性的情况蓝图节点可能不够用。核心节点Scene Capture 2DActor、Create Render Target 2D、Draw Texture to Render Target已不推荐用Scene Capture替代、UMGImage控件的Set Brush from Texture。C方案优点极致性能精细控制。可以直接操作渲染线程命令管理RT的生命周期实现按需更新例如只有当画中画区域在屏幕内时才更新。代码结构清晰易于扩展成复杂的分屏系统如动态分割、任意形状视口。缺点入门门槛高编译时间长调试不如蓝图直观。核心类USceneCaptureComponent2D、UTextureRenderTarget2D、UCanvasRenderTarget2D用于自定义绘制、UUserWidget和UImage。如何选择我的经验是功能原型和简单需求用蓝图性能关键和复杂系统用C。一个常见的混合模式是用C实现核心的捕获管理器ACustomViewportManager暴露必要的函数和属性到蓝图然后在蓝图中进行具体的布局和UI绑定。这样既保证了性能又保留了设计的灵活性。3. 蓝图实现快速创建动态画中画让我们先从最直观的蓝图开始创建一个跟随玩家角色、显示身后视角的画中画小地图。3.1 创建场景捕获与渲染目标放置Scene Capture 2D在关卡中从放置Actor面板找到Scene Capture 2D拖入场景。将其附着Attach到你的玩家角色骨骼或一个子Scene Component上并调整其位置和旋转使其朝向角色后方例如放在角色头顶旋转180度看向身后。创建渲染目标在内容浏览器中右键 - 材料与纹理 - 渲染目标 - 渲染目标2D。命名为RT_RearView。建议将其尺寸设置为512x512或1024x1024格式通常为RTF_RGBA88位彩色。注意尺寸越大每帧渲染的像素越多性能开销越大。画中画通常不需要4K分辨率。绑定与配置选中场景中的Scene Capture 2DActor在细节面板中找到Scene Capture组件。将Texture Target属性设置为我们刚创建的RT_RearView。调整Projection Type投影类型为Perspective透视或Orthographic正交适合2D小地图。根据需要调整FOV Angle视野角度。更小的FOV相当于更长的焦距能看到更远的景物但范围更窄。关键优化将Capture Source设置为Final Color (LDR) in RGB。这表示捕获经过所有后期处理色调映射、颜色分级后的最终低动态范围颜色最适合直接显示。除非你需要深度、法线等特殊通道做后期效果否则就用这个。另一个关键优化勾选Capture Every Frame。如果画中画内容更新不频繁比如一个静态的监控画面可以取消勾选然后通过蓝图手动调用Capture Scene来按需更新能显著节省性能。3.2 在UMG中显示画中画创建用户控件User Widget在内容浏览器中创建用户界面-控件蓝图命名为WBP_PictureInPicture。设计UI打开WBP_PictureInPicture从面板中拖入一个Image控件到画布上。调整Image控件的大小和位置这决定了画中画在屏幕上的显示区域。在Image的细节面板Appearance-Brush-Image属性暂时留空。编写控件蓝图逻辑在WBP_PictureInPicture的事件图表中我们需要在控件初始化时将Image的纹理设置为我们的渲染目标。注意我们不能直接在控件蓝图中引用关卡中的特定Actor如那个Scene Capture 2D因为这样会破坏控件的复用性。更好的做法是通过变量传递。在WBP_PictureInPicture的图表中创建一个类型为Texture Render Target 2D的变量命名为TargetTexture并勾选Expose on Spawn生成时公开。在Event Construct事件构造后添加节点Get TargetTexture-Set Brush from Texture目标为Image控件。这样当创建这个控件时就会使用传入的RT。在玩家控制器或HUD中创建并显示控件打开你的玩家控制器蓝图或HUD蓝图。在BeginPlay事件中Create Widget创建控件类选择WBP_PictureInPicture。在Create Widget节点的输出引脚上拖出引线选择Set TargetTexture并将其值设置为之前创建的RT_RearView你需要以某种方式获取到这个资源引用例如通过Get All Actors Of Class找到场景中的Scene Capture 2D然后获取其Texture Target属性。接着调用Add to Viewport节点将创建的控件添加到屏幕。运行游戏你应该就能在屏幕上看到画中画了。实操心得蓝图中的资源引用管理是个坑。对于Scene Capture 2DActor我强烈建议不要用Get All Actors Of Class在每帧查找。更好的方法是在Scene Capture 2D的BeginPlay时将其自身引用Self设置到一个游戏实例GameInstance或玩家状态的公开变量中这样在任何蓝图中都可以稳定地获取到它。或者直接将RT_RearView渲染目标资源作为参数传递给控件。3.3 动态更新与交互增强静态的画中画还不够酷。我们来实现当玩家按下某个键如Tab时画中画放大松开时恢复。在WBP_PictureInPicture中创建动画在控件蓝图中切换到动画模式创建一个新的动画轨道命名为ZoomIn。在第0帧记录Image控件的Render Transform-Scale为(1,1)。在第10帧约0.3秒将Scale修改为(2,2)。你可以调整插值曲线使其平滑。在玩家控制器中绑定输入在项目设置中绑定一个操作映射Action Mapping如TogglePIP按键为Tab。在玩家控制器蓝图中Event BeginPlay时Enable Input。右键图表添加事件InputAction TogglePIP。这个事件会有Pressed和Released两个输出。在Pressed引脚获取之前创建的WBP_PictureInPicture控件引用调用其Play Animation节点动画选择ZoomIn。在Released引脚调用控件的Reverse Animation反向播放动画节点。这样一个具有基本交互功能的动态画中画就完成了。你可以用类似的方法控制其位置、透明度甚至实现多个画中画的堆叠。4. C实现构建高性能分屏系统蓝图虽快但在处理复杂的、性能敏感的多视口时C是更专业的选择。我们将创建一个ACustomViewportManagerActor用它来管理多个动态视口并实现一个真正的分屏模式例如左右分屏用于本地双人游戏。4.1 创建C类与核心属性首先在编辑器中选择工具-新建C类继承自Actor命名为CustomViewportManager。在头文件CustomViewportManager.h中我们需要定义核心组件和属性#pragma once #include CoreMinimal.h #include GameFramework/Actor.h #include Components/SceneCaptureComponent2D.h #include Engine/TextureRenderTarget2D.h #include CustomViewportManager.generated.h UCLASS() class YOURPROJECT_API ACustomViewportManager : public AActor { GENERATED_BODY() public: ACustomViewportManager(); protected: virtual void BeginPlay() override; virtual void Tick(float DeltaTime) override; public: // 切换分屏模式的函数可在蓝图调用 UFUNCTION(BlueprintCallable, Category Custom Viewport) void EnableSplitScreen(bool bEnable, int32 SplitType 0); // SplitType: 0水平, 1垂直 // 为特定玩家索引创建和管理一个视口 UFUNCTION(BlueprintCallable, Category Custom Viewport) void CreateViewportForPlayer(int32 PlayerIndex, AActor* ViewTarget); private: // 动态创建的场景捕获组件数组 UPROPERTY() TArrayUSceneCaptureComponent2D* SceneCaptureComponents; // 对应的渲染目标数组 UPROPERTY() TArrayUTextureRenderTarget2D* RenderTargets; // 分屏模式是否激活 UPROPERTY(EditAnywhere, BlueprintReadWrite, Category Viewport Settings, meta (AllowPrivateAccess true)) bool bSplitScreenEnabled; // 分屏类型0 水平1 垂直 UPROPERTY(EditAnywhere, BlueprintReadWrite, Category Viewport Settings, meta (AllowPrivateAccess true)) int32 CurrentSplitType; // 渲染目标尺寸 UPROPERTY(EditAnywhere, BlueprintReadOnly, Category Viewport Settings, meta (AllowPrivateAccess true)) FIntPoint RenderTargetSize; // 初始化渲染资源和组件 void InitializeResources(); // 更新分屏布局 void UpdateSplitScreenLayout(); // 释放资源 void CleanupResources(); };4.2 实现资源管理与分屏逻辑在源文件CustomViewportManager.cpp中我们实现核心功能#include CustomViewportManager.h #include Engine/CanvasRenderTarget2D.h // 如果需要自定义绘制 #include Kismet/GameplayStatics.h ACustomViewportManager::ACustomViewportManager() { PrimaryActorTick.bCanEverTick true; RenderTargetSize FIntPoint(1920, 1080); // 默认全高清分屏时各占一半 bSplitScreenEnabled false; CurrentSplitType 0; } void ACustomViewportManager::BeginPlay() { Super::BeginPlay(); InitializeResources(); } void ACustomViewportManager::Tick(float DeltaTime) { Super::Tick(DeltaTime); if (bSplitScreenEnabled) { // 可以在这里每帧更新视口逻辑例如跟随不同的ViewTarget // 但更高效的做法是仅在ViewTarget变化时更新SceneCaptureComponent的Location/Rotation } } void ACustomViewportManager::InitializeResources() { CleanupResources(); // 先清理旧的 // 这里我们预设最多支持4人分屏 int32 MaxPlayers 4; SceneCaptureComponents.Reserve(MaxPlayers); RenderTargets.Reserve(MaxPlayers); for (int32 i 0; i MaxPlayers; i) { // 1. 创建场景捕获组件 USceneCaptureComponent2D* NewCaptureComp NewObjectUSceneCaptureComponent2D(this); if (NewCaptureComp) { NewCaptureComp-RegisterComponent(); // 必须注册 NewCaptureComp-AttachToComponent(GetRootComponent(), FAttachmentTransformRules::KeepRelativeTransform); NewCaptureComp-FOVAngle 90.0f; NewCaptureComp-CaptureSource SCS_FinalColorLDR; NewCaptureComp-bCaptureEveryFrame true; // 分屏通常需要每帧更新 NewCaptureComp-bCaptureOnMovement true; SceneCaptureComponents.Add(NewCaptureComp); } // 2. 创建渲染目标 FString RTName FString::Printf(TEXT(RT_Player%d), i); UTextureRenderTarget2D* NewRenderTarget NewObjectUTextureRenderTarget2D(this, *RTName); if (NewRenderTarget) { // 分屏时每个RT的尺寸是总尺寸的一半水平或垂直 FIntPoint SplitSize (CurrentSplitType 0) ? FIntPoint(RenderTargetSize.X / 2, RenderTargetSize.Y) : // 水平分屏 FIntPoint(RenderTargetSize.X, RenderTargetSize.Y / 2); // 垂直分屏 NewRenderTarget-InitCustomFormat(SplitSize.X, SplitSize.Y, PF_B8G8R8A8, false); // 使用常用格式 NewRenderTarget-UpdateResourceImmediate(true); RenderTargets.Add(NewRenderTarget); } // 3. 绑定 if (NewCaptureComp NewRenderTarget) { NewCaptureComp-TextureTarget NewRenderTarget; } } } void ACustomViewportManager::EnableSplitScreen(bool bEnable, int32 SplitType) { if (bSplitScreenEnabled bEnable CurrentSplitType SplitType) { return; // 状态未改变 } bSplitScreenEnabled bEnable; CurrentSplitType SplitType; if (bEnable) { // 重新初始化资源尺寸可能因分屏类型改变 InitializeResources(); UpdateSplitScreenLayout(); // 通知游戏模式或HUD开始使用分屏渲染 // 这里需要你自定义逻辑例如修改玩家的摄像机或HUD // 通常需要禁用默认的全屏摄像机并激活多个“虚拟玩家”的视角 } else { // 恢复默认全屏 CleanupResources(); // 通知游戏模式或HUD恢复全屏渲染 } } void ACustomViewportManager::CreateViewportForPlayer(int32 PlayerIndex, AActor* ViewTarget) { if (!SceneCaptureComponents.IsValidIndex(PlayerIndex) || !ViewTarget) { return; } USceneCaptureComponent2D* CaptureComp SceneCaptureComponents[PlayerIndex]; if (CaptureComp) { // 设置场景捕获组件的位置和旋转使其与ViewTarget的视角同步 // 这里简化处理直接将组件附加到ViewTarget并保持相对偏移为零。 // 更复杂的实现可能需要复制玩家摄像机的视角参数。 CaptureComp-AttachToActor(ViewTarget, FAttachmentTransformRules::SnapToTargetNotIncludingScale); CaptureComp-SetRelativeLocation(FVector::ZeroVector); CaptureComp-SetRelativeRotation(FRotator::ZeroRotator); } } void ACustomViewportManager::UpdateSplitScreenLayout() { // 此函数用于更新每个场景捕获组件的投影矩阵或视口矩形如果引擎底层支持。 // 在UE中更常见的做法不是直接修改摄像机的投影矩阵来实现分屏 // 而是通过创建多个PlayerController和独立的摄像机Actor并调整每个玩家的视口在屏幕上的占位Viewport Client设置。 // 本管理器更侧重于生成多个独立的渲染目标RT。 // 因此UpdateSplitScreenLayout 的主要任务可能是 // 1. 根据CurrentSplitType重新计算每个RenderTarget的尺寸已在InitializeResources中做。 // 2. 通知UMG或材质如何排列这些RT。 // 真正的屏幕分割布局需要在HUD或Post-Process阶段通过绘制多个四边形到屏幕特定区域来实现。 // 这超出了单个Actor的范围需要引擎层更深的集成。 // 一个更可行的架构是本管理器负责生成N个不同的RT对应N个视角。 // 然后由一个专门的SplitScreenHUDC或蓝图来创建N个全屏的UMG控件 // 每个控件显示一个RT但通过控件的Anchors锚点和Alignment对齐将其压缩到屏幕的1/N区域。 // 例如对于水平分屏Player0的UMG锚点在(0,0)对齐(0,0)尺寸为(0.5, 1.0) // Player1的UMG锚点在(0.5,0)对齐(0,0)尺寸为(0.5, 1.0)。 } void ACustomViewportManager::CleanupResources() { for (auto Comp : SceneCaptureComponents) { if (Comp) { Comp-DestroyComponent(); } } SceneCaptureComponents.Empty(); for (auto RT : RenderTargets) { // RenderTarget是UObject需要手动标记待垃圾回收或置空 RT nullptr; } RenderTargets.Empty(); }4.3 与UMG集成及视口布局C生成了RT最终还是要显示出来。我们需要一个C的HUD或PlayerController来创建和管理分屏UI。创建C HUD类例如ASplitScreenHUD在BeginPlay中获取ACustomViewportManager实例可以通过标签查找或游戏模式设置。根据分屏模式水平/垂直和玩家数量动态创建多个UUserWidget实例。每个Widget都使用同一个WBP_SingleViewport控件蓝图这个蓝图很简单就是一个铺满画布的Image控件其纹理通过变量传入。在创建每个Widget时将ACustomViewportManager中对应的RenderTargets[i]传递给它。最关键的一步设置每个Widget在视口中的几何位置。这需要通过UWidget的SetPositionInViewport和SetDesiredSizeInViewport来实现但更优雅的方式是使用锚点Anchors。在C中直接操作锚点比较繁琐。一个更高效的做法是在WBP_SingleViewport中暴露一个SetViewportRect函数蓝图可调用参数是Normalized Screen Position和Normalized Screen Size归一化的屏幕坐标和尺寸范围0-1。然后在C HUD中计算好每个视口应占的矩形区域例如双人水平分屏Player0为(0,0,0.5,1.0)Player1为(0.5,0,0.5,1.0)调用该函数进行设置。在WBP_SingleViewport的SetViewportRect实现中使用SetAlignmentInViewport和SetAnchorsInViewport等节点将Image控件拉伸到指定的归一化矩形区域。性能优化关键点按需更新在ACustomViewportManager的Tick中不要无条件更新所有SceneCaptureComponent。可以检查对应的ViewTarget是否在最近几帧内移动或旋转过如果没有可以跳过该帧的捕获通过bCaptureEveryFrame或手动调用CaptureScene控制。分辨率缩放分屏时每个视口的实际渲染分辨率可以低于屏幕物理分辨率。例如屏幕是1920x1080双人分屏时每个RT可以设为960x540甚至更低然后在UMG中拉伸显示。这能大幅降低填充率Fill Rate开销。在InitializeResources中根据性能预算动态调整RenderTargetSize。渲染设置裁剪每个SceneCaptureComponent可以独立设置Show Flags。对于画中画或小地图可以关闭昂贵的特效如Ambient Occlusion、Motion Blur、Bloom等。在C中通过ShowFlags.Disable()系列函数实现。5. 进阶技巧与性能优化实战掌握了基础实现后我们来看看如何让这个系统更健壮、更高效。5.1 动态分辨率与抗锯齿处理画中画通常面积较小高分辨率带来的细节提升人眼难以感知却消耗大量性能。实现动态分辨率蓝图在Scene Capture 2D的细节面板Texture Target属性下可以绑定一个动态创建的Render Target 2D。你可以在游戏运行时根据画中画的当前屏幕尺寸通过UMGGet Cached Geometry获取动态创建或调整一个合适尺寸的RT如屏幕尺寸的1/4然后赋值给Scene Capture。C在ACustomViewportManager中可以响应屏幕大小改变事件FViewport::ViewportResizedEvent或者根据UMG反馈的尺寸动态调用RenderTarget-ResizeTarget(NewWidth, NewHeight)和RenderTarget-UpdateResourceImmediate()。抗锯齿AASceneCaptureComponent2D默认使用引擎的后处理抗锯齿如TAA。对于小尺寸画中画TAA可能带来模糊和重影。可以考虑关闭SceneCaptureComponent2D的Anti-Aliasing Method或设置为FXAA速度更快适合小图。在最终显示RT的Image控件材质中使用简单的自定义锐化或像素偏移来减轻锯齿感。5.2 多视口管理与层级控制当有多个画中画如主视角、地图、技能预览时需要管理它们的渲染顺序、可见性和交互。渲染顺序UMG的渲染顺序由控件在视口Viewport中的ZOrder决定后添加的控件在上层。在C HUD中通过AddToViewport时的ZOrder参数控制。确保重要的画中画有更高的ZOrder。可见性绑定到玩家状态或游戏事件。例如只有当玩家获得“无人机”技能后才创建并显示无人机视角的画中画。在ACustomViewportManager中维护一个TMapFName, USceneCaptureComponent2D*便于通过名字查找和开关特定视口。交互画中画UI能否被点击这需要处理UMG的点击检测。默认情况下Image控件是不交互的。如果你需要点击画中画来切换主视角需要将Image的Is Focusable设为true并重写其OnMouseButtonDown事件。注意这会阻止点击事件穿透到后面的3D场景。5.3 常见问题与调试技巧画中画一片黑/灰首要检查Scene Capture组件是否被场景中的物体遮挡尝试暂时将其Location移到高空。检查RT格式确保Render Target的格式支持颜色如RTF_RGBA8。Scene Capture的Capture Source是否设置正确通常为Final Color LDR。检查组件注册在C中动态创建的USceneCaptureComponent2D必须调用RegisterComponent()否则不会被渲染。检查后期处理体积Scene Capture默认会受全局后期处理影响。如果场景有Post Process Volume且设置了Infinite Extent它会影响到捕获结果。可以尝试禁用场景中的后期体积或在Scene Capture的细节面板中添加一个Post Process Settings并覆盖你需要的效果。性能开销巨大使用r.ScreenPercentage或渲染分辨率缩放在控制台命令中降低r.ScreenPercentage可以全局降低渲染分辨率对画中画也有效是快速测试性能瓶颈的方法。ProfileGPU在编辑器运行时按~打开控制台输入profilegpu查看渲染线程各阶段的耗时。关注SceneCapture相关的项。减少捕获频率对于不常变化的视角如静态监控将bCaptureEveryFrame设为false在需要时如监控区域有物体移动手动调用CaptureScene。画中画边缘闪烁或撕裂这通常是渲染线程同步问题。Scene Capture的渲染和主视图的渲染可能不在同一帧。尝试在Scene Capture的细节面板中启用Use Ray Tracing如果项目支持或调整Capture Every Frame的设置。在C中可以尝试在Tick中更新SceneCaptureComponent的变换后立即调用CaptureScene但这可能加剧性能问题。更根本的解决方案是接受1帧的延迟这对于画中画通常可以接受。分屏时两个视角内容完全一样确保你为每个SceneCaptureComponent设置了不同的ViewTarget通过CreateViewportForPlayer函数。在分屏游戏中通常每个本地玩家都有一个独立的PlayerController和CameraActor。你需要将这些不同的CameraActor分别设置为对应SceneCaptureComponent的附着目标或视角复制源。实现自定义视口是深入理解UE5渲染和UI系统的一个绝佳实践。它打破了“一个屏幕一个视角”的定式为游戏设计打开了新的可能性。从简单的画中画到复杂的分屏系统关键在于理清Scene Capture、Render Target和UMG三者之间的数据流。在性能优化上时刻牢记“按需渲染”和“降低分辨率”两大原则。希望这篇教程能成为你探索UE5视觉可能性的坚实起点。在实际项目中不妨从一个小的画中画功能开始逐步迭代最终构建出属于你自己的、充满创意的多视口交互体验。