I added an image to the canvas as a sprite, and scaled it down using .setScale(0.1).

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

This is how the image looks on Phaser 3 before scaling down (just fine):

(the tint here is different, but it doesn’t matter)

And this is how it looks after scaling down:

As you can see, the result is very pixelated. How can I overcome this?

Thanks a lot in advance 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.1);
    sprite.tint = 0x000000;
}

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.

Update2

I managed to activate both imageSmoothingQuality on CANVAS mode (game.canvas.getContext("2d").imageSmoothingQuality = "high";) and mipmapping on WEBGL mode (mipmapFilter: "LINEAR_MIPMAP_LINEAR" in config).

However, I noticed that on CANVAS mode the tint doesn't work, which is a thing that my game is going to need. So, I tried WEBGL mode and saw that the mipmapFilter I added made my sprite better, yet not good enough:

Is there a way to improve the situation?