Scene(​properties)

A scene object for organizing a group of objects that will update and render together.

let { Scene, Sprite } = kontra;

sprite = Sprite({
  x: 100,
  y: 200,
  width: 20,
  height: 40,
  color: 'red'
});

scene = Scene({
  id: 'game',
  children: [sprite]
});

scene.render();
import { Scene, Sprite } from 'path/to/kontra.mjs';

sprite = Sprite({
  x: 100,
  y: 200,
  width: 20,
  height: 40,
  color: 'red'
});

scene = Scene({
  id: 'game',
  children: [sprite]
});

scene.render();
import { Scene, Sprite } from 'kontra';

sprite = Sprite({
  x: 100,
  y: 200,
  width: 20,
  height: 40,
  color: 'red'
});

scene = Scene({
  id: 'game',
  children: [sprite]
});

scene.render();

Extends: GameObject

Scene Parameters

properties

Object. Properties of the scene.

properties.id

String. The id of the scene.

properties.name Optional

String. The name of the scene. Used by screen readers to identify each scene. Use this property to give the scene a human friendly name. Defaults to properties.id.

properties.cullObjects Optional

Boolean. If the scene should not render objects outside the camera bounds. Defaults to true.

properties.cullFunction Optional

Function. The function used to filter objects to render. Defaults to helpers.collides.

properties.onShow Optional

Function. Function called when the scene is shown.

properties.onHide Optional

Function. Function called when the scene is hidden.

Table of Contents

Scene​.camera

GameObject. The camera object which is used as the focal point for the scene. The scene will not render objects that are outside the bounds of the camera.

Additionally, the camera can be used to lookAt an object which will center the camera to that object. This allows you to zoom the scene in and out while the camera remains centered on the object.

Scene​.cullFunction

Function. Camera culling function which prevents objects outside the camera screen from rendering. Is passed as the filterFunction to the render function.

Scene​.cullObjects

Boolean. If the camera should cull objects outside the camera bounds. Not rendering objects which can't be seen greatly improves the performance.

Scene​.destroy(​)

Clean up the scene and call destroy() on all children.

Scene​.hidden

Boolean. If the scene is hidden.

Scene​.hide(​)

Hide the scene. A hidden scene will not update or render. Calls onHide if passed.

Scene​.id

String. The id of the scene.

Scene​.lookAt(​object)

Focus the camera to the object or x/y position. As the scene is scaled the focal point will keep to the position.

lookAt Parameters

object

Object. Object with x/y properties.

Scene​.name

String. The name of the scene. Used by screen readers to identify each scene. Use this property to give the scene a human friendly name.

Scene​.onHide(​)

Function called when the scene is hidden. Override this function to have the scene do something when hidden.

Scene​.onShow(​)

Function called when the scene is shown. Override this function to have the scene do something when shown.

Scene​.show(​)

Show the scene and resume update and render. Calls onShow if passed.