Jump to content

Image and text scaling


danhett
 Share

Recommended Posts

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:

Screen Shot 2016-09-30 at 17.10.33.png

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:

Screen Shot 2016-09-30 at 17.15.37.png

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!

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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});

 

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 4 weeks later...
  • 1 month later...
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

Link to comment
Share on other sites

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;

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...