Javascript 如何正确调整图像大小以保持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中进行调整，以避免为我的游戏重新编辑所有图像。在下面-

移相器3图像在这里-

画布编辑在这里-

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

var配置={
类型：Phaser.AUTO，
宽度：800，
身高：600，
加载器：{
baseURL:'https://raw.githubusercontent.com/nazimboudeffa/assets/master/',
交叉源：“匿名”
},
pixelArt:true，//这里
//反别名：假，
场景：{
预加载：预加载，
创建：创建
}
};
var game=new Phaser.game（配置）；
函数预加载（）
{
this.load.image（'alien'，'sprites/phaser alien.png'）；
}
函数创建（）
{
sprite=this.add.image（50,50，'alien'）；
sprite.setScale（2）；
}

---

使用图像的

比例

属性：

const-config={
类型：Phaser.AUTO，
宽度：640，
身高：480，
加载器：{
baseURL:'https://i.ibb.co/t8p496v/',
交叉源：“匿名”
},
场景：{
预加载：预加载，
创建：创建
}
};
const game=new Phaser.game（配置）；
函数预加载（）{
this.load.image（'mario'，'mario.png'）；
}
函数create（）{
const mario=this.add.image（320240，'mario'）；
mario.scale=0.5；//调整图像大小
}

*{padding:0；margin:0；}

---

我尝试使用pixelArt:true和antialias:false，但图像仍然失真。您还有其他想法吗？可能是因为您使用了带有w和h差异的

setDisplaySize（w，h）

，这将使图像失真，就像在本例中我使用gameState.scale\u size来确保宽高比保持不变一样。我遇到的问题更多的是颜色，而不是图像的大小。好吧，我认为缩放问题已经解决了，对吗？关于颜色你应该问另一个问题也许我的问题不清楚。使用Paint Editor 3（通过修改原始图像）编辑底部图像。图像看起来正确，大小也正确，但是手动调整游戏中使用的所有图像的大小是不切实际的。取而代之的是，我在Phaser 3本身（顶部图像）内调整了图像大小，但颜色失真。我想知道为什么颜色失真，以及如何修复颜色失真（因此图像看起来像底部图像）。谢谢你的帮助。