How to correctly resize images to retain quality in Phaser 3

Question

I am making a game in Phaser 3. I have downloaded high quality (1100x1000px) images from the internet to use. But whenever I shrink them (to roughly 80x70px) they lose quality (either become pixelated or have a weird appearance). How do I correctly re-size the images to retain quality?

I re-sized the image using image.setDisplaySize() but the image looked weird. I am not sure why but the image contrasting has changed. Exact Code-

gameState.team_player_icon = gameState.screen_team_group.create(100, 130, (gameState.all_player_team[0].skin))

gameState.scale_size = gameState.team_player_icon.displayHeight/70
gameState.team_player_icon.setDisplaySize(gameState.team_player_icon.displayWidth/gameState.scale_size, 70)

I have already resized using canvas in paint editor 3 and the image looked fine but I want to know how to do it in Phaser 3 to save having to re-edit all the images for my game. Here it is below-

Phaser 3 image here-

Canvas Edited here-

In case it is not clear I want the image to look like the bottom image but using phaser 3. Thanks for any help in advance.

Answer 1

var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  loader: {
    baseURL: 'https://raw.githubusercontent.com/nazimboudeffa/assets/master/',
    crossOrigin: 'anonymous'
  },
  pixelArt: true,//here
  //antialias: false,
  scene: {
    preload: preload,
    create: create
  }
};


var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('alien', 'sprites/phaser-alien.png');
}

function create ()
{
    sprite = this.add.image(50, 50, 'alien');

    sprite.setScale(2);

}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>

Answer 2

Use the scale attribute of the image:

const config = {
  type: Phaser.AUTO,
  width: 640,
  height: 480,
  loader: {
    baseURL: 'https://i.ibb.co/t8p496v/',
    crossOrigin: 'anonymous'
  },
  scene: {
    preload: preload,
    create: create
  }
};

const game = new Phaser.Game(config);

function preload() {
  this.load.image('mario', 'mario.png');
}

function create() {
  const mario = this.add.image(320, 240, 'mario');
  mario.scale = 0.5; // Resize the image
}

* { padding: 0; margin: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.24.1/phaser.min.js"></script>

The image that appears in the center of the screen is half of its original size.

If you don't want that Phaser.js console message to block the view in the example, don't worry! You can find a JSFiddle version here.