Jump to content

Pixijs movieclip from native canvas animation


bones
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 months later...

@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;

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...