78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
|
/**
|
||
|
|
* 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();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|