CODEWITHSUNDEEP
javascriptimagephaser-framework
Lachlan Dunn
Lachlan Dunn

Reputation: 143

How to correctly resize images to retain quality in Phaser 3

I am making a game in Phaser 3. I have downloaded high quality (1100x1000px) images from the internet to use. But whenever I shrink them (to roughly 80x70px) they lose quality (either become pixelated or have a weird appearance). How do I correctly re-size the images to retain quality?

I re-sized the image using image.setDisplaySize() but the image looked weird. I am not sure why but the image contrasting has changed. Exact Code-

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)

I have already resized using canvas in paint editor 3 and the image looked fine but I want to know how to do it in Phaser 3 to save having to re-edit all the images for my game. Here it is below-

Phaser 3 image here-

enter image description here

Canvas Edited here-

enter image description here

In case it is not clear I want the image to look like the bottom image but using phaser 3. Thanks for any help in advance.

Upvotes: 9

Views: 28771

Answers (2)

mrwolferinc
mrwolferinc

Reputation: 153

Use the scale attribute of the image:

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>

The image that appears in the center of the screen is half of its original size.

If you don't want that Phaser.js console message to block the view in the example, don't worry! You can find a JSFiddle version here.

Upvotes: 1

nazimboudeffa
nazimboudeffa

Reputation: 979

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/[email protected]/dist/phaser.js"></script>

Upvotes: 9

Related Questions