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 相关包
2025-11-23 14:49:37 +08:00
parent b15cbab313
commit a3f7cc38b1
247 changed files with 33561 additions and 52047 deletions
--- a/packages/platform-web/src/systems/Canvas2DRenderSystem.ts
+++ b/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();
+        }
+    }
+}