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

虚幻ImGui网页绘制插件

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 发表于 2022-10-11 13:48

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