Skip to content

Engine Components

There are some built-in components available to be used alongside custom components when spawning and querying.

Transform

The Transform component defines location information in 2D space for an entity. When rendering entities to the screen, the transform is used for understanding the translation, rotation, and size.

ts
type Transform = Component<{
  position: Vec3;
  scale: Vec2;
  skew: Vec2;
  pivot: Vec2;
  rotation: f32
}>
  • Position: Sometimes called the translation. The x and y are used for placement, and z is used for ordering behind or in front of other entities.
  • Scale: The size of the entity - a bigger scale will result in a bigger rendered size.
  • Rotation: The amount in radians that the entity is rotated. Use deg2rad() to use degrees instead of radians.
  • Skew: Not implemented yet.
  • Pivot: Not implemented yet.

EntityId

The EntityId component is automatically attached to every spawned entity. It contains the unique numeric id of the entity, which can be used for despawning, setting labels, parenting, and more.

ts
type EntityId = Component<{ id: u64 }>

TextureRender

The TextureRender component is used during spawning to attach a specific texture image to an entity. The textureId is retrieved when loading a texture, and the visible field determinds if the texture is rendered.

ts
type TextureRender = Component<{ textureId: TextureId; visible: boolean }>

TextRender

The TextRender component is used during spawning to attach some text to an entity. Right now the text must be less than 256 bytes in size.

ts
type TextRender = Component<{
  bounds: Vec2
  fontSize: f32
  alignment: TextAlignment
  text: Text<256>
  visible: boolean
}>

Color & ColorRender

There are two components related to coloring entities. The first is Color, which take four r/g/b/a values between 0-1. The second is the ColorRender component which can also be thought of as a rectangle render. ColorRender is optional if using other render components such as TextureRender or CircleRender.

ts
type Color = Component<{ r: number, g: number, b: number, a: number }>
type ColorRender = Component<{ visible: boolean }>

CircleRender

CircleRender is for rendering a circle to the screen. The sides is used for determining how smooth the circle will look. For example, a sides of 3 would render a triangle, and 8 an octogon.

ts
type CircleRender = Component<{ sides: u32; visible: boolean }>

LocalToWorld

When querying, provides a matrix of the entity that can be used during calculations for converting vectors into different coordinate spaces. Best used with the Coords functions, such as Coords.localToWorld(...).

ts
type LocalToWorld = Component<{ matrix: Mat4 }>

Camera

ts
type Camera = Component<{
  view: Mat4
  projection: Mat4
  clearColor: Color
  viewportRatio: Viewport
  aspectRatioOverride: f32 | undefined
  renderTargetTextureId: u32 | undefined
  orthographicSize: f32
  renderOrder: i32
  isEnabled: boolean
}>