Pyrite64编辑器架构剖析基于ImGui的pages/parts/window UI组织方式【免费下载链接】pyrite64N64 Game-Engine and Editor using libdragon tiny3d项目地址: https://gitcode.com/GitHub_Trending/py/pyrite64Pyrite64 是一款基于 libdragon 与 tiny3d 构建的N64 游戏引擎和编辑器其编辑器 UI 完全由 Dear ImGui 实现。本文带你用 10 分钟看懂 Pyrite64 编辑器pages / parts / window 三层 UI 架构从主窗口管理、两级页面启动页/场景页到十几个可停靠面板的组织方式并附源码路径索引适合想读懂或二次开发这款开源编辑器的新手。一、总体结构三层分离的 UI 架构Pyrite64 编辑器把界面代码清晰地切分为三层各层职责如下层级目录职责windowsrc/editor/window.h主窗口创建、几何尺寸记忆、状态存取pagessrc/editor/pages/顶层页面启动页 Launcher 与主编辑页 Scenepartssrc/editor/pages/parts/具体面板视口、场景图、检查器、日志等这种窗口 → 页面 → 面板的分层让每部分都只管自己的事是整个编辑器可扩展性的关键。二、window 层主窗口如何管理主窗口由 src/editor/window.h 中的Window类封装核心很简单WindowState记录 x/y 坐标、宽高默认 1280×800和最大化状态saveState()/loadState()窗口几何信息持久化到配置文件下次启动自动还原窗口位置大小trackGeometry()在窗口移动、缩放事件时同步跟踪尺寸。启动流程写在 src/main.cpp先初始化 SDL3 与 SDL_GPU 设备再创建 ImGui 上下文开启DockingEnable停靠支持最后进入主循环——每帧在已打开项目与未打开项目之间切换页面打开项目 → ctx.editorScene-draw() // 主编辑页 未打开 → editorMain.draw() // 启动页也就是说页面切换只发生在主循环的一行判断里页面之间互不感知这是解耦做得很彻底的体现。三、pages 层两个顶层页面pages 目录下只有两个顶层页面结构一目了然1. 启动页Launchersrc/editor/pages/launcher.h 负责应用首屏展示最近项目卡片、新建项目按钮。它持有一组Renderer::Texture标题、按钮图标、背景卡片缩略图通过cardImageCache缓存对应素材在 data/img/如cardAdd.svg、splashBG.png。2. 场景页Scenesrc/editor/pages/editorScene.h 是编辑器的大脑它持有所有 parts 面板实例std::vectorstd::shared_ptrViewport3D viewports{}; std::vectorstd::shared_ptrNodeEditor nodeEditors{}; AssetsBrowser assetsBrowser{}; AssetInspector assetInspector{}; SceneGraph sceneGraph{}; LogWindow logWindow{}; // …更多面板成员draw()方法每帧完成三件事搭建停靠布局 → 绘制所有面板 → 处理关闭与脏数据弹窗。四、parts 层可停靠面板群每个面板都是一个独立类放在 src/editor/pages/parts/统一遵循持有状态 draw()方法的模式。按停靠区域分组如下中央区3D 视口viewport3D.h 是最复杂的 part内部持有独立的Camera、Framebuffer、网格/线框/Sprite 网格支持多视口viewports是 vector可自由增减还有 Gizmo 拖拽、对象拾取、导航锁定等交互状态。视口标题用###vpid后缀保证重命名后停靠状态不丢失——这是 ImGui 停靠的一个实用技巧。左侧区场景管理sceneGraph.h —— 场景对象树sceneInspector.h —— 场景属性layerInspector.h —— 图层管理。右侧区检查器objectInspector.h —— 选中对象组件编辑assetInspector.h —— 资产属性parts/assets/modelEditor.h —— 模型编辑器含同目录的textureEditor.h、matInstanceEditor.h。底部区工具面板assetsBrowser.h —— 资产文件浏览器logWindow.h —— 日志输出memoryDashboard.h —— ROM 内存仪表盘。浮动窗口与覆盖层preferenceOverlay.h —— 偏好设置居中模态窗projectSettings.h —— 项目设置toolchainOverlay.h —— 工具链安装引导nodeEditor.h —— 节点图编辑关闭未保存图时会弹出保存/丢弃/取消确认弹窗。五、停靠布局一次搭好用户可自由拖动Editor::Scene::draw()首次运行时用DockBuilder一次性搭建四区布局见 editorScene.cpp区域停靠窗口中央3D-Viewport左 15%Scene、Graph、Layers右 25%Asset、Object、Model底 25%Files、Log、ROM之后用户可以自由拖拽分栏、换区布局由 ImGui 自行记忆菜单里的Reset Layout则清空所有视口并重建默认布局。六、会话持久化每个项目记住自己打开的窗口编辑器把会话状态写入editorScene.jsonloadSession()/saveSession()视口每个Viewport3D的saveState()序列化为 JSON项目窗口集WindowSet按项目路径为 key记录该项目打开过的模型编辑器和节点图 UUID。巧妙之处在于restoredForProject判断切换项目时先closeAllEditors()再restoreWindows()保证A 项目不会残留 B 项目的窗口——对多项目工作流非常友好。七、横向系统Actions、主题与快捷键面板之外还有三个横切模块动作系统src/editor/actions.hregisterAction/Actions::call解耦 UI 与业务如OPEN_NODE_GRAPH动作可在任意面板触发打开节点图主题系统src/editor/imgui/theme.h主题 JSON 数据在 data/themes/dark、retro-95、highcontrast 等 6 套支持菜单切换与缩放快捷键与撤销src/editor/keymap.h、src/editor/undoRedo.hCtrlZ/Y 撤销重做、CtrlShiftF 对齐对象到相机等状态栏实时显示 FPS 与撤销历史占用。八、小结如何照着这个架构扩展一个面板在 src/editor/pages/parts/ 新建myPanel.h/.cpp写一个带draw()的类在 editorScene.h 的Scene中加一个成员并#include头文件在Scene::draw()中用ImGui::Begin(MyPanel)包裹myPanel.draw()并按需加入DockBuilderDockWindow布局若需记忆开关状态把 UUID 加进WindowSet的 JSON 即可。三层架构 统一draw()约定让 Pyrite64 编辑器的 UI 既整洁又易扩展——这正是它能持续加入节点图、模型编辑器等复杂功能而不显臃肿的原因。【免费下载链接】pyrite64N64 Game-Engine and Editor using libdragon tiny3d项目地址: https://gitcode.com/GitHub_Trending/py/pyrite64创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考