如何在Phaser 3中正确地调整图片大小以保留质量

Question

我是一个Phaser 3游戏制作人。我已经从互联网上下载了高质量（1100x1000像素）的图像来使用。但是，每当我将它们缩小（大约到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中使用canvas调整大小，图片看起来很好，但我想知道如何在Phaser 3中完成此操作，以避免重新编辑所有游戏图片。以下是示例：

Phaser 3图片如下-

Canvas修改后如下-

如果不清楚我的意思，我想让图片看起来像底部的那张，但要使用Phaser 3。感谢您的任何帮助。

- Lachlan Dunn

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>

- nazimboudeffa

---

我尝试使用pixelArt:true和antialias:false，但图片仍然变形了。你有其他的想法吗？ - Lachlan Dunn

可能是因为您使用 setDisplaySize(w,h) 时，w 和 h 不同，这会导致图像变形，就像在此示例中一样 https://jsfiddle.net/nazimboudeffa/xtovdh37/。 - nazimboudeffa

我使用了gameState.scale_size来确保宽高比保持不变。我遇到的问题更多是与颜色而不是图像大小有关。 - Lachlan Dunn

好的，我认为缩放问题已经解决了，对吧？至于颜色，你应该另外提一个问题。 - nazimboudeffa

也许我的问题没有表达清楚。底部的图像是使用Paint Editor 3进行编辑的（通过修改原始图像）。图像看起来正确且大小正确，但手动调整我游戏中使用的所有图像是不切实际的。相反，我在Phaser 3内部调整了图像的大小（顶部图像），但颜色失真了。我想知道为什么颜色会失真以及如何修复颜色失真（使图像看起来像底部的图像）。感谢您的帮助。 - Lachlan Dunn

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

- mrwolferinc