Feature/render pipeline (#232)

* refactor(engine): 重构2D渲染管线坐标系统

* feat(engine): 完善2D渲染管线和编辑器视口功能

* feat(editor): 实现Viewport变换工具系统

* feat(editor): 优化Inspector渲染性能并修复Gizmo变换工具显示

* feat(editor): 实现Run on Device移动预览功能

* feat(editor): 添加组件属性控制和依赖关系系统

* feat(editor): 实现动画预览功能和优化SpriteAnimator编辑器

* feat(editor): 修复SpriteAnimator动画预览功能并迁移CI到pnpm

* feat(editor): 修复SpriteAnimator动画预览并迁移到pnpm

* feat(editor): 修复SpriteAnimator动画预览并迁移到pnpm

* feat(editor): 修复SpriteAnimator动画预览并迁移到pnpm

* feat(editor): 修复SpriteAnimator动画预览并迁移到pnpm

* feat(ci): 迁移项目到pnpm并修复CI构建问题

* chore: 迁移CI工作流到pnpm并添加WASM构建支持

* chore: 迁移CI工作流到pnpm并添加WASM构建支持

* chore: 迁移CI工作流到pnpm并添加WASM构建支持

* chore: 迁移CI工作流到pnpm并添加WASM构建支持

* chore: 迁移CI工作流到pnpm并添加WASM构建支持

* chore: 迁移CI工作流到pnpm并添加WASM构建支持

* chore: 移除 network 相关包

* chore: 移除 network 相关包

packages/platform-web/package.json

@@ -16,7 +16,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c && rollup -c rollup.runtime.config.js",
+    "build:runtime": "rollup -c rollup.runtime.config.js",
     "build:npm": "npm run build",
     "clean": "rimraf dist",
     "type-check": "npx tsc --noEmit",
@@ -31,8 +32,14 @@
   ],
   "author": "yhh",
   "license": "MIT",
+  "dependencies": {
+    "@esengine/ecs-framework": "workspace:*",
+    "@esengine/ecs-engine-bindgen": "workspace:*",
+    "@esengine/ecs-components": "workspace:*",
+    "@esengine/asset-system": "workspace:*"
+  },
   "peerDependencies": {
-    "@esengine/platform-common": "^1.0.0"
+    "@esengine/platform-common": "workspace:*"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.3",

packages/platform-web/rollup.runtime.config.js

@@ -0,0 +1,27 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+
+export default {
+    input: 'src/runtime.ts',
+    output: {
+        file: 'dist/runtime.browser.js',
+        format: 'iife',
+        name: 'ECSRuntime',
+        sourcemap: true,
+        globals: {},
+        exports: 'default'  // Only export the default export
+    },
+    plugins: [
+        resolve({
+            browser: true,
+            preferBuiltins: false
+        }),
+        commonjs(),
+        typescript({
+            tsconfig: './tsconfig.json',
+            declaration: false,
+            sourceMap: true
+        })
+    ]
+};

packages/platform-web/src/runtime.ts

@@ -0,0 +1,162 @@
+/**
+ * Browser Runtime Entry Point
+ * 浏览器运行时入口
+ *
+ * Uses the same Rust WASM engine as the editor
+ * 使用与编辑器相同的 Rust WASM 引擎
+ */
+
+import { Core, Scene, SceneSerializer } from '@esengine/ecs-framework';
+import { EngineBridge, EngineRenderSystem, CameraSystem } from '@esengine/ecs-engine-bindgen';
+import { TransformComponent, SpriteComponent, SpriteAnimatorComponent, SpriteAnimatorSystem, CameraComponent } from '@esengine/ecs-components';
+import { AssetManager, EngineIntegration } from '@esengine/asset-system';
+
+interface RuntimeConfig {
+    canvasId: string;
+    width?: number;
+    height?: number;
+}
+
+class BrowserRuntime {
+    private bridge: EngineBridge;
+    private cameraSystem: CameraSystem;
+    private renderSystem: EngineRenderSystem;
+    private animatorSystem: SpriteAnimatorSystem;
+    private animationId: number | null = null;
+    private assetManager: AssetManager;
+    private engineIntegration: EngineIntegration;
+
+    constructor(config: RuntimeConfig) {
+        // Initialize Core if not already created
+        if (!Core.Instance) {
+            Core.create();
+        }
+
+        // Initialize Core.scene if not already initialized
+        if (!Core.scene) {
+            const runtimeScene = new Scene({ name: 'Runtime Scene' });
+            Core.setScene(runtimeScene);
+        }
+
+        // Initialize Rust WASM engine bridge
+        this.bridge = new EngineBridge({
+            canvasId: config.canvasId,
+            width: config.width || window.innerWidth,
+            height: config.height || window.innerHeight
+        });
+
+        // Initialize asset system
+        // 初始化资产系统
+        this.assetManager = new AssetManager();
+        this.engineIntegration = new EngineIntegration(this.assetManager, this.bridge);
+
+        // Add camera system (updates before render)
+        this.cameraSystem = new CameraSystem(this.bridge);
+        Core.scene!.addSystem(this.cameraSystem);
+
+        // Add sprite animator system
+        this.animatorSystem = new SpriteAnimatorSystem();
+        Core.scene!.addSystem(this.animatorSystem);
+
+        // Add render system
+        this.renderSystem = new EngineRenderSystem(this.bridge, TransformComponent);
+        Core.scene!.addSystem(this.renderSystem);
+    }
+
+    async initialize(wasmModule: any): Promise<void> {
+        await this.bridge.initializeWithModule(wasmModule);
+
+        // Set path resolver for browser asset proxy
+        // 设置浏览器资产代理的路径解析器
+        this.bridge.setPathResolver((path: string) => {
+            // If already a URL, return as-is
+            if (path.startsWith('http://') || path.startsWith('https://') || path.startsWith('/asset?')) {
+                return path;
+            }
+            // Use asset proxy endpoint for local file paths
+            return `/asset?path=${encodeURIComponent(path)}`;
+        });
+
+        // Disable editor tools for game runtime
+        this.bridge.setShowGrid(false);
+        this.bridge.setShowGizmos(false);
+    }
+
+    async loadScene(sceneUrl: string): Promise<void> {
+        try {
+            const response = await fetch(sceneUrl);
+            const sceneJson = await response.text();
+
+            if (!Core.scene) {
+                throw new Error('Core.scene not initialized');
+            }
+
+            SceneSerializer.deserialize(Core.scene, sceneJson, {
+                strategy: 'replace',
+                preserveIds: true
+            });
+
+            // Textures are now loaded automatically by EngineRenderSystem
+            // via Rust engine's path-based texture loading
+            // 纹理现在由EngineRenderSystem通过Rust引擎的路径加载自动处理
+
+            // Auto-play animations are started by SpriteAnimatorSystem.onAdded
+            // 自动播放动画由SpriteAnimatorSystem.onAdded启动
+        } catch (error) {
+            console.error('Failed to load scene:', error);
+            throw error;
+        }
+    }
+
+    start(): void {
+        if (this.animationId !== null) return;
+
+        let lastTime = performance.now();
+        const loop = () => {
+            const currentTime = performance.now();
+            const deltaTime = (currentTime - lastTime) / 1000;
+            lastTime = currentTime;
+
+            // Update Core (includes Time.update and all scenes)
+            // Texture loading is handled automatically by EngineRenderSystem
+            Core.update(deltaTime);
+
+            this.animationId = requestAnimationFrame(loop);
+        };
+
+        loop();
+    }
+
+    stop(): void {
+        if (this.animationId !== null) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
+    }
+
+    handleResize(width: number, height: number): void {
+        this.bridge.resize(width, height);
+    }
+
+    getAssetManager(): AssetManager {
+        return this.assetManager;
+    }
+
+    getEngineIntegration(): EngineIntegration {
+        return this.engineIntegration;
+    }
+}
+
+// Export everything on a single object for IIFE bundle
+export default {
+    create: (config: RuntimeConfig) => {
+        const runtime = new BrowserRuntime(config);
+        return runtime;
+    },
+    BrowserRuntime,
+    Core,
+    TransformComponent,
+    SpriteComponent,
+    SpriteAnimatorComponent,
+    CameraComponent
+};

packages/platform-web/src/systems/Canvas2DRenderSystem.ts

@@ -0,0 +1,77 @@
+/**
+ * Canvas 2D Render System
+ * Canvas 2D 渲染系统
+ */
+
+import { EntitySystem, Matcher, ECSSystem, Core } from '@esengine/ecs-framework';
+import { TransformComponent, SpriteComponent } from '@esengine/ecs-components';
+
+@ECSSystem('Canvas2DRender', { updateOrder: 1000 })
+export class Canvas2DRenderSystem extends EntitySystem {
+    private ctx: CanvasRenderingContext2D;
+    private canvas: HTMLCanvasElement;
+    private textureCache = new Map<string, HTMLImageElement>();
+
+    constructor(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) {
+        super(Matcher.empty());
+        this.ctx = ctx;
+        this.canvas = canvas;
+    }
+
+    async loadTexture(path: string): Promise<void> {
+        if (this.textureCache.has(path)) return;
+
+        try {
+            const img = new Image();
+            img.crossOrigin = 'anonymous';
+            const urlPath = `/asset?path=${encodeURIComponent(path)}`;
+
+            await new Promise<void>((resolve, reject) => {
+                img.onload = () => resolve();
+                img.onerror = () => reject(new Error(`Failed to load: ${path}`));
+                img.src = urlPath;
+            });
+
+            this.textureCache.set(path, img);
+        } catch (error) {
+            console.warn('Texture load failed:', path, error);
+        }
+    }
+
+    update(): void {
+        this.ctx.fillStyle = '#1a1a1a';
+        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+        if (!Core.scene) return;
+
+        for (const entity of Core.scene.entities.buffer) {
+            if (!entity.enabled) continue;
+
+            const transform = entity.getComponent(TransformComponent) as TransformComponent | null;
+            const sprite = entity.getComponent(SpriteComponent) as SpriteComponent | null;
+
+            if (!transform || !sprite) continue;
+
+            this.ctx.save();
+
+            const x = (transform.position.x || 0) + this.canvas.width / 2;
+            const y = this.canvas.height / 2 - (transform.position.y || 0);
+            const width = (sprite.width || 64) * (transform.scale.x || 1);
+            const height = (sprite.height || 64) * (transform.scale.y || 1);
+            const rotation = -(transform.rotation.z || 0) * Math.PI / 180;
+
+            this.ctx.translate(x, y);
+            this.ctx.rotate(rotation);
+
+            const texture = this.textureCache.get(sprite.texture || '');
+            if (texture) {
+                this.ctx.drawImage(texture, -width / 2, -height / 2, width, height);
+            } else {
+                this.ctx.fillStyle = sprite.color || '#ffffff';
+                this.ctx.fillRect(-width / 2, -height / 2, width, height);
+            }
+
+            this.ctx.restore();
+        }
+    }
+}