Jump to content

Pixi.js RenderTexture with Panda Camera problem


mattg73
 Share

Recommended Posts

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

 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...