Pixi.js RenderTexture with Panda Camera problem

[mattg73]

Hi

 

I'm trying to use Pixi.js RenderTexture function to capture the stage image in order to ultimately apply a masked shader to it. Because I'm using a camera, tracking a player controlled sprite, I'm having problems capturing the entirety of the stage and correctly positioning the resulting texture to align with it and match the camera movements.

 

Sticking with the basic aim of capturing the stage image I'm setting up the renderTexture as follows:

 

this.renderTexture = new game.PIXI.RenderTexture(game.system.width*2, game.system.height*2);//play area is twice the width and height of the viewportthis.renderSprite = new game.Sprite(this.renderTexture);

 

I'm then adding the renderTexture sprite to a dedicated container as follows:

game.scene.colorMaskLayer.container.addChild(this.renderSprite);

During the scene's update function I'm then calling the renderTexture render function as follows:

this.renderTexture.render(game.scene.gameLayer.container);//gameLayer is a class with a container housing all the game sprites

Finally I'm positioning the renderSprite as follows:

this.renderSprite.position.set(0,0);

Separately I've set up two cameras that track a player controlled sprite. The first camera controls the positioning of the gameLayer container, the second the positioning of the colorMaskLayer container. Otherwise they're identical.

 

 

The result I get with the above is that a portion of the game area is captured equal in width and height but inset by 0.25 of the overall width and height such that only 3/4 of the captured play area is visible. It is correctly aligned with the gamelayer container however.

 

If I attempt to fix the erroneous offset by setting the renderSprite.position to (-game.system.width/2, game.system.height/2) then I still only get 3/4 of the play area captured, this time anchored to the top left but incorrectly aligned against the background ie the captured image is from the original position just shifted up and left.

 

So, my question is: is there any way to capture the entire play area using renderSprite when the play area is larger than the viewport due to panda camera(s) being used?

 

Any help or suggestions gratefully received 

 

Thanks

 

Matt