Low image quality

Phaser 3
1

I have a problem with image quality in phaser 3. When resizing, the quality of the images is lost. The first screen is original quality. second screen image with setDisplaySize property. I can not use this property
Снимок экрана 2023-01-31 в 13.35.44
Снимок экрана 2023-01-31 в 13.35.22
This is my game config
type: AUTO,
height: ‘80vh’,
width: ‘100vw’,
parent: ‘gameContainer’,
render: { transparent: true },

2

You have to avoid scaling above 1. Or use a larger source image.

3

But what should I do if I need to resize an image without losing quality?

4

You have to use a larger source image (if you have one) and only scale down, not up.

It’s not like vector graphics.

5

I understand, but the original size is 1240x700, and I set the size for smaller screens through setDisplaySize, for example 840x300

6

Scaling down with setDisplaySize() shouldn’t look much worse.

So you’re doing

robot.setDisplaySize(840, 300);

? Can you screenshot the whole game? And what’s in the game config?

7

On mobile you may be making a rather small game canvas this way. An alternative is

new Phaser.Game({
  mode: Phaser.Scale.FIT,
  width: 1024px,
  height: 768px
});

(whatever dimensions you want)