How to do correct HiDPI scaling in HTML

[Christoph Dietze]

Hi there!

When running the HTML version of my prototype game on the HiDPI (aka retina) devices that I have (iOS and Android) it looked funny.

I figured out that Chrome can simulate a specific Pixel Ratio, so then I could reproduce the effect on my Laptop:

Ratio 2:  Ratio 1 (correct):

The Canvas (the 10x10 tiles) and the text is messed up. For the canvas setting the scale like this solved the problem:

    Scale scale = game.plat.graphics().scale();
    canvas.scale(scale.factor, scale.factor);

However, I cannot get the layout of tripleplay's elements to fit. I fumbled the scale into the font size which looked ok then. But I couldn't get the layout right!

Now I checked the tripleplay demo of the current HEAD which actually also has these problems:

Ratio 2:   Ratio 1 (correct):

[Michael Bayne]

On Thu, May 21, 2015 at 1:25 PM, Christoph Dietze <christop...@gmail.com> wrote:

Now I checked the tripleplay demo of the current HEAD which actually also has these problems:

Yeah, that's on my TODO list. The HTML5 backend should just do the right thing automatically with regard to HiDPI displays, but for whatever reason the straightforward stuff that I'm doing is not working properly.

I haven't had a chance to debug it since I first experimented with making it work at all. You're welcome to take a crack at it if you like, or if it's holding up a release, then I can comment that stuff out so that the HTML5 backend restricts itself to low DPI mode (like the 1.x codebase does).

In any case, you shouldn't have to do anything in your game to make this work, the platform should take care of everything for you.

Incidentally, one of the benefits of 2.x is that the Java backend *does* correctly use HiDPI mode when you're developing and testing on a HiDPI display. At least it does on my Retina MacBook Pro, I haven't tested it on Windows.

-- m...@samskivert.com

[Christoph Dietze]

Thanks for clearing that up. I reckoned we didn't have that problem in 1.x.

It's not holding up a release, just wanted to use the HTML version to show the prototype around.

I'll have a look if I can fix it.

--

---
You received this message because you are subscribed to a topic in the Google Groups "PlayN" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/playn/IK8Jj11fm_Q/unsubscribe.
To unsubscribe from this group and all its topics, send an email to playn+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Christoph Dietze]

Fixing the Canvas issue in PlayN should be straight forward.

For the layout and font size issues: Do you think that's an issue with the HTML Backend or with tripleplay not using scale correctly stuff?

[Michael Bayne]

On Thu, May 21, 2015 at 1:59 PM, Christoph Dietze <christop...@gmail.com> wrote:

For the layout and font size issues: Do you think that's an issue with the HTML Backend or with tripleplay not using scale correctly stuff?

The issue is with the shader or something in the low-level WebGL stuff. TriplePlay does the right thing with HiDPI displays because it works just fine on iOS, Android and Java.

-- m...@samskivert.com

[Christoph Dietze]

Just issued a PR: https://github.com/playn/playn/pull/5

Those two lines took me quite some time. What's funny is that they look really a lot like the ones in my first post here. But I was looking in all the wrong places... 

[Michael Bayne]

On Fri, May 22, 2015 at 3:50 PM, Christoph Dietze <christop...@gmail.com> wrote:

Just issued a PR: https://github.com/playn/playn/pull/5

Those two lines took me quite some time. What's funny is that they look really a lot like the ones in my first post here. But I was looking in all the wrong places... 

Great, thanks! I knew it was some silly oversight on my part, I should have known it wouldn't be a problem with the GL code since that's all shared by all the backends (for the most part).

It's very exciting to finally see non-blurry text in the HTML backend.

-- m...@samskivert.com