虚幻ImGui网页绘制插件

franciscochonge

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("Example Menu"))
{
        {
                bool Value = bExampleToggle;
                if (ImGui::Checkbox("Example Toggle", &Value))
                {
                        bShowGlobalLifeTime = Value;
                        DebuggerContext.MarkConfigDirty();
                }
        }
        ImGui::EndMenu();
}

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

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

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

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

APSchmidt

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