快速上手

五分钟,零美术。做完你会有一个项目、一个画面上看得见的东西,以及一段按键就让它动起来的脚本——全部用开箱即有的东西:Blank 模板一开始只有一个相机,而图形不需要纹理就能画。

创建项目。 在启动器里点新建项目,选 Blank 起始模板,起个名字,点创建项目。编辑器会打开 assets/scenes/main.esscene——里面只有一个实体:Camera。
在画面上放个东西。 在视口里打开创建…,选 Shape。原点会出现一个白色圆形, World Outliner 里多出一个带 Transform 和 ShapeRenderer 的实体。按 F2 把它改名为 Player。

写行为。 打开 src/components.ts——Blank 模板的声明入口——把内容替换成:

import { defineBehavior, Transform } from 'esengine';

export const Player = defineBehavior('Player', {
  state: { speed: 300 },
  update(ctx, dt) {
    const x = (ctx.input.isKeyDown('ArrowRight') ? 1 : 0) - (ctx.input.isKeyDown('ArrowLeft') ? 1 : 0);
    const y = (ctx.input.isKeyDown('ArrowUp') ? 1 : 0) - (ctx.input.isKeyDown('ArrowDown') ? 1 : 0);
    if (x === 0 && y === 0) return;

    const t = ctx.get(Transform);           // 拷贝——Transform 活在引擎里
    t.position.x += x * ctx.self.speed * dt;
    t.position.y += y * ctx.self.speed * dt;
    ctx.set(Transform, t);                  // ……所以要交回去
  },
});

保存。编辑器会监视你的脚本,过一小会儿就认出这个新组件。

挂上去。 在 Outliner 里选中 Player,然后在 Details 面板点 Add Component, 选 Player。会出现一个 speed 字段,和别的字段一样可编辑——行为的 state 就是组件的数据。
运行。 按 F5,按住一个方向键。Esc 停止,场景和你离开时一模一样:运行跑在它自己的 realm 里,永远不会写回你正在编辑的场景。

刚才发生了什么

一次调用同时给了你一个组件和一个系统。 defineBehavior 把 update 钩子注册成系统, 同时返回一个组件——所以你什么都没多声明,Player 就出现在了 Add Component 里。
state 就是组件的数据,所以编辑器能编辑它。在 Details 里改 speed,下次运行就用你的数——代码和检视器是通向同一个字段的两扇门。
ctx 是这个实体对这一帧的视角——ctx.self 是本实体自己的状态,ctx.input 是键盘, dt 是距上一帧的秒数。乘以 dt 才让 300 表示每秒 300 单位,而不是每帧 300。

下一步

脚本 —— 行为、系统、声明放在哪里,以及热重载怎么认出它们。
编辑器 —— 你刚用过的工作区,完整版。
ECS 架构 —— 为什么组件是数据、系统是行为。
精灵与渲染 —— 当你准备好把圆形换成美术资源。