SuperAPI AI 工具集

editable-ui

设计与创作

查看项目

更新于 10-16 05:05

技能介绍

用途:让 Decentraland 场景 UI 在 Creator Hub 的 2D UI 编辑器中可编辑。编辑器没有独立保存格式,直接解析 src/ui/ 下的 @dcl/react-ecs .tsx,画布操作以最小文本拼接写回,磁盘监听约 1 秒同步外部修改。

主要能力与约束:编辑性由代码契约决定。解析器无法静态理解的值会“冻结节点”(动态 props 不可编辑)或“不可见节点”(未知元素、spread、条件或 .map() 子节点、JSX 注释会整棵子树消失)。仅模型化 UiEntity、Label、Input、Dropdown、Button 五种元素,跨文件 <MyWidget /> 是唯一受支持复用单元。

用法要点:每个组件一个文件,文件名须为 PascalCase 且与导出函数名一致;每个文件首行 /** @jsx ReactEcs.createElement */;只用 // 注释。index.tsx 为生成式聚合器,不可手改,setupUi() 从 main() 调用。状态用 export interface State 与 export const state: State;样式绑定须为裸引用(如 state.panelWidth)。时钟、缓动、格式化等逻辑放到 src/ui/ 外的 .ts 驱动文件。

适配已有 UI:需拆分为多文件并消除条件渲染、.map()、计算样式、插值文本与手动 hover 状态,改用交互层;每条尺寸位置改为 px,根与包装需显式宽高。

限制:需要 @dcl/sdk 7.26.0+;Bevy 渲染器下进入 2D 模式会冻结场景;子组件引用不接受嵌套 children;移动端 HUD 由编辑器管理,src/mobile-hud.ts 不可手写;该编辑器无手动保存。