How to implement accurate sprite scaling

[user123456789]

Hello,

First of all, I know that the problem has been somewhat addressed in previous topics, but I just don't seem to find an answer which results to as accurate zoom effect what I am looking for.

My use case is that I want to implement scaling a sprite (many of them in a container) which is as accurate as scaling pixi graphics object. -- which does not get blurred.

The scale range goes e.g. from 1.0 -> 10.0

I tried solve the problem by creating a tileset which has the same sprite stored in multiple sizes 64x64, 128x128 and when I am scaling I swap the texture of the sprite according to current scale level. e.g.

The code below illustrates the idea:
 

...

var twitter = new PIXI.Sprite(tileset['twitter-zoom-1.png']);
twitter.x = 100;
twitter.y = 100;
twitter.currentTexture = 'zoom-1';
twitter.anchor.set(0.5, 0.5);

this.addChild(twitter); // Add to stage

// Simple test...
setInterval(function() {
  twitter.scale.x += 0.1;
  twitter.scale.y += 0.1;

  // Swap the texture when reaching 2.0 ... (but only if not swapped)
  if(twitter.scale.x >= 2.0 && twitter.currentTexture === 'zoom-1') {
    twitter.currentTexture = 'zoom-2';
    twitter.texture = tileset['twitter-zoom-2.png'];
    twitter.scale.set(1.0, 1.0); // Reset scale
  }
}, 1);

...

I am just not happy with this approach for multiple reasons:

1.) The check I use for scale is never really accurate because of floating-point numbers

2.) I need to save up to 10 different zoom levels per sprite to the tileset

3.) When the sprite is zoomed from e.g. 1.0 - 1.9 I can see it getting blurry and then suddenly it gets a bit more accurate again because the sprite is swapped.

Also I don't know if this is even right approach for solving the problem in terms of performance.

Finally, I have the .svg version of the twitter icon which opens more opportunities.

Any ideas? Cheers!

 

[ivan.popelyshev]

If the size of texture is power-of-two, then pixi will use mipmaps for trilinear filtering. Otherwise, you can make it power-of-two and use only a region out of it, like "new PIXI.Texture(oldTexture, new PIXI.Rectangle(0, 0, actualWidth, actualHeight));".

If you want to do it for many sprites, I suggest put them in atlas with pow2 width/height and padding not less than log2 of your possible scale.

As for SVG, I dont know yet of successful demos, may be SVG+mipmaps can be even better.