Skip to content

Components

Components are the main building blocks of Fibbo. They are the objects that you can add to a scene, move around, rotate, and interact with.

What is a component ?

A component is a class that extends the FComponent class. It represents an object in a scene, will be rendered, updated, and interacted with.

It is mainly composed of the following attributes :

  • transform : The position, rotation, and scale of the component. It can be accessed and modified using getters and setters.
  • collider : (optional) The collider of the component, used for physics interactions.
  • rigidBody : (optional) The rigidBody of the component, used for physics interactions.
  • sensor : (optional) The sensor of the component, used for detecting and emitting collisions events.

And the following methods :

  • frame : Called every frame by the Scene to update the component.
  • onFrame : A method that takes a callback to be called every frame.
  • initCollider : Initialize the collider of the component.
  • initRigidBody : Initialize the rigidBody of the component.
  • initSensor : Initialize the sensor of the component.

Creating a component

To create a component, you can just import it and create a new instance :

typescript
import { FRectangle } from '@fibbojs/2d'

const rectangle = new FRectangle(scene)
typescript
import { FCuboid } from '@fibbojs/3d'

const cube = new FCuboid(scene)

This will create a new component, that will automatically be added to the scene you passed as an argument.

Various options can be passed to the constructor :

typescript
import { FRectangle } from '@fibbojs/2d'

const cube = new FRectangle(scene, {
  position: { x: 1, y: 2 },
  rotation: 0,
  rotationDegree: 0,
  scale: { x: 2, y: 2 },
})
typescript
import { FCuboid } from '@fibbojs/3d'

const cube = new FCuboid(scene, {
  position: { x: 1, y: 2, z: 3 },
  rotation: { x: 0, y: 0, z: 0 },
  rotationDegree: { x: 0, y: 0, z: 0 },
  scale: { x: 2, y: 2, z: 2 },
})