2d-inc / flare-js Goto Github PK

Hello,
I cant try out the example.
Ive downloaded the files and copied gl-matrix.js into the build dir but it still does not work.

Console:

Uncaught TypeError: q.cb is not a function
    at Graphics.js:73
(anonymous)	@	Graphics.js:73
setTimeout (async)		
(anonymous)	@	Graphics.js:67
Promise.then (async)		
initialize	@	Graphics.js:59
FlareExample	@	example.js:20
onLoad	@	example.html:25
onload

Currently, when I try to import FLR JSON files, they don't appear on the Artboard.

While alternatively I could just import from a binary export, the reason I'm requesting that FLR JSON formats be recognised for importability is that I may want to manipulate the FLR file via some external software after working with it in the console.

I've noticed that ColorComponents aren't updating properly in the runtime, as they are not marked dirty on their own.

So for example: a static Rectangle with a gradient fill won't change its color/opacity.
On the other hand, if the rectangle is also animating the transform, it'll be updated through the transform dirt flag.

Here's an example file: Simple.Shapes.flr.zip
Which is this file.

A solution would be to add a new function to ActorPaint

class ActorPaint extends ActorComponent 
{
[...]
	markDirty()
	{
		this._Actor.addDirt(this, ColorDirty, true);
	}
[...]
}

Which then can be called in Animation.apply() when a ColorComponent is modified.
I've tested this locally and it works.

Hi, the exemple says that there must be a build folder with Flare.min.js in it. Am I supposed to build the source folder myself? Is there no prebuilt min file?

Edit: apparently yes. Would still be cool to have a prebuilt file.

I want to use FlareJS wrapped in Cordova and have it rendered in mobile WebView. I have example working in normal browser, but when I run it in WebView (tried UIWebView and WKWebView) it fails with

abort("Assertion failed: no binaryen method succeeded."). Build with -s ASSERTIONS=1 for more info.

Is there something I am missing? Have you tried this?
navigator.userAgent from WebView is:
Mozilla/5.0 (iPhone; CPU iPhone OS 13_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Thank you for response.

Testing https://github.com/2d-inc/Flare-Flutter/tree/master/example/simple/assets I found that most of them are not supported, rendering only a white shadow or nothing at all with following error on console.

example.js:181 Uncaught TypeError: Cannot read property 'initialize' of null
    at FlareExample.setActor (example.js:181)
    at example.js:155
    at _LoadNestedAssets (ActorLoader.js:653)
    at _ReadActor (ActorLoader.js:735)
    at FileReader.fileReader.onload (ActorLoader.js:1438)

Under https://github.com/2d-inc/Flare-JS#running-the-example

node_modules/gl-matrix-dist
should be
node_modules/gl-matrix/dist

Flowing the readme.md,but can't run.There is a error in console:

I am working on a project created with create-react-app and would like to embed Flare animation. I am stuck because looking at the example, to initialize Graphics object, I have to supply a build folder

this._Graphics.initialize("../build/", handler);

I don't think webpack will understand this. Is there another way to initialize or an example to use JS framework like React, Angular with Flare?

Good day sir. I am a graphic designer and i am interested in designing a logo for your good project. I will be doing it as a gift for free. I just need your permission first before I begin my design. Hoping for your positive feedback. Thanks

I did some combing through the code and it doesn't seem to be possible to load an actor server side. Everything depends on Graphics and a canvas of some kind. I want to be able to instantiate the runtime server side without a canvas. Then I can trigger animations and get the bones x, y and rotation and send to my clients. I have achieved this pretty easily using spine-core, but we like the actual animation tooling better in Rive. Am I missing something, or is this a fork and a massive rewrite?

Thanks!

I'm curious about your context2d implementation of Flare.js, through the context2d branch is deprecated in README. I wonder where I can find the context2d version.

i think bundle size is enormous comparing it to lottie for example
https://bundlephobia.com/[email protected]
https://bundlephobia.com/[email protected]

Similar to issue #12 I am getting the following error when trying to run the example:

BinaryReader.js:53 Uncaught RangeError: Offset is outside the bounds of the DataView
    at DataView.getFloat32 (<anonymous>)
    at BinaryReader.readFloat32Array (BinaryReader.js:53)
    at _ReadActorPath (ActorLoader.js:1304)
    at _ReadComponentsBlock (ActorLoader.js:189)
    at _ReadActorArtboard (ActorLoader.js:754)
    at _ReadArtboardsBlock (ActorLoader.js:683)
    at _ReadActor (ActorLoader.js:715)
    at FileReader.fileReader.onload (ActorLoader.js:1437)

The updated CanvasKit didn't seem to do the trick for me.

Hello, I'm currently working with an animation exporting from Rive app.

The export is in Json flr format. I was recommended to use a 2d-inc runtime engine to run my animation using Javascript.

I have clone the repo and installed required npm dependencies. I can get the example animation to work fine. When I try to use the same code from js and html changing the flr file. My animation doesn't appear. I've checked the console and file loaded correct. The issue is that the js and html data is not the same.

Where can I find documentation on how to setup the html and js code to work with my exported flr animation from Rive?

Thanks

below line giving error from flare.min.js

makeImageShader(image) {
	return image.makeShader(CanvasKit.TileMode.Clamp, CanvasKit.TileMode.Clamp);
}

I had implemented code as like given in doc but Problem is that, jacko.flr which was given in demo and my own .flr file not working

Provide me solution or suggestion ASAP

Is it possible or are there plans to make this runnable in a WebWorker?

Currently I can almost get a3a8bc0 running in a web worker but it has a dependency on document.createElementNS which is not available in a WebWorker.

I'm unsure about the CanvasKit version because I don't know where the canvas-kit.js dependency is coming from.

I had a look at the React version to see if I could find any hints, but no luck.

I'm using Vue with WebPack, but I can't seem to get Graphics to initialize.

Here is a sample script of how I'm handling things:

import {Graphics} from '@2dimensions/flare-js';

// fixes the "ReferenceError: CanvasKitInit is not defined" error
window.CanvasKitInit = require('@2dimensions/flare-js/canvaskit/canvaskit');

export default {
  data() {
    return {
      graphics: undefined,
    };
  },
  mounted() {
    const canvas = this.$refs.canvas;
    if (canvas) {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      this.graphics = new Graphics(canvas);
      this.graphics.initialize(() => {
        console.log('Initialized!!');
      });
    }
  },
};

Here are the various logs, warnings, errors:

canvaskit.js?8997:60 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

falling back to ArrayBuffer instantiation

canvaskit.js?8997:59 failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

Uncaught (in promise) abort({}). Build with -s ASSERTIONS=1 for more info.

Uncaught (in promise) CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

Image as well to cross reference:

Appreciate any help anyone has!

The minified bundle size is very large (a whopping 8.5Mb non-gzipped), which makes its inclusion on the web a hard sell. Eye-balling the Flare.min.js, it looks like the embedded canvaskit wasm is a large part of this bundle size.

Any tips on cutting this down beyond the basics? This gzips to like 3.5Mb, but that's still a ton of javascript.

Is JS version no longer maintained ?
What should JS do now with the. Fly end file ?

I'm amazed by the tool and I'm very excited to use the tool in my entire life, lol!

Is there any tutorial on how we can use animations on a website? Well, here Flare.min.js has 9mb, and in www.2dimensions.com there are no files of this size.

Do you have a way to give me? : D

Please update the above mentioned link

I used my a JSON exported .flr file in my react app, however it throws me the following error:

Module parse failed: Unexpected token (2:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| {
> 	"version": 24,
| 	"artboards": [
| 		{

• I tried it with Binary file as well and it threw a Unexpected character '' (1:2) error.
• I also tried it with a .flr2d file and got the same error as above

Here is how I imported my file, just in case.

import lightAnimation from '../light_2.flr'
  ...
    ...
      <FlareComponent width="100" height="100" animationName="green" file={lightSaberAnimation} />
  ...
...

Hi, thank you for creating such a cool tool like Flare!

However, I found the way of using it, at least currently, with javascript is very far from the standard.

In my opinion, being able to install Flare as npm dependency(like the below) is neccessary.

npm install flare

Then developers could use it with well defined, clean API like this.

<script>
  import Flare from 'flare'

  const flareObject = new Flare({
    target: "#canvas-id",
    file: "example.flr",
    width: 128, // default to full parent width if unspecified
    height: 128, // default to full parent height if unspecified
    onSomeEvent: () => { ... },
    onAnotherEvent: () => { ... }
  })
</script>
<body>
  <canvas id="canvas-id"></canvas>
</body>

If Flare provides clean vanilla js API, then community would possibly create ecosystem, like vue or angular component by themselves.

gl-matrix.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
example.js:7 Uncaught ReferenceError: vec2 is not defined
at example.js:7
at example.js:179
example.html:24 Uncaught ReferenceError: FlareExample is not defined
at onLoad (example.html:24)
at onload (example.html:60)

We create a sample animation in Rive and it works in Flutter lib but not works by JS lib. both JSON or Binary export didn't work in JS

the Binary version shows this error:
Uncaught RangeError: Offset is outside the bounds of the DataView at DataView.getFloat32 (<anonymous>) at BinaryReader.readFloat32Array (BinaryReader.js:53) at _ReadActorNode (ActorLoader.js:897) at _ReadComponentsBlock (ActorLoader.js:149) at _ReadActorArtboard (ActorLoader.js:777) at _ReadArtboardsBlock (ActorLoader.js:700) at _ReadActor (ActorLoader.js:744) at FileReader.fileReader.onload (ActorLoader.js:1483)

The JSON version shows this error:
JSONReader.js:49 Uncaught TypeError: Cannot read property '0' of undefined at JSONReader.readArray (JSONReader.js:49) at JSONReader.readFloat32Array (JSONReader.js:36) at _ReadAnimationBlock (ActorLoader.js:480) at _ReadAnimationsBlock (ActorLoader.js:527) at _ReadActorArtboard (ActorLoader.js:780) at _ReadArtboardsBlock (ActorLoader.js:700) at _ReadActor (ActorLoader.js:744) at FileReader.fileReader.onload (ActorLoader.js:1483)

Is there any solution?
Do you need the .flr file for the test?