Skip to content
Estella

Quick Start

This walks through a first moving entity: add it in the editor, then drive it with a system written in TypeScript.

  1. Create a project. In the editor, click New project, pick the Blank starter template, name it, and click Create project. You get a default scene with a Camera entity. (The Examples templates are full sample projects if you’d rather explore a finished game.)

  2. Add an entity. In the scene hierarchy, add an entity and give it a Sprite and a Transform component in the inspector.

  3. Write a system. Add a TypeScript file to your project’s scripts and register a system that moves everything with a Speed component:

    import {
        defineComponent, defineSystem, addSystem,
        Query, Mut, Res, Time, Transform
    } from 'esengine';
    

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

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

  4. Preview. Save the script — the editor watches your project’s scripts and, a moment later, extracts your component definitions, so Speed appears in the inspector’s Add Component list automatically. Add Speed to your entity, then press F5 to run the scene. The sprite moves.