快速开始

让我们创建一个显示移动精灵的简单游戏，介绍 ESEngine 的核心概念。

创建项目

打开编辑器，点击 New Project
命名项目（如 “my-first-game”），点击 Create

编辑器会创建一个包含默认 Camera 实体的场景。
在编辑器中添加 Sprite 实体

在 Hierarchy 面板中创建新实体，添加 LocalTransform 和 Sprite 组件。设置 Sprite 尺寸为 100 x 100，选择一个颜色。

创建 src/main.ts，填入以下代码：

import {
    defineSystem,
    addSystem,
    Query,
    Res,
    Time,
    Mut,
    LocalTransform,
    Sprite,
} from 'esengine';

addSystem(defineSystem(
    [Res(Time), Query(Mut(LocalTransform), Sprite)],
    (time, query) => {
        for (const [entity, transform, sprite] of query) {
            transform.position.x = Math.sin(time.elapsed) * 100;
            transform.position.y = Math.cos(time.elapsed) * 100;
        }
    }
));

在编辑器中按 F5 预览 — 精灵做圆周运动

理解代码

组件在场景中挂载

在 ESEngine 中，实体和组件在场景编辑器中创建。你的代码不创建它们 — 而是定义系统来查询和操作场景中的实体。

第 3 步放置的精灵已经有 LocalTransform 和 Sprite 组件。第 4 步的系统通过 Query(Mut(LocalTransform), Sprite) 找到它并执行动画。

自定义组件

你可以在代码中定义自定义组件，然后在编辑器中挂到实体上：

import { defineComponent } from 'esengine';

export const Speed = defineComponent('Speed', { value: 200 });

保存后，Speed 组件会出现在编辑器的”Add Component”菜单中。将它挂到实体上，然后编写查询它的系统：

import { defineSystem, addSystem, Res, Time, Query, Mut, LocalTransform } from 'esengine';
import { Speed } from '../components/Speed';

addSystem(defineSystem(
    [Res(Time), Query(Mut(LocalTransform), Speed)],
    (time, query) => {
        for (const [entity, transform, speed] of query) {
            transform.position.x += speed.value * time.delta;
        }
    }
));

注册系统

import { addSystem, addStartupSystem, addSystemToSchedule, Schedule } from 'esengine';

addStartupSystem(system);                          // 启动时运行一次
addSystem(system);                                 // 每帧运行 (Update)
addSystemToSchedule(Schedule.FixedUpdate, system);  // 固定间隔运行

Schedule 类型

Schedule	运行时机
`Startup`	启动时运行一次
`Update`	每帧运行
`PostUpdate`	每帧 Update 之后
`FixedUpdate`	固定时间间隔运行

运行时创建实体

需要在运行时创建实体时（如子弹、粒子），使用 Commands：

addStartupSystem(defineSystem(
    [Commands()],
    (cmds) => {
        cmds.spawn()
            .insert(Sprite, { size: { x: 10, y: 10 } })
            .insert(LocalTransform, { position: { x: 0, y: 0, z: 0 } });
    }
));