pixijs / layers

Separate the z-hierarchy of your scene tree from its canonical structure.
https://pixijs.io/layers/docs/
MIT License
222 stars 57 forks source link

rendering stage snap got weird cropped reverse bitmap ? #28

Closed jonlepage closed 6 years ago

jonlepage commented 6 years ago

Am not sure if it come from the last update of module pixi-display or the pixi-light with normal. But now if i try snap rendering the Stage, I got a strange mirror bitmap cropped and not the full stage rendering !?

the current stage i try to snap image

it look weird and coped like this ! image

    function snapMap(options) {
        const fs = require('fs');
        const pathName = `img/parallaxes/${$dataMap.parallaxName}.png`;
        const snap = Bitmap.snap2(Scene);
        const urlData = snap._canvas.toDataURL();
        const base64Data = urlData.replace(/^data:image\/png;base64,/, "");
        fs.writeFile(pathName, base64Data, 'base64', function(error){
            if (error !== undefined && error !== null) {  console.error('An error occured while saving the screenshot', error); } 
        });

   };

   Bitmap.snap2 = function(stage) {
    var width =  $dataMap.width*48;
    var height = $dataMap.height*48;
    var bitmap = new Bitmap(width, height);
    var context = bitmap._context;
    var renderTexture = PIXI.RenderTexture.create(width, height);
    if (stage) {
        Renderer.render(stage, renderTexture);
        stage.worldTransform.identity();
        var canvas = null;
        if (Graphics.isWebGL()) {
            canvas = Renderer.extract.canvas(renderTexture);
        } else {
            canvas = renderTexture.baseTexture._canvasRenderTarget.canvas;
        }
        context.drawImage(canvas, 0, 0);
    } else {

    }
    renderTexture.destroy({ destroyBase: true });
    bitmap._setDirty();
    return bitmap;
};

am trying add multi options rendering image

is it come from me , or it maybe a bug inside one of two pixi module ?

ivanpopelyshev commented 6 years ago

pixi-display getRenderTexture() works only for the same size as the screen. Sorry, no snap for you, I might fix that later.

jonlepage commented 6 years ago

ok i understand, I was afraid that i make a mistake somewhere, it's reassuring. Thank you for the answer.

jonlepage commented 6 years ago

@ivanpopelyshev did you have new for this , I just met again this problem, trying to add a filters in the Parent Stage. I don't know if it related to the getRenderTexture() as your say upper.

ex: Stage._filters = [new PIXI.filters.BlurFilter(10,10) ]; Am trying to add special FX between scene transfer, like a fade inOut with blur. But all elements get reversed , it very weird, any idea the origin of this ? it not urgent, but i want find the tricks. :) thanks

jonlepage commented 6 years ago

example image

jonlepage commented 6 years ago

i think it solved, i need to build a Cage inside the Stage Scene. It this cage will apply filters and snap

function Scene_Loader(loaderSets,callBackScene,firstTime) {
    this.initialize.apply(this, arguments);
}

Scene_Loader.prototype = Object.create(Scene_Base.prototype);
Scene_Loader.prototype.constructor = Scene_Loader;

Scene_Loader.prototype.initialize = function(loaderSets,callBackScene,firstTime) {
    Scene_Base.prototype.initialize.call(this);

    // Alway use a children cage in stage for apply filters
    this.CAGE = new PIXI.Container();
    this.addChild(this.CAGE);

};
ivanpopelyshev commented 6 years ago

I'm happy with your progress, my padawan!