Components

Components are data attached to entities. In ESEngine, you define components in code and attach them to entities in the scene editor.

Builtin Components

Builtin components are always available in the editor. They are backed by the C++ backend.

LocalTransform

Position, rotation, and scale of an entity.

Property	Type	Description
position	Vec3	World position { x, y, z }
rotation	Quat	Quaternion { w, x, y, z }
scale	Vec3	Scale factor { x, y, z }

Sprite

2D sprite rendering. Requires LocalTransform to be visible. See Sprite guide for full details.

Camera

View settings. At least one active camera is required to see anything. The editor’s default scene includes one.

Property	Type	Description
projectionType	number	0 = Perspective, 1 = Orthographic
fov	number	Field of view in degrees (perspective only)
orthoSize	number	Half-height in world units (orthographic only)
nearPlane	number	Near clipping plane
farPlane	number	Far clipping plane
isActive	boolean	Whether this camera is used for rendering
aspectRatio	number	Camera aspect ratio
priority	number	Render order — lower priority renders first, higher renders on top
viewportX	number	Viewport left edge (0–1). Default: 0
viewportY	number	Viewport bottom edge (0–1). Default: 0
viewportW	number	Viewport width (0–1). Default: 1
viewportH	number	Viewport height (0–1). Default: 1
clearFlags	number	Buffer clear mode: 0=None, 1=Color, 2=Depth, 3=Both
showFrustum	boolean	Draw the camera frustum wireframe in the editor

Canvas

Display settings for the rendering surface.

Property	Type	Description
designResolution	Vec2	Design resolution { x, y }
pixelsPerUnit	number	Pixels per world unit
scaleMode	number	How the canvas scales
matchWidthOrHeight	number	Balance between width/height matching
backgroundColor	Color	Clear color RGBA

Velocity

Movement velocity.

Property	Type	Description
linear	Vec3	Linear velocity
angular	Vec3	Angular velocity

Parent / Children

Entity hierarchy for scene graphs.

Component	Property	Type	Description
Parent	entity	Entity	Parent entity ID
Children	entities	Entity[]	List of child entity IDs

SpineAnimation

Spine skeletal animation playback. Requires LocalTransform. See Spine Animation guide for full details.

BitmapText

GPU-rendered text using pre-baked bitmap font atlases (BMFont format). Requires LocalTransform. See Bitmap Text guide for full details.

Property	Type	Description
text	string	Text content
color	Color	Tint color RGBA
fontSize	number	Scale factor relative to the font’s native size
align	number	Horizontal alignment: 0=Left, 1=Center, 2=Right
spacing	number	Extra spacing between characters
layer	number	Render layer
font	number	Font handle from assets.loadBitmapFont()

Text

UI text rendering. Works with UIRect and Sprite to display text. See UI & Text guide for full details.

Property	Type	Description
content	string	Text content
fontFamily	string	Font family
fontSize	number	Font size in pixels
color	Color	Text color RGBA
align	TextAlign	Horizontal alignment
verticalAlign	TextVerticalAlign	Vertical alignment

UIRect

UI layout rectangle. Defines size, anchor, and pivot for UI elements.

Property	Type	Description
size	Vec2	Width and height
anchor	Vec2	Anchor point (0–1)
pivot	Vec2	Pivot point for rotation

UIMask

Clips child entities to the parent’s UIRect bounds. Requires UIRect and LocalTransform on the same entity. See UI & Text guide for details.

Property	Type	Default	Description
enabled	boolean	true	Whether clipping is active

Name

A string identifier for the entity. Useful for finding entities by name at runtime.

Property	Type	Default	Description
value	string	''	Entity name

Physics

Physics components require the PhysicsPlugin. See Physics guide for setup and usage.

RigidBody

Physics body attached to an entity. Requires LocalTransform.

Property	Type	Default	Description
bodyType	number	2 (Dynamic)	0=Static, 1=Kinematic, 2=Dynamic
gravityScale	number	1.0	Gravity multiplier
linearDamping	number	0.0	Linear velocity damping
angularDamping	number	0.0	Angular velocity damping
fixedRotation	boolean	false	Lock rotation
bullet	boolean	false	Continuous collision detection for fast objects
enabled	boolean	true	Enable physics body

BoxCollider

Property	Type	Default	Description
halfExtents	Vec2	{x: 0.5, y: 0.5}	Half size in meters
offset	Vec2	{x: 0, y: 0}	Local offset
density	number	1.0	Mass density
friction	number	0.3	Surface friction
restitution	number	0.0	Bounciness
isSensor	boolean	false	Trigger-only (no physical response)

CircleCollider

Property	Type	Default	Description
radius	number	0.5	Circle radius in meters
offset	Vec2	{x: 0, y: 0}	Local offset
density	number	1.0	Mass density
friction	number	0.3	Surface friction
restitution	number	0.0	Bounciness
isSensor	boolean	false	Trigger-only (no physical response)

CapsuleCollider

Property	Type	Default	Description
radius	number	0.25	Capsule radius
halfHeight	number	0.5	Half height of the capsule body
offset	Vec2	{x: 0, y: 0}	Local offset
density	number	1.0	Mass density
friction	number	0.3	Surface friction
restitution	number	0.0	Bounciness
isSensor	boolean	false	Trigger-only (no physical response)

Custom Components

defineComponent

Define a data component in code. After saving, it appears in the editor’s “Add Component” menu.

import { defineComponent } from 'esengine';

export const Health = defineComponent('Health', {
    current: 100,
    max: 100
});

Then in the editor: select an entity → Add Component → Health → set values in the inspector.

Systems query entities with this component:

import { defineSystem, addSystem, Query } from 'esengine';
import { Health } from './components/Health';

addSystem(defineSystem(
    [Query(Health)],
    (query) => {
        for (const [entity, health] of query) {
            if (health.current <= 0) {
                // handle death
            }
        }
    }
));

defineTag

A tag component has no data — it’s used purely for filtering entities.

import { defineTag } from 'esengine';

export const Player = defineTag('Player');
export const Enemy = defineTag('Enemy');

Attach Player to an entity in the editor, then query it:

addSystem(defineSystem(
    [Query(LocalTransform, Player)],
    (query) => {
        for (const [entity, transform] of query) {
            // only processes entities with the Player tag
        }
    }
));

Caution

Custom components are stored in TypeScript only. Builtin components are synced with the C++ backend for rendering.

Runtime Entity Spawning

For entities created at runtime (bullets, particles, effects), use Commands:

import { addStartupSystem, defineSystem, Commands, Sprite, LocalTransform } from 'esengine';

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

Removing Components at Runtime

cmds.entity(entity).remove(Velocity);

Next Steps

• Systems — logic that operates on components
• Queries — finding entities by component