Jump to content

Can pixijs frames be processed individually?


Recommended Posts

Can PixiJS be used to create an animated video on the canvas, and have each frame be processed by something like a video encoder to make a movie file of the animation?  It would be OK if it ran slow. The video encoding would also be done in JS, so PixiJS might have to pause after each frame of the animation until the video encoder was done.

Also, can PixiJS render "layers" that are stacked, for example, a background layer and a foreground layer? (like in an endless runner game)


Link to comment
Share on other sites

You could extract the frames from canvas with toDataUrl or use the extract plugin to get the actual pixel data of a single frame. Then gather all of the frames and encode them into a video with some encoder, dunno if those exist in the browser, most likely someone has made one.

You can do stacked rendering with multiple different ways.

- Have 2 containers that move with different speeds.
- Use overlapping canvases with each having their own renderer and move them.
- Have each of your object in the scene have a depth value and move everything based on that.
- Use rendertextures to create the stage and use those with tilingsprite and offset them at different speeds.

Different methods have different limitations & benefits.

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.

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.


  • Recently Browsing   0 members

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