Scaling down big images quality

[sta-ger]

Hello!

I have a trouble when scaling down big assets. I just have a stage contains some sprite and i'm doing:
stage.scale.x = stage.scale.y = 0.2;

https://jsfiddle.net/n67xwb5w/

As a result I have an ugly ragged image. I found a solutions for a simple canvas drawing without pixi

http://jsfiddle.net/qwDDP/

from here

http://stackoverflow.com/questions/18761404/how-to-scale-images-on-a-html5-canvas-with-better-interpolation

 

Can I achive the same smooth effect after rescaling in PIXI?

[ivan.popelyshev]

PIXI works through two contexts: 2d and webgl. WebGL cant resize images properly, unless you enable mipmapping.

Condition for mipmapping : your images must have power-of-two width and height (1024x512 or something like that)

Put "texture.baseTexture.mipmap = true;" just after you load the texture. In pixi-v4 its not required, it is set by default.

You can also use your method for scale with "var tex = PIXI.Texture.fromCanvas(myCanvas);"

[sta-ger]

Thanks a lot! Now I see that in case of WebGL it works. But what about 2d context?

"var tex = PIXI.Texture.fromCanvas(myCanvas);"

Is this an only option?

[Guigzz]

Hi!

 

Just to be sure, does this mean that in WebGL, if my asset dimensions are not powers of two i can never expect to have a nice-looking downscaling ?

[OSUblake]

You can create a texture from a base texture that is power of two in size.

var texture = new PIXI.Texture(baseTexture, new PIXI.Rectangle(0, 0, 200, 200));