Embed C2 project in a html page

Discussion and feedback on Construct 2

Post » Thu Sep 06, 2012 1:43 pm

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
B
20
S
9
G
4
Posts: 197
Reputation: 4,080

Post » Thu Sep 06, 2012 3:11 pm

@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 :

[quote]
<div id="c2canvasdiv" style="margin: 0 auto; width: 1024px; height: 768px;">
<canvas id="c2canvas" width="1024" height="768">
</div>
[/quote]

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>" :
[quote]
<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>
[/quote]
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
[quote]
<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>
[/quote]
its not necessarily needed by a tool like Phonegap, so aren't forced to include it...
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Thu Sep 06, 2012 5:09 pm

@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.
B
20
S
9
G
4
Posts: 197
Reputation: 4,080

Post » Thu Sep 06, 2012 5:28 pm

@Pode : I forgot to tell that, in Hype, I pasted the div in a html widget
B
20
S
9
G
4
Posts: 197
Reputation: 4,080

Post » Thu Sep 06, 2012 5:51 pm

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.
Scirra Founder
B
359
S
214
G
72
Posts: 22,949
Reputation: 178,544

Post » Thu Sep 06, 2012 5:58 pm

@Ashley : thanks Ashley. But could you be a little more prcise about "tweaking" the game's html ?
B
20
S
9
G
4
Posts: 197
Reputation: 4,080

Post » Thu Sep 06, 2012 6:42 pm

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
B
20
S
9
G
4
Posts: 197
Reputation: 4,080

Post » Thu Sep 06, 2012 8:14 pm

@Laurent : @Ashley way of doing is cleaner .

in htmlwidget.html, here's what I would do (I don't know what's already inside) :
[quote]
<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>
[/quote]
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).
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Thu Sep 06, 2012 8:40 pm

@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
B
20
S
9
G
4
Posts: 197
Reputation: 4,080

Post » Thu Sep 06, 2012 8:54 pm

@Laurent : Yes, of course ! You can make an archive, put it your 'public' dropbox folder, and PM the link.
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Next

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 9 guests