@2dimensions/flare-js

Flare-JS

Javascript ES6 runtime with Canvas rendering.

$3

There are currently two branches: master with CanvasKit rendering (Skia via WebAssembly) and context2d with the standard CanvasRenderingContext2D. The context2d branch is deprecated.

Building

Use NPM to get the dependencies and then build with webpack:

``
npm install
npm start -- --watch
`

Flare-JS Example

There are a few steps to start rendering a Flare file:
1. Create a canvas element in HTML
2. Instantiate and initialize the Graphics object with the canvas reference
3. Start the render loop with window.requestAnimationFrame()
4. Load the an Actor from file with Flare.ActorLoader.load(fileLocation, callback)
5. Initialize and instantiate the Actor - that will initialize the ActorArtboards for the loaded Flare file:
- First Actor.initialize()
- then actor.makeInstance()
6. Create a new AnimationInstance(actor, animation)
7. Advance the AnimationInstance within the window.requestAnimationFrame callback:
- increase its time value with the provided setter animationInstance.time
- then apply it with animationInstance.apply()
8. Advance the actor: actor.advance(elapsed)

$3

The example folder contains two files, example.html and example.js, with an example implementation on how to use this runtime.

Use NPM to get the gl-matrix dependency:
`
npm install gl-matrix
`

After the installation completes, copy gl-matrix.js from node_modules/gl-matrix-dist into the repo's /build folder. (N.B. canvaskit is downloaded with this repo, and already present in the /build folder.)

At this point run a webpack build:
`
npm run dev
`

Use a local web server such as NGINX or MAMP to expose the resources.

$3

This file contains the canvas element that we need to render the Flare file. It'll also load the necessary dependencies (i.e. Flare-JS, gl-matrix, canvaskit) and the example running script example.js.

The