Scene

The Scene class represents the 2D or 3D scene that will be responsible for storing and rendering all the components.

What is a scene ?

A scene is a class that extends the FScene core class. It represents a 2D or 3D environment where you can add components, cameras, lights, and more.

Its main purpose is to initialize the technical environment for your game, aswell as managing the lifecycle of the components and render them on the screen.

Creating a scene

Creating a scene involves a few steps :

• Import the FScene class from the @fibbojs/3d or @fibbojs/2d library.
• Create a new instance of the FScene class.
• Calling the init method to initialize the scene.
• (optional) Calling the initPhysics method to initialize the physics engine.

So every Fibbo application should start with something like this :

2d

import { FScene } from '@fibbojs/2d'

// As the `init` and `initPhysics` methods are asynchronous, we need to use an async function.
// Not required if your environment supports top-level await.
(async () => {
  const scene = new FScene()
  await scene.init()
  await scene.initPhysics()
})()

3d

import { FScene } from '@fibbojs/3d'

// As the `initPhysics` methods is asynchronous, we need to use an async function.
// Not required if your environment supports top-level await.
(async () => {
  const scene = new FScene()
  scene.init()
  await scene.initPhysics()
})()

Options

The FScene class accepts several options that you can pass to the constructor :

Option	Type	Description
gravity	{ x: number, y: number, z: number } or { x: number, y: number }	The gravity of the scene if you are using the physics engine.
domNode	HTMLElement	The DOM node where the scene will be rendered.
autoLoop	boolean	Whether the scene should automatically be rendered every frame. Note that if you set this to false, you will have to call the frame method manually.

Methods

removeComponent

The removeComponent method allows you to remove a given component from the scene.

scene.removeComponent(component)

Hooks

The Scene class exposes hooks that you can use to interact with the scene and its components. This feature took inspiration from the Vue Lifecycle Hooks system, but it is still very experimental.

Here is a list of the available hooks :

• onReady : Called when the scene is ready to be used.
• onFrame : Called every frame by the scene. Delta time is passed as an argument.
• onComponentAdded : Called when a component is added to the scene.
• onComponentRemoved : Called when a component is removed from the scene.
• onLightAdded : Called when a light is added to the scene.
• onLightRemoved : Called when a light is removed from the scene.

scene.onReady(() => {
  // Do something when the scene is ready
})
scene.onFrame((delta) => {
  // Do something on the scene every frame
})
scene.onComponentAdded((component: FComponent) => {
  // Do something on a component added to the scene
})
scene.onComponentRemoved((component: FComponent) => {
  // Do something on a component removed from the scene
})
scene.onLightAdded((light: FLight) => {
  // Do something on a light added to the scene
})
scene.onLightRemoved((light: FLight) => {
  // Do something on a light removed from the scene
})