CocosPlugin/esengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新demo

Browse Source
This commit is contained in:
YHH
2025-10-09 17:43:46 +08:00
parent fdaa94a61d
commit e724e5a1ba
3 changed files with 62 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
examples/core-demos/src/demos/IncrementalSerializationDemo.ts
View File

@@ -2,7 +2,9 @@ import { DemoBase, DemoInfo } from './DemoBase';
import { import {
Component, Component,
ECSComponent, ECSComponent,
Entity,
EntitySystem, EntitySystem,
Matcher,
Serializable, Serializable,
Serialize, Serialize,
IncrementalSerializer IncrementalSerializer
@@ -47,19 +49,19 @@ class RenderableComponent extends Component {
// ===== 系统定义 ===== // ===== 系统定义 =====
class MovementSystem extends EntitySystem { class MovementSystem extends EntitySystem {
update() { constructor() {
if (!this.scene) return; super(Matcher.all(PositionComponent, VelocityComponent));
const entities = this.scene.entities.buffer; }
for (const entity of entities) {
const pos = entity.getComponent(PositionComponent);
const vel = entity.getComponent(VelocityComponent);
if (pos && vel) {
pos.x += vel.vx;
pos.y += vel.vy;
if (pos.x < 0 || pos.x > 1200) vel.vx *= -1; protected override process(entities: readonly Entity[]): void {
if (pos.y < 0 || pos.y > 600) vel.vy *= -1; for (const entity of entities) {
} const [pos, vel] = this.getComponents(entity, PositionComponent, VelocityComponent);
pos.x += vel.vx;
pos.y += vel.vy;
if (pos.x < 0 || pos.x > 1200) vel.vx *= -1;
if (pos.y < 0 || pos.y > 600) vel.vy *= -1;
} }
} }
} }
@@ -69,34 +71,29 @@ class RenderSystem extends EntitySystem {
private ctx: CanvasRenderingContext2D; private ctx: CanvasRenderingContext2D;
constructor(canvas: HTMLCanvasElement) { constructor(canvas: HTMLCanvasElement) {
super(); super(Matcher.all(PositionComponent, RenderableComponent));
this.canvas = canvas; this.canvas = canvas;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
if (!ctx) throw new Error('Failed to get canvas context'); if (!ctx) throw new Error('Failed to get canvas context');
this.ctx = ctx; this.ctx = ctx;
} }
update() { protected override process(entities: readonly Entity[]): void {
if (!this.scene) return;
this.ctx.fillStyle = '#0a0a15'; this.ctx.fillStyle = '#0a0a15';
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
const entities = this.scene.entities.buffer;
for (const entity of entities) { for (const entity of entities) {
const pos = entity.getComponent(PositionComponent); const [pos, render] = this.getComponents(entity, PositionComponent, RenderableComponent);
const render = entity.getComponent(RenderableComponent);
if (pos && render) {
this.ctx.fillStyle = render.color;
this.ctx.beginPath();
this.ctx.arc(pos.x, pos.y, render.radius, 0, Math.PI * 2);
this.ctx.fill();
this.ctx.fillStyle = 'white'; this.ctx.fillStyle = render.color;
this.ctx.font = '10px Arial'; this.ctx.beginPath();
this.ctx.textAlign = 'center'; this.ctx.arc(pos.x, pos.y, render.radius, 0, Math.PI * 2);
this.ctx.fillText(entity.name, pos.x, pos.y - render.radius - 5); this.ctx.fill();
}
this.ctx.fillStyle = 'white';
this.ctx.font = '10px Arial';
this.ctx.textAlign = 'center';
this.ctx.fillText(entity.name, pos.x, pos.y - render.radius - 5);
} }
} }
} }

59
examples/core-demos/src/demos/SerializationDemo.ts
View File

@@ -4,6 +4,7 @@ import {
ECSComponent, ECSComponent,
Entity, Entity,
EntitySystem, EntitySystem,
Matcher,
Serializable, Serializable,
Serialize, Serialize,
SerializeAsMap SerializeAsMap
@@ -61,19 +62,20 @@ class PlayerComponent extends Component {
// ===== 系统定义 ===== // ===== 系统定义 =====
class MovementSystem extends EntitySystem { class MovementSystem extends EntitySystem {
update() { constructor() {
const entities = this.scene.entities.buffer; super(Matcher.all(PositionComponent, VelocityComponent));
for (const entity of entities) { }
const pos = entity.getComponent(PositionComponent);
const vel = entity.getComponent(VelocityComponent);
if (pos && vel) {
pos.x += vel.vx;
pos.y += vel.vy;
// 边界反弹 protected override process(entities: readonly Entity[]): void {
if (pos.x < 0 || pos.x > 1200) vel.vx *= -1; for (const entity of entities) {
if (pos.y < 0 || pos.y > 600) vel.vy *= -1; const [pos, vel] = this.getComponents(entity, PositionComponent, VelocityComponent);
}
pos.x += vel.vx;
pos.y += vel.vy;
// 边界反弹
if (pos.x < 0 || pos.x > 1200) vel.vx *= -1;
if (pos.y < 0 || pos.y > 600) vel.vy *= -1;
} }
} }
} }
@@ -83,35 +85,32 @@ class RenderSystem extends EntitySystem {
private ctx: CanvasRenderingContext2D; private ctx: CanvasRenderingContext2D;
constructor(canvas: HTMLCanvasElement) { constructor(canvas: HTMLCanvasElement) {
super(); super(Matcher.all(PositionComponent, RenderableComponent));
this.canvas = canvas; this.canvas = canvas;
this.ctx = canvas.getContext('2d')!; this.ctx = canvas.getContext('2d')!;
} }
update() { protected override process(entities: readonly Entity[]): void {
// 清空画布 // 清空画布
this.ctx.fillStyle = '#0a0a15'; this.ctx.fillStyle = '#0a0a15';
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
// 渲染所有实体 // 渲染所有实体
const entities = this.scene.entities.buffer;
for (const entity of entities) { for (const entity of entities) {
const pos = entity.getComponent(PositionComponent); const [pos, render] = this.getComponents(entity, PositionComponent, RenderableComponent);
const render = entity.getComponent(RenderableComponent);
if (pos && render) {
this.ctx.fillStyle = render.color;
this.ctx.beginPath();
this.ctx.arc(pos.x, pos.y, render.radius, 0, Math.PI * 2);
this.ctx.fill();
// 如果是玩家，显示名字 this.ctx.fillStyle = render.color;
const player = entity.getComponent(PlayerComponent); this.ctx.beginPath();
if (player) { this.ctx.arc(pos.x, pos.y, render.radius, 0, Math.PI * 2);
this.ctx.fillStyle = 'white'; this.ctx.fill();
this.ctx.font = '12px Arial';
this.ctx.textAlign = 'center'; // 如果是玩家，显示名字
this.ctx.fillText(player.name, pos.x, pos.y - render.radius - 5); const player = entity.getComponent(PlayerComponent);
} if (player) {
this.ctx.fillStyle = 'white';
this.ctx.font = '12px Arial';
this.ctx.textAlign = 'center';
this.ctx.fillText(player.name, pos.x, pos.y - render.radius - 5);
} }
} }
} }

17
examples/core-demos/src/demos/WorkerSystemDemo.ts
View File

@@ -447,20 +447,18 @@ class RenderSystem extends EntitySystem {
private ctx: CanvasRenderingContext2D; private ctx: CanvasRenderingContext2D;
constructor(canvas: HTMLCanvasElement) { constructor(canvas: HTMLCanvasElement) {
super(Matcher.empty().all(Position, Renderable)); super(Matcher.all(Position, Renderable));
this.canvas = canvas; this.canvas = canvas;
this.ctx = canvas.getContext('2d')!; this.ctx = canvas.getContext('2d')!;
} }
protected override process(entities: Entity[]): void { protected override process(entities: readonly Entity[]): void {
this.ctx.fillStyle = '#000'; this.ctx.fillStyle = '#000';
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
for (const entity of entities) { for (const entity of entities) {
const position = entity.getComponent(Position); const position = this.requireComponent(entity, Position);
const renderable = entity.getComponent(Renderable); const renderable = this.requireComponent(entity, Renderable);
if (!position || !renderable) continue;
this.ctx.fillStyle = renderable.color; this.ctx.fillStyle = renderable.color;
this.ctx.beginPath(); this.ctx.beginPath();
@@ -473,15 +471,14 @@ class RenderSystem extends EntitySystem {
@ECSSystem('LifetimeSystem') @ECSSystem('LifetimeSystem')
class LifetimeSystem extends EntitySystem { class LifetimeSystem extends EntitySystem {
constructor() { constructor() {
super(Matcher.empty().all(Lifetime)); super(Matcher.all(Lifetime));
} }
protected override process(entities: Entity[]): void { protected override process(entities: readonly Entity[]): void {
const deltaTime = Time.deltaTime; const deltaTime = Time.deltaTime;
for (const entity of entities) { for (const entity of entities) {
const lifetime = entity.getComponent(Lifetime); const lifetime = this.requireComponent(entity, Lifetime);
if (!lifetime) continue;
lifetime.currentAge += deltaTime; lifetime.currentAge += deltaTime;
if (lifetime.isDead()) { if (lifetime.isDead()) {