feat(fairygui): FairyGUI 完整集成 (#314)

* feat(fairygui): FairyGUI ECS 集成核心架构

实现 FairyGUI 的 ECS 原生集成,完全替代旧 UI 系统:

核心类:
- GObject: UI 对象基类,支持变换、可见性、关联、齿轮
- GComponent: 容器组件,管理子对象和控制器
- GRoot: 根容器,管理焦点、弹窗、输入分发
- GGroup: 组容器,支持水平/垂直布局

抽象层:
- DisplayObject: 显示对象基类
- EventDispatcher: 事件分发
- Timer: 计时器
- Stage: 舞台,管理输入和缩放

布局系统:
- Relations: 约束关联管理
- RelationItem: 24 种关联类型

基础设施:
- Controller: 状态控制器
- Transition: 过渡动画
- ScrollPane: 滚动面板
- UIPackage: 包管理
- ByteBuffer: 二进制解析

* refactor(ui): 删除旧 UI 系统,使用 FairyGUI 替代

* feat(fairygui): 实现 UI 控件

- 添加显示类:Image、TextField、Graph
- 添加基础控件:GImage、GTextField、GGraph
- 添加交互控件:GButton、GProgressBar、GSlider
- 更新 IRenderCollector 支持 Graph 渲染
- 扩展 Controller 添加 selectedPageId
- 添加 STATE_CHANGED 事件类型

* feat(fairygui): 现代化架构重构

- 增强 EventDispatcher 支持类型安全、优先级和传播控制
- 添加 PropertyBinding 响应式属性绑定系统
- 添加 ServiceContainer 依赖注入容器
- 添加 UIConfig 全局配置系统
- 添加 UIObjectFactory 对象工厂
- 实现 RenderBridge 渲染桥接层
- 实现 Canvas2DBackend 作为默认渲染后端
- 扩展 IRenderCollector 支持更多图元类型

* feat(fairygui): 九宫格渲染和资源加载修复

- 修复 FGUIUpdateSystem 支持路径和 GUID 两种加载方式
- 修复 GTextInput 同时设置 _displayObject 和 _textField
- 实现九宫格渲染展开为 9 个子图元
- 添加 sourceWidth/sourceHeight 用于九宫格计算
- 添加 DOMTextRenderer 文本渲染层(临时方案)

* fix(fairygui): 修复 GGraph 颜色读取

* feat(fairygui): 虚拟节点 Inspector 和文本渲染支持

* fix(fairygui): 编辑器状态刷新和遗留引用修复

- 修复切换 FGUI 包后组件列表未刷新问题
- 修复切换组件后 viewport 未清理旧内容问题
- 修复虚拟节点在包加载后未刷新问题
- 重构为事件驱动架构,移除轮询机制
- 修复 @esengine/ui 遗留引用,统一使用 @esengine/fairygui

* fix: 移除 tsconfig 中的 @esengine/ui 引用
This commit is contained in:
YHH
2025-12-22 10:52:54 +08:00
committed by GitHub
parent 96b5403d14
commit a1e1189f9d
237 changed files with 30983 additions and 23563 deletions

View File

@@ -215,6 +215,31 @@ export class EngineBridge implements ITextureEngineBridge, ITextureService, IDyn
this.stats.spriteCount = count;
}
/**
* Submit mesh batch for rendering arbitrary 2D geometry.
* 提交网格批次进行任意 2D 几何体渲染。
*
* Used for rendering ellipses, polygons, and other complex shapes.
* 用于渲染椭圆、多边形和其他复杂形状。
*
* @param positions - Vertex positions [x, y, ...]
* @param uvs - Texture coordinates [u, v, ...]
* @param colors - Packed RGBA colors (one per vertex)
* @param indices - Triangle indices
* @param textureId - Texture ID (0 = white pixel)
*/
submitMeshBatch(
positions: Float32Array,
uvs: Float32Array,
colors: Uint32Array,
indices: Uint16Array,
textureId: number
): void {
if (!this.initialized || positions.length === 0) return;
this.getEngine().submitMeshBatch(positions, uvs, colors, indices, textureId);
}
/**
* Render the current frame.
* 渲染当前帧。

View File

@@ -68,6 +68,23 @@ export interface IRenderDataProvider {
getRenderData(): readonly ProviderRenderData[];
}
/**
* Mesh render data for arbitrary 2D geometry
* 任意 2D 几何体的网格渲染数据
*/
export interface MeshRenderData {
/** Vertex positions [x, y, ...] | 顶点位置 */
positions: Float32Array;
/** Texture coordinates [u, v, ...] | 纹理坐标 */
uvs: Float32Array;
/** Vertex colors (packed RGBA) | 顶点颜色 */
colors: Uint32Array;
/** Triangle indices | 三角形索引 */
indices: Uint16Array;
/** Texture ID (0 = white pixel) | 纹理 ID */
textureId: number;
}
/**
* Interface for UI render data providers
* UI 渲染数据提供者接口
@@ -78,6 +95,8 @@ export interface IRenderDataProvider {
export interface IUIRenderDataProvider extends IRenderDataProvider {
/** Get UI render data | 获取 UI 渲染数据 */
getRenderData(): readonly ProviderRenderData[];
/** Get mesh render data for complex shapes | 获取复杂形状的网格渲染数据 */
getMeshRenderData?(): readonly MeshRenderData[];
/** @deprecated Use getRenderData() instead */
getScreenSpaceRenderData?(): readonly ProviderRenderData[];
/** @deprecated World space UI is no longer supported */
@@ -538,6 +557,34 @@ export class EngineRenderSystem extends EntitySystem {
);
}
}
// Collect mesh render data for complex shapes (ellipses, polygons, etc.)
// 收集复杂形状(椭圆、多边形等)的网格渲染数据
if (this.uiRenderDataProvider.getMeshRenderData) {
const meshRenderData = this.uiRenderDataProvider.getMeshRenderData();
if (meshRenderData.length > 0) {
console.log(`[EngineRenderSystem] Submitting ${meshRenderData.length} mesh batches`);
}
for (const mesh of meshRenderData) {
if (mesh.positions.length === 0) continue;
console.log('[EngineRenderSystem] Mesh batch:', {
vertices: mesh.positions.length / 2,
indices: mesh.indices.length,
textureId: mesh.textureId
});
// Submit mesh data directly to the engine
// 直接将网格数据提交到引擎
this.bridge.submitMeshBatch(
mesh.positions,
mesh.uvs,
mesh.colors,
mesh.indices,
mesh.textureId
);
}
}
}
/**

View File

@@ -204,6 +204,11 @@ export class GameEngine {
* 添加圆形Gizmo边框。
*/
addGizmoCircle(x: number, y: number, radius: number, r: number, g: number, b: number, a: number): void;
/**
* Get the graphics backend name (e.g., "WebGL2").
* 获取图形后端名称(如 "WebGL2")。
*/
getBackendName(): string;
/**
* Get all registered viewport IDs.
* 获取所有已注册的视口ID。
@@ -272,6 +277,35 @@ export class GameEngine {
* 设置材质的vec4 uniform也用于颜色
*/
setMaterialVec4(material_id: number, name: string, x: number, y: number, z: number, w: number): boolean;
/**
* Submit mesh batch for rendering arbitrary 2D geometry.
* 提交网格批次进行任意 2D 几何体渲染。
*
* Used for rendering ellipses, polygons, and other complex shapes.
* 用于渲染椭圆、多边形和其他复杂形状。
*
* # Arguments | 参数
* * `positions` - Float32Array [x, y, ...] for each vertex
* * `uvs` - Float32Array [u, v, ...] for each vertex
* * `colors` - Uint32Array of packed RGBA colors (one per vertex)
* * `indices` - Uint16Array of triangle indices
* * `texture_id` - Texture ID to use (0 for white pixel)
*/
submitMeshBatch(positions: Float32Array, uvs: Float32Array, colors: Uint32Array, indices: Uint16Array, texture_id: number): void;
/**
* Submit MSDF text batch for rendering.
* 提交 MSDF 文本批次进行渲染。
*
* # Arguments | 参数
* * `positions` - Float32Array [x, y, ...] for each vertex (4 per glyph)
* * `tex_coords` - Float32Array [u, v, ...] for each vertex
* * `colors` - Float32Array [r, g, b, a, ...] for each vertex
* * `outline_colors` - Float32Array [r, g, b, a, ...] for each vertex
* * `outline_widths` - Float32Array [width, ...] for each vertex
* * `texture_id` - Font atlas texture ID
* * `px_range` - Pixel range for MSDF shader
*/
submitTextBatch(positions: Float32Array, tex_coords: Float32Array, colors: Float32Array, outline_colors: Float32Array, outline_widths: Float32Array, texture_id: number, px_range: number): void;
/**
* Clear all textures and reset state.
* 清除所有纹理并重置状态。
@@ -311,6 +345,11 @@ export class GameEngine {
* * `mode` - 0=Select, 1=Move, 2=Rotate, 3=Scale
*/
setTransformMode(mode: number): void;
/**
* Get the graphics backend version string.
* 获取图形后端版本字符串。
*/
getBackendVersion(): string;
/**
* Get or load texture by path.
* 按路径获取或加载纹理。
@@ -374,6 +413,11 @@ export class GameEngine {
* The texture ID for the created blank texture | 创建的空白纹理ID
*/
createBlankTexture(width: number, height: number): number;
/**
* Get maximum texture size supported by the backend.
* 获取后端支持的最大纹理尺寸。
*/
getMaxTextureSize(): number;
/**
* Load texture by path, returning texture ID.
* 按路径加载纹理返回纹理ID。
@@ -516,7 +560,10 @@ export interface InitOutput {
readonly gameengine_createMaterial: (a: number, b: number, c: number, d: number, e: number) => number;
readonly gameengine_createMaterialWithId: (a: number, b: number, c: number, d: number, e: number, f: number) => void;
readonly gameengine_fromExternal: (a: any, b: number, c: number) => [number, number, number];
readonly gameengine_getBackendName: (a: number) => [number, number];
readonly gameengine_getBackendVersion: (a: number) => [number, number];
readonly gameengine_getCamera: (a: number) => [number, number];
readonly gameengine_getMaxTextureSize: (a: number) => number;
readonly gameengine_getOrLoadTextureByPath: (a: number, b: number, c: number) => [number, number, number];
readonly gameengine_getTextureIdByPath: (a: number, b: number, c: number) => number;
readonly gameengine_getTextureLoadingCount: (a: number) => number;
@@ -558,15 +605,17 @@ export interface InitOutput {
readonly gameengine_setTransformMode: (a: number, b: number) => void;
readonly gameengine_setViewportCamera: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
readonly gameengine_setViewportConfig: (a: number, b: number, c: number, d: number, e: number) => void;
readonly gameengine_submitMeshBatch: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number) => [number, number];
readonly gameengine_submitSpriteBatch: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number) => [number, number];
readonly gameengine_submitTextBatch: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number) => [number, number];
readonly gameengine_unregisterViewport: (a: number, b: number, c: number) => void;
readonly gameengine_updateInput: (a: number) => void;
readonly gameengine_updateTextureRegion: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => [number, number];
readonly gameengine_width: (a: number) => number;
readonly gameengine_worldToScreen: (a: number, b: number, c: number) => [number, number];
readonly init: () => void;
readonly wasm_bindgen__convert__closures_____invoke__hc746ced83e8f2609: (a: number, b: number) => void;
readonly wasm_bindgen__closure__destroy__hebcd2828f83f27ed: (a: number, b: number) => void;
readonly wasm_bindgen__convert__closures_____invoke__h0cae3d4947da04cb: (a: number, b: number) => void;
readonly wasm_bindgen__closure__destroy__h0c01365f59f73f28: (a: number, b: number) => void;
readonly __wbindgen_malloc: (a: number, b: number) => number;
readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
readonly __wbindgen_exn_store: (a: number) => void;