如何在 Phaser 3 中正确调整图像大小以保持质量

Question

我正在 Phaser 3 中制作游戏。我从互联网上下载了高质量 (1100x1000px) 的图像以供使用。但是每当我缩小它们（大约 80x70 像素）时，它们就会失去质量（要么变得像素化，要么看起来很奇怪）。如何正确调整图像大小以保持质量？

我使用 image.setDisplaySize() 重新调整了图像的大小，但图像看起来很奇怪。我不知道为什么，但图像对比发生了变化。确切代码-

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)

我已经在绘画编辑器 3 中使用画布调整了大小，图像看起来不错，但我想知道如何在 Phaser 3 中执行此操作，以节省为我的游戏重新编辑所有图像的过程。下面是——

移相器 3 图像在这里-

画布在这里编辑-

如果不清楚，我希望图像看起来像底部图像，但使用移相器 3。提前感谢您的任何帮助。

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/phaser@3.17.0/dist/phaser.js"></script>