Texts and Graphics game objects looking low res, blurry or jagged

Phaser 3
1

image

image
image186×106 23 KB

As you can see, the texts look rather un-crisp and low quality.
Also the rounded corners look pixelated and jagged, I am using a graphics game object for the border and most of my assets.

I have tried fiddling with dpr, anti aliasing, text resolution, and setScale, but I’ve not got any results
on PC I’ve managed to make it look a bit better, but my game is for mobile only and it doesn’t look good at all on mobile, (also note that screenshots are from PC version, it looks worse on mobile)

this is my current config:

export const dpr = window.devicePixelRatio;

export const app = {
  defaultWidth: 412 * dpr,
  defaultHeight: 915 * dpr,
  maxWidth: 480
}

const config: Types.Core.GameConfig = {
  type: Phaser.WEBGL,
  parent: "game-container",
  fullscreenTarget: "game-container",
  backgroundColor: "#028af8",
  autoMobilePipeline: true,
  autoFocus: true,
  audio: { noAudio: true },
  dom: {
    createContainer: true
  },
  fps: {
    limit: 60,
    smoothStep: true
  },
  scale: {
    mode: Phaser.Scale.RESIZE,
    autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
    resizeInterval: 250,
    zoom: 1,
  },
  render: {
    pixelArt: false,
    antialias: true,
    roundPixels: true,
    desynchronized: true,
    powerPreference: 'high-performance'
  },
  scene: [...],
  plugins: {
    scene: [
      {
        key: "spine.SpinePlugin",
        plugin: SpinePlugin,
        mapping: "spine"
      }
    ],
  },
};

another suspect has to do with how I scale my assets, but either way, by removing my custom scaler and just using texts or graphics game object as they are, I still got the same result so that’s a secondary guess.
still, here it is, I scale my assets by this number when creating them so that I always end up showing the proper screen and not tiny assets on larger screens:

const width = scene.sys.game.canvas.width;
const height = scene.sys.game.canvas.height;
const scale = (width / app.defaultWidth) * dpr;