text look the same in all mobile devices

Phaser 3
1

Hey all,

I’m working on a responsive game in Phaser 3 at the moment, and I’m trying to work out a way to have the text look the same in all mobile devices without it overflowing.

Is there any way to auto-size the text so that it fits inside the allocated space.

Any suggestion/references regarding this would be really helpful.

Thanks in advanced.

2

:wave:

There is wordWrap width in the text style.

Or you can do

text.displayWidth = AVAIL_WIDTH;
text.scaleY = text.scaleX;
3

Hi samme,

Thanks for the response.

I have used wordwrap to fit the width, but the problem i’m encountering is with respect to font size (px).
When i test it out in a webview it looks fine, but when i run the same game on a different mobile phone, the text looks bigger.

Please find attached references to photos taken from 2 different devices.
Is there any way auto size the font size so that the text looks the same in all devices.

image1
image1720×783 73.4 KB

image2
image2504×550 36.9 KB

4

First verify whether the available width is the same on both devices.

Try passing fixedWidth in the text style.

Try passing textMetrics in the text style.

5

should i use rem for fontSize?

this.add.text(0, 0, ‘wow’, { fontSize: ‘xrem’ })

6

No, fontSize is a number (pixels implied).