Class SceneAbstract

Constructors

constructor

Methods

add compose render

Constructors

constructor

  • new Scene(__namedParameters?): Scene

  • Parameters

    • __namedParameters: {
          canvas?: string | Canvas | HTMLCanvasElement;
          userConfig?: {
              animation: {
                  blocking: boolean;
                  durationMs: number;
                  easing: ((x) => number);
                  numberOfTimes: number;
                  repeat: boolean;
                  reverse: boolean;
                  yoyo: boolean;
              };
              arrowTipSize: number;
              canvasHeight: number;
              canvasInstance: undefined | Canvas;
              canvasPadding: number;
              canvasWidth: number;
              lineWidth: number;
              renderer: "html" | "rough";
              responsiveResize: boolean;
              showFps: boolean;
              standoff: number;
              text: {
                  size: number;
              };
              xTicks: number;
              yTicks: number;
          };
      } = ...
      • Optional canvas?: string | Canvas | HTMLCanvasElement
      • Optional userConfig?: {
            animation: {
                blocking: boolean;
                durationMs: number;
                easing: ((x) => number);
                numberOfTimes: number;
                repeat: boolean;
                reverse: boolean;
                yoyo: boolean;
            };
            arrowTipSize: number;
            canvasHeight: number;
            canvasInstance: undefined | Canvas;
            canvasPadding: number;
            canvasWidth: number;
            lineWidth: number;
            renderer: "html" | "rough";
            responsiveResize: boolean;
            showFps: boolean;
            standoff: number;
            text: {
                size: number;
            };
            xTicks: number;
            yTicks: number;
        }
        • animation: {
              blocking: boolean;
              durationMs: number;
              easing: ((x) => number);
              numberOfTimes: number;
              repeat: boolean;
              reverse: boolean;
              yoyo: boolean;
          }
          • blocking: boolean
          • durationMs: number
          • easing: ((x) => number)
              • (x): number

              • Parameters

                • x: number

                Returns number

          • numberOfTimes: number
          • repeat: boolean
          • reverse: boolean
          • yoyo: boolean
        • arrowTipSize: number
        • canvasHeight: number
        • canvasInstance: undefined | Canvas
        • canvasPadding: number
        • canvasWidth: number
        • lineWidth: number
        • renderer: "html" | "rough"
        • responsiveResize: boolean
        • showFps: boolean
        • standoff: number
        • text: {
              size: number;
          }
          • size: number
        • xTicks: number
        • yTicks: number

    Returns Scene

Methods

add

  • add<T>(shape): T

  • Add a shape to the scene

    Type Parameters

    Parameters

    • shape: T

      the shape to add

    Returns T

    the shape that was added

    Example

    class TestScene {
        compose() {
            const square = this.add(new Square())
        }
    }
  • add<T>(animation): T

  • Add an animation to the scene (to be played)

    Type Parameters

    Parameters

    • animation: T

    Returns T

    the animation that was added

    Example

    class TestScene {
        compose() {
            const square = this.add(new Square())
            // Adds the animation
            this.add(new FadeIn(square));
        }
    }
  • add(animation): Animation

  • Adds a function to be executed on each tick

    Parameters

    • animation: ((pctComplete, starting) => void)
        • (pctComplete, starting): void

        • Parameters

          • pctComplete: number
          • starting: boolean

          Returns void

    Returns Animation

  • add(...els): SceneElement[]

  • Adds a mixture of shapes, animations, and functions to the scene

    Parameters

    • Rest ...els: SceneElement[]

      the elements to add to the scene

    Returns SceneElement[]

    an array containing the elements that were added

Abstract compose

  • compose(): void

  • Method implemented by subclasses to compose the scene. This is where shapes and animations are added to the scene

    Returns void

    Example

    class TestScene {
        compose() {
            // Add in all your shapes and animations here. For example, adding a square and fading it in
            const square = this.add(new Square())
            // Fade in the square
            this.add(new FadeIn(square));
        }
    }

render

  • render(): void

  • Renders the scene. If animations are involved, the scene will continue to render until all animations are complete (using requestAnimationFrame)

    Returns void

Settings

Member Visibility

Theme

On This Page

constructoraddcomposerender