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 相关包
This commit is contained in:
YHH
GitHub
162
packages/platform-web/src/runtime.ts
Normal file
162
packages/platform-web/src/runtime.ts
Normal file
@@ -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
|
||||
};
|
||||
77
packages/platform-web/src/systems/Canvas2DRenderSystem.ts
Normal file
77
packages/platform-web/src/systems/Canvas2DRenderSystem.ts
Normal file
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user