pixel art gets fuzzy when rotating (game.stage.smoothed = false)

[kosmoskolio]

I've got a pixel art image of a planet.

If I use game.stage.smoothed = false; when I start rotating the image it gets fuzzy and looks... shitty...

 

here's the basic code that rotates the planet:

update: function () {
        if ((game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) || this.mobileMoveRight) && this.gameLogic.showingMenu == false) {
                 // some other code ...

                 this.groupPlanet.rotation -= 0.003;
        }
}

 

NOTE: the fuzziness appears ONLY if game.stage.smoothed = false;

Can anyone explain to me what is the issue and if there's a workaround?

 

Thanks in advance!

 

[drhayes]

Try setting the CSS rule "image-rendering: pixelated;" on your canvas. When I do that through the inspector everything sharpens right up.

[samme]

If you mean fuzzy/rippled (rather than "blurry") you may be seeing aliasing.

[kosmoskolio]

15 hours ago, samme said:

If you mean fuzzy/rippled (rather than "blurry") you may be seeing aliasing.

yup - "RIPPLED" is probably the best word for it  

So it is probably the aliasing that is annoying me! Which makes me think it wasn't a very good idea to design a rotating pixel art planet in the first place...

As far as I understand it - pixel art and rotation are not the best buddies.

I'll just sleep it over and decide what to do tomorrow ...

 

Thanks, guys! You're awesome!!!