Scene Object

const scene = new Scene(opts)

Options

• options (Object, optional): An object containing various configuration options for the scene.
  • width (Number, optional): The width of the scene canvas. Default is 500.
  • height (Number, optional): The height of the scene canvas. Default is 500.
  • canvas (HTMLCanvasElement, required): The HTML canvas element to render the scene.
  • fpsMonitoringEnabled (Boolean, optional): Enable or disable FPS (Frames Per Second) monitoring. Default is false.
  • lighting (Boolean, optional): Enable or disable lighting effects. Default is false.
  • update (Function, optional): Custom update function for the scene. Default is an empty function.
  • GPUsettings (Object, optional): GPU settings for GPU acceleration.
  • physics (Boolean, optional): Enable or disable physics simulation. Default is false.
  • physicsOptions (Object, optional): Configuration options for the Matter.js physics engine.
  • start (Boolean, optional): If true, the draw method will be called immediately after the scene is created.

Properties

• width (Number): The width of the scene canvas.
• height (Number): The height of the scene canvas.
• objects (Array): An array to store objects in the scene.
• canvas (HTMLCanvasElement): The HTML canvas element used for rendering.
• ctx (CanvasRenderingContext2D): The 2D rendering context of the canvas.
• collisionMonitors (Array): An array to store collision monitoring objects.
• cameraAngle (Array): An array representing the camera angle.
• fpsBuffer (Array): An array to store FPS values for monitoring.
• fpsMonitoringEnabled (Boolean): Indicates whether FPS monitoring is enabled.
• lastFrameStamp (Number): Timestamp of the last frame rendering.
• lastPhysicsUpdate (Number): Timestamp of the last physics update.
• lighting (Boolean): Indicates whether lighting effects are enabled.
• id (String): A unique identifier for the scene.
• update (Function): The custom update function for the scene.
• lights (Array): An array to store lighting objects.
• gpu (Object): An instance of the GPU.js library for GPU acceleration.
• diffuseKernel (Kernel): GPU.js kernel for lighting calculations.
• physics (Boolean): Indicates whether physics simulation is enabled.
• Engine (Object): Matter.js Engine object for physics simulation.
• Bodies (Object): Matter.js Bodies object for creating physics bodies.
• Composite (Object): Matter.js Composite object for managing physics bodies.
• engine (Object): The Matter.js engine instance.

Methods

• addLight(light): adds a light object to the scene
• formatLights(): returns a 1D array containing all light information
• diffuseLights(ambient, fog): diffuses the lights in the scene, with ambient light ambient. fog is used for non linearization of the light source. Play around with this number
• setBoundaries(rightBound, bottomBound, activate): Set the scene's boundaries. Only active if activate is true (default)
• disableBounds(): disables the scene's bounds
• activateBounds(): activates the scene's bounds
• addObject(object): adds object to the scene (object must be of type GameObject
• clear(): clears the scene
• draw(clear, ambient, fog): draws the scene. Only clears the previous frame if clear is true (defualt). If in options start is set to false, call draw() to start the rendering. ambient and fog are passed to diffuseLights if lighting is set to true in options
• removeObject(object): removes specified object from the scene (object must be of type GameObject)
• enableCollisionsBetween(object1, object2, onFunction, offFunction): enables collisions between two objects in the scene (object1 and object2). onFunction fires once when the objects collide, offFunction fires once when the objects stop colliding
• bindCamera(object): binds the scene's camera to object's position (object must be a GameObject)
• unbindCamera(): unbinds the camera from previously bound object
• cameraTo(object): moves the camera to object's position. To keep it there every frame, use bindCamera
• moveCamera(vector): moves the camera according to vector
• enableFPS(): enables FPS counter on top left of canvas
• disableFPS(): disables FPS counter on top left of canvas

Example Usage

const sceneOptions = {
  width: 800,
  height: 600,
  canvas: document.getElementById("sceneCanvas"),
  fpsMonitoringEnabled: true,
  lighting: true,
  update: customUpdateFunction,
  GPUsettings: { mode: 'gpu' },
  physics: true,
  physicsOptions: { gravity: { x: 0, y: 1 } },
  start: true,
};

const myScene = new Scene(sceneOptions);