UE5富文本框实战:用UMG实现游戏内击杀播报(含蓝图配置)

张开发
2026/4/11 0:45:21 15 分钟阅读

分享文章

UE5富文本框实战:用UMG实现游戏内击杀播报(含蓝图配置)
UE5富文本框实战用UMG打造沉浸式击杀播报系统在多人对战游戏中击杀播报系统是提升玩家沉浸感的关键元素之一。想象一下当玩家完成一次精彩击杀时屏幕上动态弹出A用刀击杀B的炫酷提示配合自定义字体和武器图标这种即时反馈能极大增强游戏体验。本文将手把手教你使用UE5的UMG系统中的RichTextBlock组件从零开始构建一个高度可定制的击杀播报系统。1. 基础环境搭建与UMG界面创建首先确保你已安装Unreal Engine 5.1或更高版本。新建一个空白项目时选择游戏模板并启用初学者内容包这会自动包含一些基础资源供我们测试使用。在内容浏览器中右键点击选择用户界面→控件蓝图命名为WB_KillFeed。这是我们的击杀播报主界面。双击打开后在画布面板中添加一个垂直框(Vertical Box)作为容器然后拖入RichTextBlock组件// 在控件蓝图的Construct事件中初始化 VerticalBox-SetAnchors(FAnchors(0.5, 0.1, 0.5, 0.3)); // 居中偏上位置 RichTextBlock-SetAutoWrapText(true); RichTextBlock-SetJustification(ETextJustify::Center); // 文本居中关键参数说明Wrap Text At设置为600确保长文本自动换行Color and Opacity使用浅色系提高可读性Shadow Offset添加2px阴影增强立体感2. 创建文字样式库文字样式库(Data Table)是定义不同文本风格的核心资产。右键内容浏览器选择杂项→数据表结构体选择RichTextStyleRow命名为DT_TextStyles。打开数据表后添加以下典型游戏场景需要的样式行名称字体大小颜色描边色PlayerNameRoboto-Bold24FFE55300FF000000WeaponRoboto-Regular20FFFFFFFFFFFF222222KillActionImpact28FFE51B1BFF000000SystemMsgRoboto-Italic18FF00A2FF无在RichTextBlock的Text Style Set属性中引用这个数据表。现在可以通过标签调用这些样式了PlayerNamePlayer1/ KillActioneliminated/ PlayerNamePlayer2/3. 图像装饰器系统实现要让击杀提示显示武器图标需要创建图像装饰器类。新建蓝图类父类选择RichTextBlockDecorator命名为BP_WeaponDecorator。在类默认值中创建新的图像集(Data Table)结构体选择RichImageRow命名为DT_WeaponIcons。添加常见武器图标行名称纹理尺寸边距knifeT_Knife_Icon40x405,0,5,0pistolT_Pistol_Icon45x305,0,5,0rifleT_Rifle_Icon50x255,0,5,0在BP_WeaponDecorator的类默认值中设置Image Set为刚创建的DT_WeaponIcons勾选bSupportsDynamicImage以支持运行时更换图标回到RichTextBlock组件在Decorators数组中添加这个装饰器类。现在可以这样调用PlayerNamePlayer1/ used img idknife/ to kill PlayerNamePlayer2/4. 动态生成击杀消息创建一个游戏实例蓝图GI_GameManager来管理全局状态。添加以下自定义函数// 生成击杀消息的函数 UFUNCTION(BlueprintCallable) FText GenerateKillMessage(FString KillerName, FString VictimName, FString WeaponID) { FString FormatString FString::Printf( TEXT(PlayerName%s/ KillActioneliminated/ PlayerName%s/ with img id\%s\/), *KillerName, *VictimName, *WeaponID ); return FText::FromString(FormatString); }在玩家角色蓝图中当检测到击杀事件时// 玩家角色蓝图中 void AMyCharacter::OnKill(AMyCharacter* Victim) { UGI_GameManager* GI GetGameInstanceUGI_GameManager(); FText KillMsg GI-GenerateKillMessage( PlayerName, Victim-PlayerName, CurrentWeapon-WeaponID ); // 获取HUD并添加消息 AMyHUD* HUD CastAMyHUD(GetWorld()-GetFirstPlayerController()-GetHUD()); HUD-AddKillMessage(KillMsg); }5. 高级效果优化动画效果实现在WB_KillFeed控件蓝图中添加入场动画创建新的动画时间轴命名为EntryAnim添加以下轨道Render Opacity0 → 1 (0.3秒)Scale0.8 → 1.0 (0.3秒使用弹性曲线)在事件图表中触发动画Event Construct - Play Animation EntryAnim消息队列管理为了避免消息堆积添加自动消失逻辑// 在WB_KillFeed蓝图中 void UWB_KillFeed::AddMessage(FText Message) { // 创建新文本块 URichTextBlock* NewBlock NewObjectURichTextBlock(this); NewBlock-SetText(Message); // 添加到垂直框顶部 VerticalBox-AddChildToVerticalBox(NewBlock)-SetPadding(FMargin(0,0,0,15)); // 5秒后淡出移除 FTimerHandle Handle; GetWorld()-GetTimerManager().SetTimer(Handle, [this, NewBlock](){ RemoveMessage(NewBlock); }, 5.0f, false); } void UWB_KillFeed::RemoveMessage(URichTextBlock* Block) { // 淡出动画 // ... VerticalBox-RemoveChild(Block); }音效集成为不同类型的击杀添加音效反馈创建声音提示数据表击杀类型音效资源音量音高HeadshotSND_Headshot1.21.1MeleeSND_MeleeKill1.01.0LongDistanceSND_SniperKill0.80.9在生成消息时播放对应音效// 在HUD蓝图中 void AMyHUD::AddKillMessage(FText Message, EKillType KillType) { USoundBase* SFX KillSFXDataTable-FindRowFKillSFX(KillType)-Sound; UGameplayStatics::PlaySound2D(GetWorld(), SFX); // ...显示消息 }6. 多平台适配技巧不同平台可能需要调整显示效果移动设备优化缩小字体尺寸整体缩放0.8倍增加点击区域简化动画效果// 平台检测 #if PLATFORM_ANDROID || PLATFORM_IOS RichTextBlock-SetRenderScale(FVector2D(0.8f)); VerticalBox-SetPadding(FMargin(20,0,20,0)); #endif控制台设备优化使用更大的字体添加手柄导航支持延长消息显示时间提示使用GetDefaultUGeneralProjectSettings()-bSupportMobilePortrait检测移动端竖屏模式7. 性能优化与调试大量富文本可能影响性能建议对象池技术重用文本块限制同时显示的消息数量建议3-5条使用异步加载图标资源调试技巧// 控制台命令显示富文本框调试信息 static FAutoConsoleCommand CmdDebugKillFeed( TEXT(show.KillFeedDebug), TEXT(显示击杀播报调试信息), FConsoleCommandDelegate::CreateLambda([](){ GEngine-AddOnScreenDebugMessage(-1, 5, FColor::Green, TEXT(当前活跃富文本块: ) FString::FromInt(GetActiveTextBlocksCount())); }) );性能指标监控表指标目标值测量工具生成延迟2msUnreal Insights内存占用/消息50KBMemory Profiler动画更新耗时0.5ms/frameStat UnitGraph8. 扩展应用场景这套系统不仅适用于击杀播报还可用于任务进度提示成就解锁通知玩家间聊天系统游戏内公告栏例如实现任务系统提示SystemMsg任务更新/ Collect img idgem/ (3/5) in PlayerNameForest Area/进阶技巧通过继承RichTextBlockDecorator创建自定义装饰器可以实现玩家头像显示进度条嵌入交互式按钮动态数据绑定在最近的一个竞技场类项目中我们使用这套系统不仅实现了击杀提示还扩展出了实时比分板、连杀特效提示等功能。特别是通过自定义装饰器实现的动态击杀图标功能根据连杀次数自动升级图标样式极大提升了玩家的成就感和竞技体验。

更多文章