YHH a1e1189f9d 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 引用
2025-12-22 10:52:54 +08:00
2023-03-14 17:33:05 +08:00
2020-12-09 02:56:09 +00:00
2025-10-27 09:29:11 +08:00

ESEngine
ESEngine

Cross-platform 2D Game Engine

npm build license stars TypeScript

English | 中文

Documentation · API Reference · Download Editor · Examples


Overview

ESEngine is a cross-platform 2D game engine built from the ground up with modern web technologies. It provides a comprehensive toolset that enables developers to focus on creating games rather than building infrastructure.

Export your games to multiple platforms including web browsers, WeChat Mini Games, and other mini-game platforms from a single codebase.

Key Features

Feature Description
ECS Architecture Data-driven Entity-Component-System pattern for flexible and cache-friendly game logic
High-Performance Rendering Rust/WebAssembly 2D renderer with automatic sprite batching and WebGL 2.0 backend
Visual Editor Cross-platform desktop editor built with Tauri for scene management and asset workflows
Modular Design Import only what you need - each feature is a standalone package
Multi-Platform Export Deploy to Web, WeChat Mini Games, and more from one codebase
Physics Integration 2D physics powered by Rapier with editor visualization
Visual Scripting Behavior trees and blueprint system for designers

Tech Stack

  • Runtime: TypeScript, Rust, WebAssembly
  • Renderer: WebGL 2.0, WGPU (planned)
  • Editor: Tauri, React, Zustand
  • Physics: Rapier2D
  • Build: pnpm, Turborepo, Rollup

License

ESEngine is free and open source under the MIT License. No royalties, no strings attached.

Installation

npm

npm install @esengine/ecs-framework

Editor

Download pre-built binaries from the Releases page (Windows, macOS).

Quick Start

import {
    Core, Scene, Entity, Component, EntitySystem,
    Matcher, Time, ECSComponent, ECSSystem
} from '@esengine/ecs-framework';

@ECSComponent('Position')
class Position extends Component {
    x = 0;
    y = 0;
}

@ECSComponent('Velocity')
class Velocity extends Component {
    dx = 0;
    dy = 0;
}

@ECSSystem('Movement')
class MovementSystem extends EntitySystem {
    constructor() {
        super(Matcher.all(Position, Velocity));
    }

    protected process(entities: readonly Entity[]): void {
        for (const entity of entities) {
            const pos = entity.getComponent(Position);
            const vel = entity.getComponent(Velocity);
            pos.x += vel.dx * Time.deltaTime;
            pos.y += vel.dy * Time.deltaTime;
        }
    }
}

// Initialize
Core.create();
const scene = new Scene();
scene.addSystem(new MovementSystem());

const player = scene.createEntity('Player');
player.addComponent(new Position());
player.addComponent(new Velocity());

Core.setScene(scene);

// Game loop
function gameLoop(currentTime: number) {
    Core.update(currentTime / 1000);
    requestAnimationFrame(gameLoop);
}
requestAnimationFrame(gameLoop);

Packages

ESEngine is organized as a monorepo with modular packages.

Core

Package Description
@esengine/ecs-framework Core ECS framework with entity management, component system, and queries
@esengine/math Vector, matrix, and mathematical utilities
@esengine/engine Rust/WASM 2D renderer
@esengine/engine-core Engine module system and lifecycle management

Runtime

Package Description
@esengine/sprite 2D sprite rendering and animation
@esengine/tilemap Tile-based map rendering
@esengine/physics-rapier2d 2D physics simulation (Rapier)
@esengine/behavior-tree Behavior tree AI system
@esengine/blueprint Visual scripting runtime
@esengine/camera Camera control and management
@esengine/audio Audio playback
@esengine/ui UI components
@esengine/material-system Material and shader system
@esengine/asset-system Asset loading and management

Editor Extensions

Package Description
@esengine/sprite-editor Sprite inspector and tools
@esengine/tilemap-editor Visual tilemap editor
@esengine/physics-rapier2d-editor Physics collider visualization
@esengine/behavior-tree-editor Visual behavior tree editor
@esengine/blueprint-editor Visual scripting editor
@esengine/material-editor Material editor

Platform

Package Description
@esengine/platform-common Platform abstraction interfaces
@esengine/platform-web Web browser runtime
@esengine/platform-wechat WeChat Mini Game runtime

Editor

The ESEngine Editor is a cross-platform desktop application built with Tauri and React.

Features

  • Scene hierarchy and entity management
  • Component inspector with custom property editors
  • Asset browser with drag-and-drop
  • Tilemap editor with paint and fill tools
  • Behavior tree visual editor
  • Blueprint visual scripting
  • Material and shader editing
  • Built-in performance profiler
  • Localization (English, Chinese)

Screenshot

ESEngine Editor

Platform Support

Platform Runtime Editor
Web Browser -
Windows -
macOS -
WeChat Mini Game In Progress -
Playable Ads Planned -
Android Planned -
iOS Planned -

Building from Source

Prerequisites

  • Node.js 18+
  • pnpm 10+
  • Rust toolchain (for WASM renderer)
  • wasm-pack

Setup

git clone https://github.com/esengine/esengine.git
cd esengine

pnpm install
pnpm build

# Optional: Build WASM renderer
pnpm build:wasm

Run Editor

cd packages/editor-app
pnpm tauri:dev

Project Structure

esengine/
├── packages/           # Engine packages (runtime, editor, platform)
├── docs/               # Documentation source
├── examples/           # Example projects
├── scripts/            # Build utilities
└── thirdparty/         # Third-party dependencies

Documentation

Community

Contributing

Contributions are welcome. Please read the contributing guidelines before submitting a pull request.

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

ESEngine is licensed under the MIT License.


Made with ❤️ by the ESEngine team

Languages
TypeScript 89.7%
Rust 4.7%
CSS 4.4%
JavaScript 0.9%
HTML 0.3%