Image Is Pixelated When Scaled Down

Phaser 3
1

I added an image to the canvas as a sprite, and scaled it down using .setScale(0.36).
The problem is that the image looks pixelated (while the image file itself is in high res).
Before I scaled down the image it looked just fine. The problem only occurs after the scaling.

This is the image file that I imported into phaser 3 (scaled, in the image viewer of my computer):

image
image1574×581 32.7 KB

And this is how it looks on the canvas in phaser (the tint here is different, but it doesn’t matter):
image

As you can see, the result is very pixelated.
How can I overcome this?
Thanks a lot in advance :pray:

Here is a shortened version of my code:

var config = {
  backgroundColor: "#ffb3c9",
  type: Phaser.WEBGL,
  width: 600,
  height: 600,
  parent: "pageContent",
  physics: {
    default: "arcade",
    arcade: {
      gravity: { y: 200 },
    },
  },
  scene: {
    preload: preload,
    create: create,
  },
};
var game = new Phaser.Game(config);
function preload() {
    this.load.image("img", "img.png");
}
function create() {
    var sprite = this.add.sprite(50,50,"img").setScale(0.36);
    sprite.tint = 0x000000;
}
2

Can you compare the scaled and unscaled sprites (screenshot)?

3

@samme sure!
Here is the image before scaling down:
image
And after (the scale here is roughly 0.1):
image

4

@samme

Update

I discovered that this problem occurs because of the use of the HTML canvas. However, there are ways to overcome this:

  • Writing manually certain algorithms for better resizing.
  • Using ctx.imageSmoothingQuality = "high";, which supports at least 76% of the cases.
  • Preventing Phaser from resizing the image, by doing it manually with the actual image (which is a really bad solution in most cases).

But still, when using Phaser3, I didn’t manage to enable the imageSmoothingQuality option (since canvas.getContext("2d") is null.

Thanks again in advance :blush:.