Jump to content

How to implement accurate sprite scaling


Recommended Posts


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! :)


Link to comment
Share on other sites

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.

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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...