Make C2 canvas fit liquid div

  • I need to embed my exported project into an HTML, more specifically inside a div tag with "Width=100%" and "Height=100%", in a way that C2 canvas behave like in crop mode, showing more layout as the div gets larger.

    I tried editing the exported HTML and adding some custom javascript with no success. I'm not entirely sure of how C2 setup the project to resize it's canvas.

    How can I achieve this without breaking my project?

  • It's difficult to achieve without messing with the runtime. I think the easiest way would be to use an iframe in the div with a liquid size that shows another page with the fullscreen game on it. As the iframe resizes it should (I think) correctly resize the game on the iframe page.

  • It works, but I need communication between the runtime and the webpage through query strings, and with an iframe this doesn't seems possible.

    I think I could workaround if C2 had actions to set the width and height of the canvas at runtime. Any chance this could be added someday in an upcoming release?

  • Animmaniac : in the HTML5 draft, it's possible to set a communication channel between an iframe and it's parent via .postMessage() queues.

  • Can't you just put the query string in the iframe src as well?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • I think I could parse the query strings when the page loads and then post them to the iframe, or maybe append the strings to the iframe url and create it dynamically.

    Now I noticed that the iframe workaround brings a new problem, I can't request fullscreen anymore. Any ideas about how to solve this?

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