UE5怎么实现UI按键按下时缩放的效果

最新推荐文章于 2025-07-22 15:23:59 发布
最新推荐文章于 2025-07-22 15:23:59 发布
阅读量593 收藏
点赞数 2
CC 4.0 BY-SA版权
文章标签： ue5 游戏引擎 虚幻 游戏程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44898112/article/details/144754584
第一种方法：

先设置居中对齐（不能拉伸）

修改细节面板Pressed的Image Size，比正常小一点就行了

第二种方法：

在蓝图里设置点击效果：缩放按键大小Set Render Scale

注意：

改按钮细节面板里的Normal Padding和Pressed Padding是没用的：

因为这两个属性控制的是Button的子控件

也就是说，如果CloseButton下有个Image，此时按下Button时Image会按照Pressed Padding的大小向内收缩5个单位

【虚幻引擎UE】UE5 PC鼠标和移动端触屏旋转缩放操作（含工程源码）
灵境引路人
08-12 5921
【虚幻引擎UE】实现UE5移动端触屏操作
鼠标拖拽UI移动和缩放大小
weixin_55465881的博客
07-04 190
学习阶段制作的一个Image的拖拽移动功能，通过UI挂在EventTrigger,通过相关事件进行触发，不足之处还望不吝啬指教。
【UE5】根据素材图片大小调整UI上的image大小
weixin_56537692的博客
07-05 788
原理是AX/AY=BX/BY。
UE4触摸屏，单指旋转，双指缩放，双指移动
05-24
能够实现单指旋转双指缩放，控制相机远近，点击事件按钮，适合UE4学习触摸屏的同学，移动开发，或者触摸屏开发
UE5创建3D 按钮
AgilityBaby的博客
06-11 336
widget Class:选择创建的UMG按钮。修改Text 1.大小，2.文字，3.颜色。创建UMG按钮自定义大小（200,50）初始化按钮，创建函数InitButton。创建蓝图：3d按钮蓝图（Actor）修改按钮显示的空间为Screen。
UE4触摸屏旋转、双指缩放
weixin_45959035的博客
12-22 6214
UE4触摸屏旋转、双指缩放 前言 最近接触触摸屏项目案列，自己研究了一下旋转和双指缩放的实现方法，记录一下。
UE5 UI scaleBox 缩放框
最新发布
吴梓穆的博客
07-22 377
可以用来做背景，对比直接让一个image充满canvas，使用缩放框可以避免图片变形。缩放以匹配X：子物体保持原始比例，始终跟随缩放框的X缩放，多余部分会被裁剪。缩放框的尺寸改变时，将影响子物体的缩放，子物体的缩放不能再手动调整。缩放以填充：类比上边，现在将跟随X或Y中较长的边缩放，并会被裁剪，缩放以匹配：子物体保持原始比例，并尽可能放大。无：不影响子物体，子物体保持原始比例和大小。填充：子物体拉伸填满，不保持原始比例。重点是拉伸，指定如何对图片进行拉伸。缩放以匹配Y：类比上边。
UE5开发——射击武器类拾取
qq_54441756的博客
08-30 969
1. 枪支拾取动画 创建Text Block
[2021.12.13]＜UE4学习日记＞UI基础功能（UI小动画、拖拽UI计分、显示帧数）
热爱游戏开发的呆头熊。的小本本
12-14 1439
做一个UI效果合集。 一、UI简单动画 二、计分显示UI 三、可拖拽UI 四、显示游戏帧数 一、UI简单动画 1.添加UI（Text，Image……），此处简单设置成颜色改变，具体想做缩放，位置改变等效果均可通过TextBoom后面的加号添加实现。 2.蓝图中控制动画播放： 二、计分UI 1.添加 分数Text，将分数Text 绑定计分函数。 2.计分函数： （Score来自玩家身上的public变量） 3.关卡蓝图控制显示： （帧数...
35_ue4[UI]04_UI动画和暂停游戏
zhang2362167998的博客
07-09 1389
游戏暂停
ue4 ui 序列图_UE4入门之路（UI篇）：UMG系统介绍
weixin_39816362的博客
12-21 1442
一、关于UE42017年，多款基于虚幻引擎4(简称UE4)开发的游戏开始崭露头角，如果将2017年比作虚幻引擎爆发的元年，那么2018年则是虚幻引擎以及Epic Games再创新高，实现自我超越的一年。2018年7月UE4的开发者人数突破630万，中国的使用者仅次于美国，位居世界第二。2017年11月至2018年7月短短不到9个月间，UE4用户数自400万增至630万，足足成长了60%。在2018...
【UE】蓝图制作小地图（小地图篇）
weixin_51638732的博客
11-23 2103
将小地图包裹在CanvasPane下，设置CanvasPane的裁剪设置为Clip to Bouds，这样超出范围的地图区域就不会显示。这里通过实时获取玩家的位置再根据小地图的尺寸等比例换算成长度来实现小地图跟随玩家运动。如果地图的原点正好位于地图中心则无需通过额外参数计算与中心的位置差量，否则需要额外根据原点位置来计算。前面我们实现了地图的捕获，这里我们来实现小地图的缩放和跟随运动的功能。运行后会看到玩家的位置显示在小地图上，小地图会跟随玩家运动。为了实时获取玩家的位置，首先要获取玩家。
UE蓝图中打开界面暂停、按钮点击执行开始和退出游戏、修改默认地图
AgilityBaby的博客
05-29 355
1：开始时调用 2：创建界面Class 选择要打开的WBP控件 3：添加到视口 4：设置游戏暂停 Paused 勾选为true
UIButton的大小不变，将图标缩小0.5倍显示
竹毛言己
06-20 2234
设置图片在button中的显示位置、大小。 这种方法强制缩小UIButton的imageView的大小，从而使得放上去的图标变小，但是button本身大小并不会被缩小。 扩大图片的点击范围，使用此方法也可行。 UIImage *image = UIImage(@"返回箭头"); UIButton *backButton = [UIButton buttonWithType:UIBu...
虚幻5|按键触发学习
djh7758258520184的博客
08-27 1774
按住按键先触发ongoing的内容，如果超出了保存时间阈值，自动变成触发Trigger，取消后触发完成，cancel和complete分别是在未超出保存时间阈值之前取消ongoing的内容，completed完成Trigged的触发内容，不会再次启动Trigged。比如，我做闪避然后加速，闪避在ongoing，加速在triggered，我只闪避就要用到cancel，我加速停下后，一移动发现还是加速运动，这就需要用到completed了，保证下次不会再次启动Trigged。
【UE5】映射方式：动作映射(Action Mappings) 与 轴映射(Axis Mappings)
weixin_64072619的博客
03-10 2822
链接：https://pan.baidu.com/s/1nQHvZXC4BDsfbFWDYZqEfA?按下键盘A键，不要抬起，屏幕左上角打印了一次。（和Unity中的轴映射机制类似）下面我们通过测试更直观的了解一下这。抬起键盘A键，屏幕左上角打印了一次。项目资源文末百度网盘自取。再添加一个按键，选择键盘。键，缩放值设置为 2.0。，框选所有测试节点，按下。的情况下，屏幕一直打印。
用UE自带的UMG组件实现类似图片查看器鼠标拖动缩放功能
weixin_35776834的博客
12-29 500
UE自带UMG组件实现图片拖动和缩放功能
UE5学习笔记 FPS游戏制作42 按钮添加回调函数
吴梓穆的博客
04-03 373
创建另一个UI控件，在里边拖入上边创建的控件A，命名为NewGameButton，然后注册OnClick回调事件。选中Button，为button的Onclick事件注册，执行我们上边定义的对外的Onclick回调事件。但是如果我们使用了自己定义的控件，由于控件里的变量不会暴露，就不能再手动绑定事件。正常情况下，我们直接点击按钮的变量，然后选则Onclick事件，绑定即可。此时需要使用回调函数，保证自定义控件的button依然能触发逻辑。打开事件图表，在事件分发器里，声明一个事件。
Ue5蓝图-数字孪生+输入增强-实现简单鼠标Pawn的功能（平移；旋转；缩放）-231012
weixin_51531312的博客
10-12 2757
大体逻辑，以Ue5输入增强功能（EhancedInput）作为入口；定义鼠标左键为平移键；鼠标滚轮来实现缩放功能。鼠标滚轮操作函数 变量 MiddleAxis1 是从 GetMouseWheelAxis 获取而提升为一个变量。1.设置Input_Action 和 Input Mapping Context。鼠标滚轮操作与 TargetArmLength 有关；2）分别启用IA事件；定义三个功能函数-分别对应三个鼠标功能。1）首先开启输入增强；PS：其他设置：可以设置鼠标可见（可选）//鼠标滚轮操作函数。
UE5 Widget截圖
06-14
<think>我们正在讨论UE5中如何实现Widget的截图功能。根据用户的需求，他想要在Widget上实现截图功能，也就是将当前的Widget内容渲染成图片。在UE5中，通常有两种截图方式：1.截取整个屏幕（包括3D场景和UI）2.单独截取某个Widget的内容用户明确要求的是Widget的截图，所以我们需要专注于如何将Widget的内容渲染到纹理（RenderTexture）或者保存为图片文件。实现思路：-使用`UWidgetBlueprintLibrary`中的`DrawWidgetToRenderTarget`函数，将Widget绘制到一个渲染目标（RenderTarget）上。-然后，我们可以将这个渲染目标保存为图片文件。步骤：1.创建一个渲染目标（RenderTarget2D）资源。2.在需要截图的时候，将目标Widget绘制到这个渲染目标上。3.将渲染目标保存为图片文件（例如PNG）。注意：渲染目标的大小应该与Widget的大小相匹配。具体代码步骤：1.**创建渲染目标**：可以在内容浏览器中手动创建，或者通过代码动态创建。这里假设我们已经在内容浏览器中创建了一个渲染目标（比如命名为`RT_WidgetScreenshot`）。2.**获取目标Widget**：我们需要获取到想要截图的Widget的引用。3.**调用绘制函数**：使用`UWidgetBlueprintLibrary::DrawWidgetToRenderTarget`将Widget绘制到渲染目标。4.**保存渲染目标为图片**：使用`UKismetRenderingLibrary::ExportRenderTargetToPNG`（或其它格式）将渲染目标保存为图片文件。示例代码（在某个Actor或Widget的代码中）：```cpp//假设我们有一个渲染目标变量UTextureRenderTarget2D*RenderTarget;//假设我们有一个要截图的WidgetUUserWidget*TargetWidget;//执行截图voidCaptureWidgetToFile(){if(RenderTarget&&TargetWidget){//将Widget绘制到渲染目标UWidgetBlueprintLibrary::DrawWidgetToRenderTarget(TargetWidget,RenderTarget);//保存为PNG文件FStringFilePath=FPaths::ProjectSavedDir()+TEXT("Screenshots/WidgetScreenshot.png");UKismetRenderingLibrary::ExportRenderTargetToPNG(RenderTarget,FilePath);}}```但是，需要注意的是，`DrawWidgetToRenderTarget`函数只能在游戏线程中调用，并且需要确保Widget已经被添加到视口（即已经显示）或者即使没有显示也可以（根据文档，它不需要添加到视口）。不过，为了确保Widget的布局和渲染正确，通常我们会先将其添加到视口，然后立即截图，但也可以不添加到视口而直接绘制。另外，如果Widget的尺寸较大，需要确保渲染目标的大小足够。我们可以通过代码设置渲染目标的大小：```cpp//在创建渲染目标时设置大小RenderTarget=NewObject<UTextureRenderTarget2D>();RenderTarget->InitAutoFormat(1024,768);//设置宽高```如果是在蓝图中创建，则可以在内容浏览器中设置渲染目标的尺寸。**注意事项**：-确保在调用`DrawWidgetToRenderTarget`之前，Widget已经完成了布局（即已经经过了Slate的预渲染阶段）。如果Widget还没有被添加到视口，可能需要手动触发一次布局。-保存路径：`FPaths::ProjectSavedDir()`指向的是项目的Saved目录，我们可以在其中创建Screenshots子目录。**在蓝图中实现**：如果用户更倾向于使用蓝图，也可以使用蓝图节点：-使用“DrawWidgettoRenderTarget”节点。-使用“ExportRenderTargettoPNG”节点。**关于性能**：频繁截图可能会影响性能，因此建议在需要时执行。根据用户提供的引用，我们没有直接关于截图功能的引用，但是引用了创建UI控件和显示UI的内容（引用[2][3]）。因此，我们假设用户已经创建了需要截图的Widget。下面我们提供一个完整的步骤教程：###UE5Widget截图功能实现教程####步骤1：准备渲染目标-在内容浏览器中右键单击，选择“渲染目标”->“渲染目标2D”，命名为`RT_WidgetCapture`。-双击打开，设置其尺寸（例如1024x768）和格式（例如RGBA8）。####步骤2：创建需要截图的Widget-创建一个用户控件蓝图（例如`BP_TargetWidget`），设计好界面。####步骤3：编写截图逻辑-在某个Actor（比如游戏模式）或者Widget中编写截图函数。#####示例代码（C++）：在头文件中声明：```cpp#include"Engine/TextureRenderTarget2D.h"#include"Blueprint/WidgetBlueprintLibrary.h"#include"Kismet/KismetRenderingLibrary.h"//...public:UFUNCTION(BlueprintCallable,Category="Screenshot")voidCaptureWidget(UUserWidget*Widget,UTextureRenderTarget2D*RenderTarget,constFString&Filename);```在源文件中实现：```cppvoidAMyActor::CaptureWidget(UUserWidget*Widget,UTextureRenderTarget2D*RenderTarget,constFString&Filename){if(Widget&&RenderTarget){//绘制Widget到渲染目标UWidgetBlueprintLibrary::DrawWidgetToRenderTarget(Widget,RenderTarget);//构造文件路径（保存在Saved/Screenshots/目录下）FStringDir=FPaths::ProjectSavedDir()+TEXT("Screenshots/");if(!FPlatformFileManager::Get().GetPlatformFile().DirectoryExists(*Dir)){FPlatformFileManager::Get().GetPlatformFile().CreateDirectory(*Dir);}FStringFilePath=Dir+Filename;//保存为PNGUKismetRenderingLibrary::ExportRenderTargetToPNG(RenderTarget,FilePath);UE_LOG(LogTemp,Log,TEXT("Widgetscreenshotsavedto:%s"),*FilePath);}}```#####蓝图实现：如果你使用蓝图，可以这样操作：1.创建一个函数，命名为`CaptureWidget`。2.输入参数：Widget（UserWidget对象），RenderTarget（TextureRenderTarget2D对象），Filename（字符串）。3.在函数内：-添加节点“DrawWidgettoRenderTarget”，将Widget和RenderTarget连接。-添加节点“ExportRenderTargettoPNG”，将RenderTarget和文件路径连接（文件路径使用字符串拼接，例如：`Saved/Screenshots/`+Filename+`.png`）。-注意：需要确保目录存在，可以使用“DirectoryExists”和“CreateDirectory”节点。####步骤4：调用截图函数-在需要截图的地方（比如按下一个键），调用上面编写的函数，传入要截图的Widget和渲染目标，以及文件名。####注意事项-如果Widget没有被添加到视口，直接绘制到渲染目标，那么它不会受到游戏视口大小和缩放的影响，所以需要确保Widget的尺寸设置正确。-渲染目标的大小应该与Widget的期望大小一致，否则可能会出现拉伸或裁剪。-保存路径的写入权限：确保项目有权限在Saved目录下写入文件。###相关问题1.如何将UE5中的3D场景和UI一起截图？2.如何实现定时自动截图功能？3.如何将截图上传到服务器或分享给其他玩家？4.截图时如何隐藏某些UI元素？</think>### UE5 Widget截图功能实现教程 在UE5中实现Widget截图功能的核心思路是将UI控件渲染到纹理（Render Target），然后保存为图片文件。以下是详细步骤： #### 步骤1：创建渲染目标（Render Target） 1. 在内容浏览器右键创建 **纹理** → **渲染目标** → 命名如`RT_WidgetCapture` 2. 设置渲染目标尺寸（如1920×1080）匹配UI分辨率 ```cpp // 创建渲染目标对象 UTextureRenderTarget2D* RenderTarget = NewObject<UTextureRenderTarget2D>(); RenderTarget->InitAutoFormat(1920, 1080); // 设置尺寸 RenderTarget->UpdateResourceImmediate(); ``` #### 步骤2：将Widget渲染到纹理 使用`DrawWidgetToRenderTarget`函数将UI绘制到渲染目标： ```cpp // 在需要截图的函数中 void AMyHUD::CaptureWidgetScreenshot() { if (TargetWidget && RenderTarget) { // 将Widget绘制到渲染目标 UWidgetBlueprintLibrary::DrawWidgetToRenderTarget( TargetWidget, // 要截图的Widget实例 RenderTarget // 步骤1创建的渲染目标 ); // 保存为PNG文件 FString FilePath = FPaths::ProjectSavedDir() + "Screenshots/WidgetCapture.png"; UKismetRenderingLibrary::ExportRenderTargetToPNG(RenderTarget, FilePath); } } ``` #### 步骤3：设置截图触发机制 常见触发方式： 1. **按键触发**： ```cpp // 在玩家控制器中 void AMyPlayerController::SetupInputComponent() { Super::SetupInputComponent(); InputComponent->BindAction("Screenshot", IE_Pressed, this, &AMyPlayerController::CaptureUI); } ``` 2. **UI按钮触发**： ```cpp // 在Widget蓝图中的按钮事件 UFUNCTION(BlueprintCallable) void UMyWidget::OnScreenshotButtonClicked() { AMyHUD* HUD = Cast<AMyHUD>(GetWorld()->GetFirstPlayerController()->GetHUD()); if(HUD) HUD->CaptureWidgetScreenshot(); } ``` #### 步骤4：处理隐藏元素（可选） 若需隐藏截图按钮自身： ```cpp void UMyWidget::OnScreenshotButtonClicked() { ScreenshotButton->SetVisibility(ESlateVisibility::Hidden); // 隐藏按钮 // 延迟0.1秒后截图（确保UI刷新） FTimerHandle TimerHandle; GetWorld()->GetTimerManager().SetTimer(TimerHandle, [this](){ AMyHUD* HUD = Cast<AMyHUD>(GetWorld()->GetFirstPlayerController()->GetHUD()); if(HUD) HUD->CaptureWidgetScreenshot(); ScreenshotButton->SetVisibility(ESlateVisibility::Visible); // 恢复显示 }, 0.1f, false); } ``` #### 完整工作流程： 1. 创建渲染目标资源 2. 获取需要截图的Widget实例 3. 调用`DrawWidgetToRenderTarget`渲染到纹理 4. 使用`ExportRenderTargetToPNG`保存为图片 5. 图片默认保存在 `项目目录/Saved/Screenshots/` > **注意事项**： > - 确保Widget已加入视口（`AddToViewport`） > - 渲染目标尺寸需大于等于Widget实际尺寸 > - 路径权限：打包游戏时需配置`SaveGame`权限[^2] > - 性能优化：避免每帧截图，复用渲染目标对象 ### 调试技巧 若截图失败，检查： ```cpp // 调试输出日志 UE_LOG(LogTemp, Warning, TEXT("RenderTarget: %s"), *GetNameSafe(RenderTarget)); UE_LOG(LogTemp, Warning, TEXT("Widget: %s"), *GetNameSafe(TargetWidget)); ``` ### 高级应用 1. **实时UI流传输**：将渲染目标绑定到材质，实现UI投影到3D物体 2. **动态生成UI图集**：批量渲染多个Widget合并为纹理图集 3. **网络同步**：将渲染目标数据压缩后通过RPC同步
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值