Как правильно изменить размер изображения, чтобы сохранить качество в Phaser 3 - PullRequest
1 голос
/ 20 мая 2019

Я создаю игру в 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)

Я уже изменил размеры с помощью canvas в редакторе рисования 3, и изображение выглядело нормально, но я хочу знать, как это сделать в Phaser 3, чтобы избавить от необходимости повторного редактирования всех изображений для моей игры. Вот оно ниже -

изображение Phaser 3 здесь-

enter image description here

Canvas Отредактировано здесь -

enter image description here

Если неясно, я хочу, чтобы изображение выглядело как нижнее изображение, но с использованием Phaser 3. Заранее спасибо за любую помощь.

1 Ответ

0 голосов
/ 20 мая 2019

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