Image and text scaling

[danhett]

Hi. 

I'm currently finishing up on an interactive book project built in Phaser, aimed at desktop and mobile browsers. I'm trying to make it look as nice as possible on mobile devices, and I'm not sure of the best approach. 

The way it works is that I have a single big 'spread' book page sprite, which then contains child elements for animation, as well as the text labels also as children of this object. I can then scale the entire thing up and down in the window, which allows me to keep the 'book' centralised on the page and presented as large as possible:

On desktop this works great. However on mobile the scaling works (as in, everything's the right size and in the right place), but my bitmaps and text scale really badly.

I've tried setting things like game.stage.smoothed = true, globally and on specific objects, and this doesn't seem to affect anything. At a push, the graphics look passable, but the text is a real problem. I'm using Google webfonts, which are perfectly OK on desktop but extremely pixelated on mobiles. This is an extreme example, but even if I set the text to be enormous it still comes in badly:

Is there a particular approach I should take with cramming content like this into mobile browsers? I can't seem to get anything looking crisp. I assume this is a result of the fact I'm doing a global hard scale on everything, and that the objects are large and scaling down for devices (I'm not currently serving low/high res split assets or anything) but if there's some route I can take to mitigate the distortion it would be really handy.

Any and all input appreciated. Thanks!

[lumoludo]

If you're using webfonts to write out your text, I'm not sure why you'd be having so much pixellation.

This is just a shot in the dark, but are you using the same point size for the font regardless of the resolution and then using the scale property or putting it in a group that you scale? If that's the case, I'd say try not scaling the text but just use an appropriate font size based on the the device resolution. I haven't experienced issues like this, but I can imagine that possibly causing a problem.

 

[megmut]

When using bitmap text, I usually take one of two approaches. 

A: Two bitmap fonts, regular and 2x size. In the preload state, just do a check on the inner height and width and decide to load the standard or retina font there.

B: Dynamically create the font size based on the scale of the game / window like so. Note, you may have to manually increase the scaling size to counter increased font size on retina display

let font = 16 * window.devicePixelRatio + 'px' + 'myFont';
this._textObject = new PIXI.extras.BitmapText('hello world, {font: font});

 

[danhett]

That's something I tried actually - if I create the bitmap font taking devicePixelRatio into account, without scaling, it creates it nicely. However when scaling back down again it becomes pixellated again.

I wonder if part of this is just that I'm scaling by such a large amount perhaps. 

[danhett]

Hmm. So, in addition to this irritating scaling issue, text is looking like it's my biggest performance bottleneck. I'm tempted to tear it all out anyway and use bitmaps of the text - nothing's dynamic, this is just storybook text that sits on a page, and isn't likely to change.

Would love to solve this for future reference anyway though, if I figure it out I'll post back...

[danhett]

Thinking about it... the scaling issue here is bigger than the text itself - on my device here (a Galaxy S6) even the bitmaps themselves look very pixellated, even with smoothing enabled. This is a fairly high res device and has more than enough pixels to throw around (for comparison the dom objects are fine etc).

As an additional test case, I have a none-retina iPad mini here too, and fonts look absolutely fine on it. 

Seems completely backwards that everything looks so bad on the highest-res screen I've tested it on.

Anyone run into this before?

[danhett]

hey dudes - apologies for the bump, but I'm still tussling with this one. 

has anyone encountered anything similar before? my project is finished apart from this irritating scaling issue! 

[saibotlive]

Quote

 

 

On 10/2/2016 at 3:17 PM, danhett said:

Thinking about it... the scaling issue here is bigger than the text itself - on my device here (a Galaxy S6) even the bitmaps themselves look very pixellated, even with smoothing enabled. This is a fairly high res device and has more than enough pixels to throw around (for comparison the dom objects are fine etc).

As an additional test case, I have a none-retina iPad mini here too, and fonts look absolutely fine on it. 

Seems completely backwards that everything looks so bad on the highest-res screen I've tested it on.

Anyone run into this before?

I'm having this issue right now, with bitmaptext looking very pixellated

[danhett]

Just to report back, this was solved as per the below snippet - 'artwork' in this context is the game holder that scales up and down. End result is perfect scaling throughout. 

var ratio = artwork.scale.x * artwork.parent.scale.x;
var style = { font: 24 * ratio + "px Varela Round", fill: fill, align: "center" };
var text = game.add.text(xPos, yPos, copy, style);
text.smoothed = true;
text.scale.x /= ratio;
text.scale.y /= ratio;