Jump to content
Search Community

How to control ticker? I need to export frame by frame in png

Shan test
Moderator Tag

Recommended Posts

I am using pixiplugin. Using pixi and GSAP helped me to develop video editor but i don't have any stable solution to save in webm or mp4 format.

Finally i decided to extract each frame as png and make a video from images.


gsap.ticker.add( getFrames);
function getFrames(){

    var renderTexture = PIXI.RenderTexture.create({width, height});
renderer.render(app.stage, renderTexture);
var frames= renderer.plugins.extract.image(renderTexture);

Problem is i get only 10 to 15 frames. I added alert() to check is all frame rendering. Since alert() slow down the process i get 58 to 60 frames which is correct.

I tried even gsap.ticker.fps(30); but still same result.

How to get all the frames?


If i am doing wrong way please tell me correct way to get all the frames 


Link to comment
Share on other sites

Hey Shan and welcome to the GreenSock forums.


The issue has nothing to do with GSAP's ability or usage. The issue is that if you're expecting a 60fps animation then that leaves a total of 0.0166666667 seconds per frame to not only render but also save a PNG of the state, which is a big ask if you ask me. In other words the issue is how much you're trying to cram too much into a small amount of time. Your note about how using alerts helped shows this to be the case.


It would make more sense to not use GSAP's ticker to do this sort of thing. I would try pausing the animation, using .progress() to go to a certain point of your animation, save the PNG, and then once it's saved update the progress and save it again (perhaps even using a callback of whatever is saving the image). That can let you get whatever FPS you want in the final rendering.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

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