DOMless retina canvas

For developers using the Construct 2 Javascript SDK

Post » Tue Oct 29, 2013 8:50 am

I post here because it looks like the best place to do it.
As some of you might know I'm taking care of the unofficial Ejecta exporter. I've been able to create a 100% working webGL canvas (including effects) but I have a giant issue that I don't have any idea how to fix.

I really hope someone or @Ashley (even if I know your stance about DOMLess) can point me to the right direction.

Basically in webGL the canvas is not rendered with retina (please read here: https://github.com/phoboslab/Ejecta/issues/243) for this reason there is the need to do it manually like so:

    canvas.width = window.innerWidth * window.devicePixelRatio;
    canvas.height = window.innerHeight * window.devicePixelRatio;
    canvas.style.width = window.innerWidth;
    canvas.style.height = window.innerHeight;

The issue is with touches, window.innerWidth * window.devicePixelRatio effectively doubles the canvas, if you don't set canvas.style.width construct renders a giant canvas, so on screen you see just a quarter, this is expected, the issue is with touches, even setting the style c2 still reads touches from the giant canvas, resulting in an unusable app.

How can I hack this behaviour? Has anyone has any ideas?

Thanks
B
30
S
9
G
6
Posts: 525
Reputation: 8,329

Post » Tue Oct 29, 2013 10:28 am

Near the top of preview.js the retina mode is determined like so:

this.isRetina = (!this.isDomFree && this.useHighDpi && !this.isAndroidStockBrowser);

Remove the isDomFree check from that (and possibly the android stock browser check - I don't know what Ejecta's user agent string will detect as) and it will enable the code that you described, which is how we get high-DPI in browsers.

Then in runtime.setSize it still uses jQuery to set the CSS size (there's no real reason for it, it's just old code). Replace that with the canvas.style.width... assignments and hopefully that will work.

I think CocoonJS does this simply by having a devicePixelRatio of 1 and reporting the real physical pixel counts for the window innerWidth/innerHeight. That's a nice and simple way of doing it which perhaps Ejecta could support as an alternative mode.
Scirra Founder
B
395
S
232
G
88
Posts: 24,371
Reputation: 193,762

Post » Thu Oct 31, 2013 12:33 pm

Thanks, just tried and works like a charme
B
30
S
9
G
6
Posts: 525
Reputation: 8,329

Post » Sat Nov 09, 2013 10:44 pm

You going to share the ejecta for c2?

is EjectaX?

thanks
B
65
S
9
G
7
Posts: 176
Reputation: 8,924

Post » Mon Nov 11, 2013 11:29 pm

@felixsg yes I'll share, I'm about to submit the game, when that's done I'll update the plugin.
B
30
S
9
G
6
Posts: 525
Reputation: 8,329


Return to Javascript SDK

Who is online

Users browsing this forum: No registered users and 0 guests