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

Question

我正在Phaser 3中制作游戏。我已经从互联网上下载了高质量（1100x1000px）的图像以供使用。但是每当我将它们缩小（大约80x70px）时，它们就会失去质量（变得像素化或外观怪异）。如何正确调整图像尺寸以保持质量？

我使用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)

我已经在Paint Editor 3中使用画布调整了尺寸，图像看起来还不错，但是我想知道如何在Phaser 3中做到这一点，从而省去了重新编辑游戏中所有图像的麻烦。在这里-

Phaser 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>

Answer 2

使用图片的scale属性：

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>

出现在屏幕中央的图像是其原始尺寸的一半。

如果您不希望Phaser.js控制台消息阻塞示例中的视图，请不要担心！您可以找到JSFiddle版本https://code.mpimet.mpg.de/projects/cdo/wiki/Tutorial#Plotting。