Flare-JS
Javascript ES6 runtime with Canvas rendering.
CanvasKit vs Canvas
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:
- Create a
canvas
element in HTML - Instantiate and initialize the
Graphics
object with thecanvas
reference - Start the render loop with
window.requestAnimationFrame()
- Load the an Actor from file with
Flare.ActorLoader.load(fileLocation, callback)
- Initialize and instantiate the
Actor
- that will initialize theActorArtboard
s for the loaded Flare file:- First
Actor.initialize()
- then
actor.makeInstance()
- First
- Create a new
AnimationInstance(actor, animation)
- Advance the
AnimationInstance
within thewindow.requestAnimationFrame
callback:- increase its time value with the provided setter
animationInstance.time
- then apply it with
animationInstance.apply()
- increase its time value with the provided setter
- Advance the actor:
actor.advance(elapsed)
Running the Example
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.
example.html
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 <script>
tag will have implement the onLoad()
callback for the body
HTML Element: a FlareExample
object is initialized with the canvas
reference, and passed a callback function that'll load the Flare file from disk - flareExample.load(filename, callback)
.
example.js
This js
file creates a FlareExample
object.
Its constructor initialized the Graphics
object, starts the rendering loop and calls-back to the script.
The callback, in the HTML file will call FlareExample.load(filename)
to load the file from disk. Once Flare.ActorLoader
is done, its load callback will finish setting up the actor within the Example via FlareExample.setActor()
.
FlareExample.setActor
will perform the initialization and instantiation of the Artboards, and the Animation.
The render loop - that is FlareExample.advance()
can now advance the Actor, the Animation and lastly draw to canvas via FlareExample.Draw()
.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request.
License
See the LICENSE file for license rights and limitations (MIT).