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

Question

我正在用Phaser3制作一个游戏。我已经从互联网上下载了高质量(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)

我已经使用画布在画布编辑器3中调整了大小，图像看起来很好，但我想知道如何在阶段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>

​

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版本的here。