Pixijs movieclip from native canvas animation

[bones]

Hi, Im very green with PixiJs so excuse any ignorance - I have a few questions about how I can use pixijs to cache repeating canvas animations that are currently drawn frame by frame.
There will be many repeating animations drawn in a native canvas using bezier curves.
 
I would like to rasterize the frames of the animation to a texture and then display in Pixi in the most efficient way. In the following fiddle I am drawing the animation in the native canvas then copying to a texture to add to a pixi movieclip.
 
I have a test fiddle here:  https://jsfiddle.net/bones/dzd69cq9/
 
1. Why oh why is the above fiddle not working? It looks like it should but I must be missing magic pixi dust.
 
2. Is there anyway of capturing a region with Texture.fromCanvas() method or would I have to use an intermediate canvas sized to the minimum bounds?

3. If I capture the series of textures is their any benefit to adding all to one large texture to act as a spritesheet? Could I then display the movieclips in a ParticleContainer for a performance boost?

thanks!

[chg]

3. If I capture the series of textures is their any benefit to adding all to one large texture to act as a spritesheet? Could I then display the movieclips in a ParticleContainer for a performance boost?

Just going to respond to this bit (I'm too lazy for the rest sorry).

I believe if you are going to be a lot of these as sprites onscreen in a batch than yes their can be an advantage to packing the frames into a single texture - I believe Pixi.js doesn't put much effort into batching (this is not necessarily a bad thing, it just doesn't try to sort sprites to minimise changes to the WebGL/OpenGL state machine by sorting by attribute and using depth) so with the WebGL renderer at least you get a boost from having the renderer seeing the same texture used over a series of sprites (when the renderer "walks" the "scene graph")

I don't believe using particle container matters would that much impact on the performance, but I've not really looked at them, still I suspect that keeping the sprites using the same texture together relative to the drawing order is the main thing that matters (making them children of group would be enough, but even that shouldn't be necessary)

[bones]

I believe if you are going to be a lot of these as sprites onscreen in a batch than yes their can be an advantage to packing the frames into a single texture

 

Thanks for the reply, how do you pack them from a canvas? Do I go native canvas ->  Texture.fromCanvas() -> RenderTexture to pack all frames onto one texture, then delete the intermediate single frame texture?

[xerver]

Just draw them all to a canvas and use BaseTexture.fromCanvas.

 

Then create Texture objects with the proper frames, each using that base texture.

[bones]

Just draw them all to a canvas and use BaseTexture.fromCanvas.

 

Then create Texture objects with the proper frames, each using that base texture.

 

Nice one, simple answer

Will this give a good performance boost over individual textures?

 

Any obvious reason why my fiddle didnt work as expected? - the pixi canvas on the right should be playing a circle animating to a square too.

[rgipcole]

Bones,

Did you ever have any luck with this? I'm looking to achieve a similar effect and running into the same problem as your fiddle.

Thanks!

[ivan.popelyshev]

@bones @rgipcole

Guys, I dont know why didnt anyoone answer on that: texture is only a rectangle, while BaseTexture contains your source canvas. If you change something in the source, it will affect ALL textures. So either you create multiple canvases and do multiple fromCanvas, either (the best way!) you have to draw your frames side-by-side on one big canvas and then:

//assume that you have 10 frames of size 100x100 on canvas
var base = baseTexture.fromCanvas(canvas);
for (var i=0;i<10;i++) {
   textures.push(new Texture(base, new Rectangle( 100*i, 0, 100, 100);
}

UPD. you know that you can actually update native animation in realtime and not cache it. Just use baseTexture.dirty = true;