Pixi.js: It is not possible to crop a RenderTexture

Created on 5 Nov 2014  Â·  9Comments  Â·  Source: pixijs/pixi.js

new PIXI.Texture(rendertexture, new PIXI.Rectangle(0,0,100,100));
and
new PIXI.Texture(rendertexture.baseTexture, new PIXI.Rectangle(0,0,100,100));

both return a blank texture. I tried and the RenderTextures can be placed through a sprite on the canvas just fine. But trying to crop them with Texture() doesnt work at all.

Ive been on this for more than i'd like to admit, i didnt find a single way around this, even with the 1000 Pixi functions had (.trim, .crop, .setframe(), .frame, etc,..)

the only hack i found is
var texture = PIXI.Texture.fromCanvas(rendertexture.getCanvas());
But that doesnt work either since it tints the image full #fff white.

Am i missing something? Could someone else try to clip a renderTexture?

Thanks in Advance!

🕷 Bug

All 9 comments

Hi there, funnily enough I had this same problem today! Heres how i ended up doing it:

var renderTexture = new PIXI.RenderTexture(400, 400);

var subTexture = new PIXI.Texture(renderTexture, new PIXI.Rectangle(50, 50, 50, 50))

var mySprite = new PIXI.Sprite(subTexture);

let me know if that works for ya!

That is exactly what i've been trying to do with no success. Since it seems to work for you, i'll give it another try in an isolated project. Thanks for the reply and for giving me hope, i will report back.

Also if that does not work try calling subTexture._updateUvs(); after setting the frame...

On Nov 6, 2014 3:59 AM, "Mat Groves" [email protected] wrote:

Also if that does not work try calling subTexture._updateUvs(); after
setting the frame...

—
Reply to this email directly or view it on GitHub.

okay so heres my code snippet:


var tempContainer = new PIXI.DisplayObjectContainer();
tempContainer.addChild(new PIXI.Sprite(s_pile));
tempContainer.addChild(new PIXI.Sprite(crossbones));
var renderTexture = new PIXI.RenderTexture(400, 400);

mapLayer.addChild(new PIXI.Sprite(s_pile)); <------ WORKS
mapLayer.addChild(new PIXI.Sprite(renderTexture)); <------ WORKS

renderTexture.render(tempContainer, MATRIX_NEUTRAL);
mapLayer.addChild(new PIXI.Sprite(renderTexture)); <------ WORKS

var subTexture = new PIXI.Texture(renderTexture, new PIXI.Rectangle(0, 0, 100, 100))

var mySprite = new PIXI.Sprite(subTexture);

mapLayer.addChild(mySprite); <------ THIS WILL BE AN EMPTY SPRITE


However adding:
subTexture._updateUvs();
after
var subTexture = new PIXI.Texture(renderTexture, new PIXI.Rectangle(0, 0, 100, 100))

worked and it now ouputs a sprite.

The _updateUvs() felt a bit unintuitive, i wonder if there is any gain from not beeing updated automatically in the texture constructor? Anyways, thank you so much, i feel relieved.

On Nov 6, 2014 4:19 AM, "GenericString" [email protected] wrote:

okay so heres my code snippet:


var tempContainer = new PIXI.DisplayObjectContainer();
tempContainer.addChild(new PIXI.Sprite(s_pile));
tempContainer.addChild(new PIXI.Sprite(crossbones));

var renderTexture = new PIXI.RenderTexture(400, 400);

//mapLayer.addChild(new PIXI.Sprite(s_pile)); <------ WORKS
//mapLayer.addChild(new PIXI.Sprite(renderTexture)); <------ WORKS

renderTexture.render(tempContainer, MATRIX_NEUTRAL);
//mapLayer.addChild(new PIXI.Sprite(renderTexture)); <------ WORKS

var subTexture = new PIXI.Texture(renderTexture, new PIXI.Rectangle(0, 0,
100, 100))

var mySprite = new PIXI.Sprite(subTexture);

mapLayer.addChild(mySprite); <------ THIS WILL BE AN EMPTY SPRITE


However adding:
subTexture._updateUvs();

after
var subTexture = new PIXI.Texture(renderTexture, new PIXI.Rectangle(0, 0,
100, 100))

worked and it now ouputs a sprite.

The _updateUvs() felt a bit unintuitive, i wonder if there is any gain
from not beeing updated automatically in the texture constructor? Anyways,
thank you so much, i feel relieved.

—
Reply to this email directly or view it on GitHub.

yeah totally agree! Will keep this open until its sorted.

Just fixed this in v3. Got there in the end :)

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

KagiJPN picture KagiJPN  Â·  24Comments

confile picture confile  Â·  25Comments

ppoliani picture ppoliani  Â·  24Comments

bigtimebuddy picture bigtimebuddy  Â·  24Comments

trusktr picture trusktr  Â·  30Comments