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

[Shan]

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(){

//alert()
    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 

 

[ZachSaucier]

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.

[OSUblake]

You need to step through it frame by frame. Look at my processImage function in app.js.

http://plnkr.co/edit/oZjPbgo9hvqwUYEV7RLi?p=preview&preview