DOMless retina canvas

0 favourites
  • 5 posts
From the Asset Store
Pixel Destruction like in "Worms" (Drawing Canvas based)
  • 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: 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

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • 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.

  • Thanks, just tried and works like a charme

  • You going to share the ejecta for c2?

    is EjectaX?

    thanks

  • felixsg yes I'll share, I'm about to submit the game, when that's done I'll update the plugin.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)