Jump to content

How to maintain the visual quality of the sprite after scaling


caymanbruce
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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; 

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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...