0 Favourites

Embed C2 project in a html page

  • Hi there,

    I try to embed a CS2 project in a html page that will be compile into a native ios app.

    • I've exported my project into html5. When I open it in my browser, it says that it won't work perfectly until it's uploaded online.

    But this project is meant to be played offline.

    • I have to embed the project into a bigger html page. Which code should I enter to link to the C2 generated index.html ? What structure do I have to give to the folder that will include every parts of the complete project (html page+embeded C2 index.html) ?

    thanks for your help

  • Construct 3

    Buy Construct 3

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

    Buy Now Construct 3 users don't see these ads
  • Laurent : don't worry about the "offline" part. If you embedd your HTML page inside something like Phonegap, the tool is going to do what's needed to trick the browser into thinking he is "online".

    In your new HTML page (we suppose it's a page from a larger book or magazine), you can put that code, from the index.html exported by C2 :

    <div id="c2canvasdiv" style="margin: 0 auto; width: 1024px; height: 768px;">

    <canvas id="c2canvas" width="1024" height="768">

    </div>

    The "div" isn't strictly necessary, but it's there to keep things cleaner (for example, some plugin can use it). Obviously, in your exported project, the width and height values can be different.

    You also need to add that part at the bottom of the page, before "</body>" :

    <script src="jquery.min.js"></script>

    <script>window.jQuery || document.write("<script src='jquery-1.7.1.min.js'>\x3C/script>")</script>

    <script src="c2runtime.js"></script>

    Don't forget to put the "jquery.min.js" file at the root of your directory, next to your HTML page.

    You can also find sme code between

    <script>

              jQuery(window).resize(function() {

    [...]

    document.addEventListener("visibilitychange", onVisibilityChanged, false);

    document.addEventListener("mozvisibilitychange", onVisibilityChanged, false);

    document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false);

    document.addEventListener("msvisibilitychange", onVisibilityChanged, false);

        </script>

    its not necessarily needed by a tool like Phonegap, so aren't forced to include it...

  • Pode : Can I call you my saviour ? Well, not yet :) I tried to follow your instructions as much as possible but when I try the final page on Firefox, nothing happens in the box dedicated to the Construct2 module. Should it be only working once the final app is generated or did I forgot a special instruction in my C2 project (like a canvas, or something) ?

    My directory contains every files of the C2 project and the files of my html page.

  • Pode : I forgot to tell that, in Hype, I pasted the div in a html widget

  • The easiest way to integrate a game in to a web page is just to export it normally then use an iframe on a different page to show the game. You need to tweak the game's HTML a little bit to remove the margins so it shows all the way in the top left, then it should work fine.

  • Ashley : thanks Ashley. But could you be a little more pr?cise about "tweaking" the game's html ?

  • Here's a pic of my folders. What should go where ?

    In my "HypeProject_Resources, the file "htmlwidget.html" contains the div info and the script info of the file "index.html" of the C2 project

    http://27mai.free.fr/Ecran.png

  • Laurent : Ashley way of doing is cleaner <img src="smileys/smiley2.gif" border="0" align="middle" />.

    in htmlwidget.html, here's what I would do (I don't know what's already inside) :

    <html>

    <head>

    <style>

    iframe {

    frameborder: 0; <!-- no frame border -->

    scrolling: "no"; <!-- no scrolling inside the C2 iframe to avoid interaction problems -->

    height : "640px";<!-- adjust accordingly -->

    width :"480px";<!-- idem -->

    marginheight : 0px;

    marginxidth : 0px;

    padding: 0;

    }

    </style>

    </head>

    <body>

    <iframe src="index.html"></iframe>

    </body>

    </html>

    index.html being the one exported by C2.

    By looking at the tree structure of your screenshot, I would also move everything inside "C2Project" into "HyperProject_Ressource", while keeping the hierarchy of files and folders that was the one inside C2Project (to let the C2 script find back all its tiny bits).

  • Pode : well, something is appearing on the screen now but it looks more like a window within a window within a window with two levels of scroll bar.

    Would you accept to have a look at my files ? I can send you the hype doc and the html generated by C2

  • Laurent : Yes, of course ! You can make an archive, put it your 'public' dropbox folder, and PM the link.

  • hey guys!

    I'm running into the exact same issue. Did you ever get this resolved?

  • nickcamillo - the best way to embed a game in to a page is using an iframe, as described earlier in the thread.

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