虚幻ImGui网页绘制插件

franciscochonge · 发表于 2022-10-11 13:41

ImGui_WS仓库地址（详细文档请看仓库中的readme
ImGui_WS

功能预览

各位虚幻的开发是否在烦恼

虚幻的Slate语法太复杂，为了实现一个简单的调试工具大量的时间花费在面板逻辑的编写上
调试环境和游戏环境没法做区分，很多临时的可视化代码实现了又得删除
打包后的游戏没法和编辑器一样预览和修改数值

那么可以试用下ImGui_WS插件，可以将调试信息使用ImGui独立绘制在Web页面上。
可作为虚幻项目的远程调试器或者GM工具使用。
拓展方式

虚幻俯视图添加需要可视化的Actor类型

创建继承于UImGuiWorldDebuggerDrawerBase的类型

添加构造函数

UShootWeaponBulletDrawer::UShootWeaponBulletDrawer()
{
// 标识该Drawer支持的Actor类型
DrawActor = AShootWeaponBullet::StaticClass();
// 绘制的实体半径
Radius = 10.f;
// 绘制的颜色
Color = FLinearColor::Red;
}

重写DrawImGuiDebuggerExtendInfo等函数添加额外的调试信息绘制

void UShootWeaponBulletDrawer::DrawImGuiDebuggerExtendInfo(const AActor* Actor, const FImGuiWorldViewportContext& DebuggerContext) const
{
const AShootWeaponBullet* Bullet = CastChecked<AShootWeaponBullet>(Actor);
const FVector EndLocation = Bullet->GetActorLocation();
const FVector StartLocation = EndLocation - Actor->GetVelocity() * DebuggerContext.DeltaSeconds;
DebuggerContext.DrawLine(FVector2D{ StartLocation }, FVector2D{ EndLocation }, Color);
}
虚幻俯视图添加额外的世界信息绘制

继承UImGuiWorldDebuggerViewportPanel并重写以下虚函数

DrawDebugInfoUnderActors 在Actor的下层绘制额外的调试信息
DrawDebugInfoUpperActors 在Actor的上层绘制额外的调试信息

建议每个世界调试信息添加开关，避免调试世界同时显示过多的元素
// 声明开关
UPROPERTY(Config)
uint8 bExampleToggle : 1;

// 实现中添加是否开启开关的菜单选项
if (ImGui::BeginMenu(&#34;Example Menu&#34;))
{
{
bool Value = bExampleToggle;
if (ImGui::Checkbox(&#34;Example Toggle&#34;, &Value))
{
bShowGlobalLifeTime = Value;
DebuggerContext.MarkConfigDirty();
}
}
ImGui::EndMenu();
}

// 逻辑中判断开关，开启的情况再进行调试信息的绘制
新增面板

继承FUnrealImGuiPanelBuilder下支持的面板基类类型，例如ImGuiWorldDebugger拓展面板就继承UImGuiWorldDebuggerPanelBase

配置Title，无命名的面板不会被注册
配置DefaultDockSpace，添加面板在布局中的位置
重写Draw，实现面板的绘制

ImGuiWorldDebuggerViewportPanel面板例子
UImGuiWorldDebuggerViewportPanel::UImGuiWorldDebuggerViewportPanel()
{
// 声明需要显示菜单栏
ImGuiWindowFlags = ImGuiWindowFlags_MenuBar;
// 面板命名
Title = LOCTEXT(&#34;Viewport&#34;, &#34;Viewport&#34;);
// 默认在ImGuiWorldDebuggerDefaultLayout布局中的位置为Viewport
DefaultDockSpace =
{
{ UImGuiWorldDebuggerDefaultLayout::StaticClass()->GetFName(), UImGuiWorldDebuggerDefaultLayout::EDockId::Viewport }
};
}

APSchmidt · 发表于 2022-10-11 13:48

基于imgui的很强大且方便易用易扩展第三方UnrealEngine数据可视化调试工具，对照UE的Viewport,Detail,Log,Outline等面板，使用imgui绘制了一套，更易于全局去调试游戏World中的数据，且基于imgui_ws实现了在Web中绘制，可通过http地址分享数据在imgui绘制的效果。对于imgui的可靠性，可去看看《给她爱6》的视频[doge]

		自动登录	找回密码
密码			立即注册

虚幻ImGui网页绘制插件

本帖子中包含更多资源