Using Ccapture.js to capture Pixi.js animation

[DonnyV]

Has anyone tried using Ccapture.js with Pixi?

I tried but it seems to just stop the animation and nothing gets captured.

I got it animating now but the .webm video is just showing black.

var renderer = PIXI.autoDetectRenderer(800, 600,{
    backgroundColor : 0x1099bb,
    view: document.getElementById("view")
});

// create the root of the scene graph
var stage = new PIXI.Container();


var style = {
    fontFamily : 'Arial',
    fontSize : '36px',
    fontStyle : 'italic',
    fontWeight : 'bold',
    fill : '#F7EDCA',
    stroke : '#4a1850',
    strokeThickness : 5,
    dropShadow : true,
    dropShadowColor : '#000000',
    dropShadowAngle : Math.PI / 6,
    dropShadowDistance : 6,
    wordWrap : false,
    wordWrapWidth : 440
};

// var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines',style);
// richText.x = 30;
// richText.y = 180;

//stage.addChild(richText);
var yincr = 0;
for (var i = 0; i < 200; i++) { 
    yincr = yincr + 40;

    var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines',style);
    richText.x = 30;
    richText.y = yincr;

    stage.addChild(richText);
}

// Create a capturer that exports a WebM video
var capturer = new CCapture({ 
    format: 'webm',
    framerate: 60,
    verbose: true
} );

capturer.start();

// start animating
animate();

function animate() {

    requestAnimationFrame(animate);

    capturer.capture(document.getElementById("view"));

    stage.position.y -= 1;

    // render the root container
    renderer.render(stage);

    if(stage.position.y == -10){
        capturer.stop();

        // default save, will download automatically a file called {name}.extension (webm/gif/tar)
        capturer.save();

        return;
    }
}

 

[xerver]

Reading directly off the canvas doesn't necessarily work in WebGL, you will often have to use the WebGL context to read the pixels (we have special code to make this easier in pixi)