Options
All
  • Public
  • Public/Protected
  • All
Menu

Geppetto Player - v1.1.1

Index

Interfaces

Type aliases

Functions

Type aliases

AnimationControls

AnimationControls: { render: () => void; destroy: any; getControlValue: any; onEvent: any; onTrackStopped: any; setControlValue: any; setLooping: any; setPanning: any; setZIndex: any; setZoom: any; startTrack: any; stopTrack: any }

Options to control the animation, start animation tracks, etc.

Type declaration

  • render: () => void

    Render a frame of the image.

      • (): void

      • Returns void

  • destroy: function
    • destroy(): void

    • Clears all memory associated to this animation.

      Returns void

  • getControlValue: function
    • getControlValue(controlName: string): number

    • Retreives current value of a control. This value will not update for each frame of an animation. It will only update at the end of each play iteration of an animation.

      Parameters

      • controlName: string

        name of the control to get value from

      Returns number

      value of the control. Take into account that each control can have different value limits, depending on the amount of step a control has.

  • onEvent: function
  • onTrackStopped: function
    • onTrackStopped(callback: TrackStoppedCallback): Unsubscribe
  • setControlValue: function
    • setControlValue(controlName: string, value: number): void

    • Manipulates a control. Will stop animations that are using this control as well.

      throws

      an error if the provided controlName does not exist

      Parameters

      • controlName: string

        name of the control to change

      • value: number

        value to set for control. Take into account that each control can have different value limits, depending on the amount of step a control has.

      Returns void

  • setLooping: function
    • setLooping(loop: boolean, trackName: string): void

    • Set the looping state of an animation track.

      The default value is based on how the animation is build.

      throws

      an error if the provided trackName does not exist

      Parameters

      • loop: boolean

        true for looping, false to stop looping.

      • trackName: string

        the name of the animation track to adjust.

      Returns void

  • setPanning: function
    • setPanning(panX: number, panY: number): void
  • setZIndex: function
    • setZIndex(zIndex: number): void

    • Parameters

      • zIndex: number

      Returns void

  • setZoom: function
    • setZoom(zoom: number): void
  • startTrack: function
    • startTrack(trackName: string, options?: PlayOptions): void

    • Start an animation. Conflicting animations will be automatically stopped.

      throws

      an error if the provided trackName does not exist

      Parameters

      • trackName: string

        the name of the animation track to start. If the name is not valid, an exception will be thrown indicating what animation names are available.

      • Optional options: PlayOptions

      Returns void

  • stopTrack: function
    • stopTrack(trackName: string): void

    • Stop an animation.

      Parameters

      • trackName: string

        the name of the animation track to start. If the name is not valid, an exception will be thrown indicating what animation names are available.

      Returns void

GeppettoPlayer

GeppettoPlayer: { destroy: () => void; render: () => void; addAnimation: any }

A player to add Gepetto animations to.

Type declaration

  • destroy: () => void

    Destroys all animations added to this player.

      • (): void

      • Returns void

  • render: () => void

    Clears the canvas. Use this when you created the player with setupWebGL. If you want to control the rendering process (and the clearing of the canvas) yourself, skip the call to this method in your render cycle.

      • (): void

      • Returns void

  • addAnimation: function

    • Add a Geppetto animation to the player.

      Parameters

      • animation: PreparedImageDefinition

        an animation prepared with prepareAnimation.

      • image: HTMLImageElement

        a HTML Image element with loaded url to use as texture.

      • textureUnit: number

        The texture unit to use you can use 0 for your first animation, 1 for your second, etc.

      • Optional options: Partial<AnimationOptions>

      Returns AnimationControls

PlayOptions

PlayOptions: { speed?: number; startAt?: number }

Type declaration

  • Optional speed?: number

    Playback speed.

    default

    1.0

  • Optional startAt?: number

    Start animation at given ms.

Unsubscribe

Unsubscribe: () => void

Function to call for unsubscribing to an event listener

Type declaration

    • (): void

    • Returns void

Functions

Const createPlayer

  • Initializes a player to display in an existing WebGL Environment. Use this function to create a player if you want to have full control over the rendering process (possibly to combine with other render code).

    Parameters

    • element: HTMLCanvasElement

      the Canvas DOM element containing a WebGL Context

    Returns GeppettoPlayer

Const prepareAnimation

  • prepareAnimation(imageDefinition: ImageDefinition): PreparedImageDefinition

  • Convert the JSON based input animation file into a preprocessed list of buffers to place into WebGL

    Parameters

    • imageDefinition: ImageDefinition

    Returns PreparedImageDefinition

    PreparedAnimation

Const setupWebGL

  • Initializes the WebGL Context of a provided context. Configures the context and returns a GeppettoPlayer bound to this element.

    Use this method if you only render Geppetto Animations in your Canvas. Use createPlayer if you want your own control over the canvas configuration

    Parameters

    • element: HTMLCanvasElement

      the Canvas DOM element that is not yet initialized with a context

    Returns GeppettoPlayer

Generated using TypeDoc