How to maintain the visual quality of the sprite after scaling

[caymanbruce]

I have made a demo that the sprite will scale to a bigger size on some event. However its texture gets blurry and resolution changed so the sprite looks very awful after scaling to a bigger size. 

Is there a way to scale but maintain the visual quality of the texture without changing the resolution of the texture? How about replacing the texture with a new one? This is all I can think about but I am afraid of the performance cost. I am using CanvasRenderer by the way.

[soul]

PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;

 

Set that property. Though do note this will make the DEFAULT change, so every image you load will be like this, and it might not be what you desire.

If you don't want to change the default, but only for that one texture, set it on that texture directly instead.

[caymanbruce]

1 hour ago, soul said:

PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;

 

Set that property. Though do note this will make the DEFAULT change, so every image you load will be like this, and it might not be what you desire.

If you don't want to change the default, but only for that one texture, set it on that texture directly instead.

Thanks I will try that later and let you know the result. Currently it has no effect because I am doing this inside a scaling container.

[Taz]

According to the docs for PIXI.SCALE_MODES, LINEAR is "Smoother scaling" and NEAREST is "Pixelating scaling". It's curious if scaling nearest can somehow better maintain the image quality for a big upscale. But you probably need bigger image asset for bigger sprite, if you want to maintain quality for big size increase.

[xerver]

You have to set that before loading the texture, since each texture can configure this separately. When you set that setting, you are setting the default value each texture should use.

If you have a particular image that should scale nearest, but don't want them all to, you can set it just on that one base texture:

texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;

 

[caymanbruce]

12 hours ago, Taz said:

According to the docs for PIXI.SCALE_MODES, LINEAR is "Smoother scaling" and NEAREST is "Pixelating scaling". It's curious if scaling nearest can somehow better maintain the image quality for a big upscale. But you probably need bigger image asset for bigger sprite, if you want to maintain quality for big size increase.

Thanks I generate the texture at run time. So there is no image asset.

[caymanbruce]

12 hours ago, xerver said:

You have to set that before loading the texture, since each texture can configure this separately. When you set that setting, you are setting the default value each texture should use.

If you have a particular image that should scale nearest, but don't want them all to, you can set it just on that one base texture:

texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;

 

Thanks I have tried this but all I can see is a bigger pixelated texture. What do you mean to set this before loading the texture? I don't know how to do that since I use `Sprite.from(canvasObject)` to build a sprite. I was trying to use it as `sprite.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;` but it doesn't go well.

[Taz]

Can you redraw canvasObject on window resize to maintain the image quality? This is what I do on widow resize,  after redrawing the off-screen html canvas element, to update the sprite's texture:

// destroy old texture if there is one
if (sprite.texture) {
  sprite.texture.destroy(true);
}

// create new texture from redrawn canvas element
var texture = new PIXI.Texture(new PIXI.BaseTexture(canvas, PIXI.SCALE_MODES.LINEAR, renderer.resolution));

// update sprite with new texture and dimensions
sprite.texture = texture; 
sprite.width   = texture.width;
sprite.height  = texture.height; 

 

[caymanbruce]

17 minutes ago, Taz said:

Can you redraw canvasObject on window resize to maintain the image quality? This is what I do on widow resize,  after redrawing the off-screen html canvas element, to update the sprite's texture:

if (sprite.texture) {
  sprite.texture.destroy(true);
}

sprite.texture = new PIXI.Texture(new PIXI.BaseTexture(canvas, PIXI.SCALE_MODES.LINEAR, renderer.resolution));

sprite.width  = texture.width;
sprite.height = texture.height; 

 

Do you mean to reapply the same texture to the sprite with the `new PIXI.Texture statement` when I need to scale the sprite? Also you are using

PIXI.SCALE_MODES.LINEAR

in your code. 

[Taz]

Not re-apply the same texture, instead like this: Draw a new canvas element at the new size and create a new texture from this canvas element. Then set the sprite's texture to this new texture, which will be at the new size. So there's no scaling-distortion involved. Hmm, I've been using linear for awhile since the docs say it's smoother, but I haven't actually done much testing on linear vs nearer yet.

EDIT: I said draw a new canvas element, but you can just resize, clear, and reuse the old one too.

[caymanbruce]

14 minutes ago, Taz said:

Not re-apply the same texture, instead like this: Draw a new canvas element at the new size and create a new texture from this canvas element. Then set the sprite's texture to this new texture, which will be at the new size. So there's no scaling nor distorting involved. Hmm, I've been using linear for awhile since the docs say it's smoother, but I haven't actually done much testing on linear vs nearer yet.

Ok I would just use this:

sprite.texture = PIXI.Texture.fromCanvas(canvas);

but not sure if I need to destroy the old texture or it will be dumped automatically. Using this technique I need to be very careful with the alignment of elements inside the resized texture. I have also found that even if I use a bigger size texture I still need to scale the sprite a little. Maybe I didn't calculate the new size very properly.

[Taz]

Yeah fromCanvas should work too. But they did (do?) cache differently and take different parameter options, so you might need to use the constructors instead sometimes. But I'm not sure if you'll run into this, and it might be easier to start with fromCanvas and see when it works for you.

And actually, I'm not sure that the textures need to be explicitly destroyed, either. I tend to guess it's better to free up resources sooner than later, but I haven't seen it used in the examples nor explicitly called for in the docs, so I'm not sure.

[Taz]

59 minutes ago, caymanbruce said:

...I have also found that even if I use a bigger size texture I still need to scale the sprite a little. Maybe I didn't calculate the new size very properly.

If you're drawing the canvas at the proper size, then scaling the sprite shouldn't be required IMO.

[caymanbruce]

31 minutes ago, Taz said:

If you're drawing the canvas at the proper size, then scaling the sprite shouldn't be required IMO.

you are right.