Adjust texture size in pixi.js v5

[Alain]

 

Any way to adjust the texture to the size of the screen in pixi.js v5. 

I want the whole texture to cover the screen.

https://codepen.io/AlainBarrios/pen/rgYNRN?editors=0010

[Exca]

You could scale the sprite.

//Calculate scale to cover whole screen area. Use min to make it so that whole image shows and covers as much as it can.
var scale = Math.max( window.innerWidth / sprite.texture.width, window.innerHeight / sprite.texture.height);
sprite.scale.set(scale,scale);
//Center the sprite
sprite.x = Math.round( ( window.innerWidth - sprite.width ) / 2);
sprite.y = Math.round( ( window.innerHeight - sprite.height ) / 2);
 

[Alain]

19 hours ago, Exca said:

You could scale the sprite.

//Calculate scale to cover whole screen area. Use min to make it so that whole image shows and covers as much as it can.
var scale = Math.max( window.innerWidth / sprite.texture.width, window.innerHeight / sprite.texture.height);
sprite.scale.set(scale,scale);
//Center the sprite
sprite.x = Math.round( ( window.innerWidth - sprite.width ) / 2);
sprite.y = Math.round( ( window.innerHeight - sprite.height ) / 2);
 

 

I've done it as you say, but the image is very stretched.

[Exca]

Hmm, if the x & y scale are the same, then the aspect should be identical to the basetexture.

There seems to be two problems that cause the issue in the example. You need to use the texture.width instead of sprite.width as the sprite.width has scale calculated into it. Second problem is with filter. Having it on makes the image strected, taking if off makes the image look proper. Not really sure what goes wrong in the shader.

[Alain]

On 5/23/2019 at 2:59 AM, Exca said:

Hmm, if the x & y scale are the same, then the aspect should be identical to the basetexture.

There seems to be two problems that cause the issue in the example. You need to use the texture.width instead of sprite.width as the sprite.width has scale calculated into it. Second problem is with filter. Having it on makes the image strected, taking if off makes the image look proper. Not really sure what goes wrong in the shader.

I have already solved