Why does the text display very blurry

[cy920820]

Version

• Phaser Version: 3.80.1
• Operating system: iOS 16
• Browser: chrome

Description

Example Test Code

Additional Information

[cy920820]

Including some icons

[photonstorm]

Include example code and include a screenshot. Text will always only render at the same pixel density as the base canvas size. The smaller the canvas, the less pixels it has to render with.

[cy920820]

@photonstorm phaser game config:

    const container = document.getElementById(parentID)
    const width = container.clientWidth
    const height = container.clientHeight
    const config = {
      type: Phaser.AUTO,
      scene: [BootScene, GameScene],
      parent: parentID,
      resolution: window.devicePixelRatio || 1,
      width,
      height
    }

[photonstorm]

    const width = container.clientWidth
    const height = container.clientHeight

And exactly how large is this?

Also, remove the resolution property. It doesn't do anything.

[cy920820]

    const width = container.clientWidth
    const height = container.clientHeight

And exactly how large is this?

Also, remove the resolution property. It doesn't do anything.

1. It is a game running on a mobile phone, with the CSS attribute of the container set to width: 100vw; height: 100vh
2. ok, I will remove it immediately resolution prop

[cy920820]

@photonstorm

This is how I created the text:

      const tagText = this.context.scene.add.text(0, 0, playerName, {
        fontFamily: 'Arial',
        fontSize: 12,
        color: '#ff69b4'
      })

[cy920820]

The background images of the dialog boxes were all rendered using Nineslice API, but I eventually found that they were also a bit blurry, and there were rough edges or jagged edges

[photonstorm]

It is a game running on a mobile phone, with the CSS attribute of the container set to width: 100vw; height: 100vh

Log these values out and display them somewhere. I expect they're actually really quite low. You need to know the exact size of the canvas you're creating. You cannot magic extra pixels out of nowhere, so first figure out precisely what size you're dealing with.

[cy920820]

It is a game running on a mobile phone, with the CSS attribute of the container set to width: 100vw; height: 100vh

Log these values out and display them somewhere. I expect they're actually really quite low. You need to know the exact size of the canvas you're creating. You cannot magic extra pixels out of nowhere, so first figure out precisely what size you're dealing with.

I actually want the game to be displayed in full screen, Because the size of each phone is also different, it is not possible to set a fixed size, right?

[cy920820]

    const width = container.clientWidth
    const height = container.clientHeight

And exactly how large is this?

Also, remove the resolution property. It doesn't do anything.

Why does the resolution property not work?

[cy920820]

It is a game running on a mobile phone, with the CSS attribute of the container set to width: 100vw; height: 100vh

Log these values out and display them somewhere. I expect they're actually really quite low. You need to know the exact size of the canvas you're creating. You cannot magic extra pixels out of nowhere, so first figure out precisely what size you're dealing with.

I tried to set the width and height of the game to a fixed value of 375 * 700, but still couldn't solve the problem

[cy920820]

<script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.16.0-rc1/phaser.min.js"></script> When I use these two versions, the font rendering is very clear.

---

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.80.1/phaser.min.js"></script> But when I use the latest version, it becomes very blurry.

@photonstorm @zekeatchan

[woshisheji]

你的做法是错误的，如果在手机上，你的字体最低需要24px，然后再在html的mate顶部里面缩放模式设置0.5即可。 我不知道我直接用邮箱回复的你收到了没。但似乎没有，所以上来告诉你一声~~

[cy920820]

你的做法是错误的，如果在手机上，你的字体最低需要24px，然后再在html的mate顶部里面缩放模式设置0.5即可。 我不知道我直接用邮箱回复的你收到了没。但似乎没有，所以上来告诉你一声~~

似乎起作用了，这是由于 canvas 渲染算法的缘故？但是我使用低版本的 3.15.1 phaser，也没有模糊，后面的版本都会模糊 - -!

[zekeatchan]

@woshisheji thanks for your suggestion.

@cy920820 best is to provide a link to a working example instead of parts of your code. There may be a deeper issue to resolve besides just changing the font size and zoom mode.

[cy920820]

@woshisheji thanks for your suggestion.

@cy920820 best is to provide a link to a working example instead of parts of your code. There may be a deeper issue to resolve besides just changing the font size and zoom mode.

case: https://codepen.io/cy920820/pen/QWReZBJ

[photonstorm]

It is a game running on a mobile phone, with the CSS attribute of the container set to width: 100vw; height: 100vh

Log these values out and display them somewhere. I expect they're actually really quite low. You need to know the exact size of the canvas you're creating. You cannot magic extra pixels out of nowhere, so first figure out precisely what size you're dealing with.

I tried to set the width and height of the game to a fixed value of 375 * 700, but still couldn't solve the problem

Sorry, but you're missing the point. 375 pixels is a tiny resolution. You cannot possibly expect to achieve crisp text (or indeed images) on such a small size canvas.

If you want better-looking text, use a higher-resolution canvas. A common solution is to set the canvas size to be the device resolution multiplied by the window highDPI setting. Then the scale manager will scale it back down to fit the viewport, but the canvas itself will have twice (or more) as many pixels, so will render a lot sharper.

Also, you can set the resolution of the Text Game Objects as well - that will instruct the Text Game Object to use twice as many pixels (or whatever the resolution is set to) internally. But it will still have to be 'shrunk down' to the 375 you've got for the main canvas, so that needs addressing as well.