Confusion with generateTexture and region argument

[Owlzy]

I'm trying to mask a photo and then capture the image.  But I don't want to capture some giant texture, just a small region around the mask. Here's a gif which shows the issue quite clearly (excuse the creepy face from this is not a person!). 

 

This is the callback for the complete button

    _onComplete() {
        // reset visibility
        this._scaleSlider.visible = false;
        this._scalePanel.visible = false;
        this._photo.visible = false;
        this._photoPreview.alpha = 1;

        // capture masked photo
        const bounds = this._captureLayer.getLocalBounds(null, true);
        const bounds2 = this._photoMask.getLocalBounds(null, true);

        const maskedTexture = ENG.view.renderer.generateTexture(this._captureLayer, PIXI.SCALE_MODES.LINEAR, 1, bounds2);
        const maskedPhoto = new PIXI.Sprite(maskedTexture);
        maskedPhoto.anchor.set(0.5);
        this.addChild(maskedPhoto);

        // hide preview
        this._photoPreview.visible = false;
    }

 

I've tried just about any combination I can think of the for the region rect, including calculating the region manually.  But as the mask and photo are in the same container I was expecting to to be as easy as providing the mask bounds instead of the containers bounds. What am I missing here? 

I've also tried upgrading to latest dev (PixiJS 5.4.0-rc.3 ) just in case there was a bug fix I needed but that didn't help either. 

 

 

[ivan.popelyshev]

That place was always buggy, and we fixed it many times. Maybe latest-latest dev ( pixijs.download/dev/pixi.js ) doesnt have this problem.

 

Usually i recommend to do everything by hand:

1. get localBounds
2. create renderTexture of specific size

3. move your element a bit that its left-top cornet is in (0,0)

4. use "renderer.render()" on it

This place is hell for years because of how several features conflict inside, especially "transform" param of "renderer.render" function,

[Owlzy]

Ah thanks! I should have thought to just do it manually with a render texture, back in a world I understand now.  Here's the code using a RT if anyone runs into this in future.

 

    complete() {
        // reset visibility
        this._scaleSlider.visible = false;
        this._scalePanel.visible = false;
        this._photo.visible = false;
        this._photoPreview.alpha = 1;

        // create render texture
        const rt = PIXI.RenderTexture.create({width: this._photoMask.width, height: this._photoMask.height});

        // clear anchors
        this._photoPreview.anchor.set(0);
        this._photoMask.anchor.set(0);

        // offset photo to negate the anchor change
        this._photoPreview.x -= (this._photoPreview.width - this._photoMask.width) * 0.5;
        this._photoPreview.y -= (this._photoPreview.height - this._photoMask.height) * 0.5;

        ENG.view.renderer.render(this._captureLayer, rt);
        const maskedPhoto = new PIXI.Sprite(rt);
        maskedPhoto.anchor.set(0.5);
        this.addChild(maskedPhoto);

        // hide preview
        this._photoPreview.visible = false;
    }

 

Edited December 20, 2020 by Owlzy