II. Analysing export.html
From here you should start to connect the dots by yourself. With a little bit of markup magic, you can set the visual display you want in your index.html file.
If you want to "automate" the function, you could directly modify the export.html file so that any project exported will rely on it.
Let's take a look at export.html just to learn about the structure and ways of HTML
Open it up in a notepad application (I recommand notepad++ which is a nice multi language source code editor released under GPL license).
NOTE: This is not meant to be an exhaustive or even accurate explanation about HTML.
Just a simple overview oriented around our exported project.
I advise you to take a look at the w3schools HTML tutorials for more.
Our export HTML page is divided into two parts. Head and Body.
The head deals with telling the browser what type of document it is and referencing formating.
The body is the actual content of the page, what YOU directly see in your browser.
NOTE: We are just looking now. Don't go and start removing lines from this file as you may end up breaking your exported projects. For modifications, always work on a back up file and keep an original of scirra's as well.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IE8" />
<title>{title}</title>
<!-- Note: running this exported project from disk may not work exactly like preview, since browsers block some features on the file:// protocol. Once you've uploaded it to a server, it should work OK. -->
<!-- This outlines the canvas with a black border. -->
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
This is the "header" of the HTML file. It contains informations useful to the browser and the formating of the rest of the file.
Let's look at it a bit in depth
These lines indicates that the file is HTML5. We are now allowed to use its more advanced features.
This line begins the "header" part of our page. HTML relies on HTML tags that must be opened and closed.
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IE8" />
The charset indicates your browser which type of character encryption the page uses.
The http-equiv is for compatibility with Internet Explorer.
Pretty self-explanatory. This will be the title of your page. The "{title}" is a placeholder that will be replaced by the name of your application when you export your project.
<!-- Note: running this exported project from disk may not work exactly like preview, since browsers block some features on the file:// protocol. Once you've uploaded it to a server, it should work OK. -->
This is a line of comment. This is strictly for human eyes, and the browser won't try to consider it as code it has to translate.
Concerning the issue the comment is talking about, at the time of writing of this tutorial, it is mainly troubles with audio file. If you make a game with no audio files and want to provide it as .zip package (as mentionned earlier) it should just work okay.
For games with audio files, you would have to provide a local hosting. This issue is beyond the scope of this tutorial and should be discussed in another.
<!-- This outlines the canvas with a black border. -->
<style type="text/css">
canvas { border: 1px solid black; }
</style>
Between the <style></style> markups you will define the formating of your page. As you can see this is some kind of scripting language defining values to parameters.
This is CSS script. We will a see a bit later in this tutorial its effects and how to use it.
And so this closes the head part. All the informations we wrote before this tag only happen in the head process by the browser. So it knows it won't display this content (as it is in body) and allows you to determine all of your styling before the content.
---------------------------------------------------------------------------------------------------------
Now to the body, the actual content.
I won't copy it as a whole to gain a bit of space and readability in this tutorial but we will break it in bits:
The opening tag of body. Everything that you enter now is supposed to be displayed in the browser.
<div style="text-align: center;">
This open a div tag. This is a block of space in your page that you can style. In this line the parameter style makes it so that every content further add will be displayed as centered in the page, until the tag is closed.
<!-- The canvas the project will render to. If you change its ID, don't forget to change the ID the runtime looks for in the jQuery ready event (above). -->
<canvas id="c2canvas" width="{width}" height="{height}" oncontextmenu="return false;">
A canvas tag. We could even say canvas object. This is our application. the {width} and {height} will be those that you set in your application properties. The last parameter "oncontextmenu" prevents the right-click menu appearing when you right-click the canvas, which is annoying for games which use the right mouse button.
The comment above simply says that if you want, you can rename the canvas ID to something else but if you do so, you will have to modify your index.html file too. We will come back on this later.
Another thing to note is that the styling programmed earlier affected the canvas object.
Remember :
canvas { border: 1px solid black; }
This simply means that when a <canvas> is displayed, it will have a continuous (solid) border of 1 black pixel.
This is how styling works. Define your style in the <style> tag or through a CSS file (extension .css)
<!-- This text is displayed if the visitor's browser does not support HTML5.
You can change it, but it is a good idea to link to a description of a browser
and provide some links to download some popular HTML5-compatible browsers. -->
Your browser does not appear to support HTML5. Try upgrading your browser to the latest version. <a href="http://www.whatbrowser.org">What is a browser ?</a>
<br/><br/><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">Microsoft Internet Explorer</a><br/>
<a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br/>
<a href="http://www.google.com/chrome/">Google Chrome</a><br/>
<a href="http://www.apple.com/safari/download/">Apple Safari</a><br/>
<a href="http://www.google.com/chromeframe">Google Chrome Frame for Internet Explorer</a><br/>
This bit of code is explained in the comment. When the user executing your page doesn't have a browser that can display HTML5 this part will appear instead of the canvas/game itself.
The <a> tag allows for hyperlinks. Its "href" parameter is the url you will be linked to if clicked. The text between <a> and </a> is the displayed text on screen.
<br/> allows to go to next line. It is strictly a formating tag. you only need one, as it is opened and closed at the same time (hence the "/" in the end of the tag)
<br />
<!-- Link is optional of course but it'd be nice if you kept a link to help support Scirra! -->
<a href="http://www.scirra.com/" target="_blank" title="Make games with Construct 2" style="font-family:Arial">Made with Construct 2 — the HTML5 game creator</a><br/><br/>
<!-- The text below is just for your information. Feel free to remove this text before uploading (everything from <p... to </p> inclusive) -->
<p style="font-family:Arial; color:#888">View the source of this page for more information about using exported projects.<br/>You can also simply upload all the files in this directory to a server (or a public file host like DropBox), and run the game by visiting index.html.</p>
</div>
Again comments and text.
The <p> tag stands for paragraph and is regular text. Closing a </p> tag directly goes to the next line without having to add <br/>.
You can see that the style is defined as a parameter in the <p> tag itself.
You could also have set it alongside "canvas" in the header in CSS language. Any <p> tags would have been directly affected by it.
<!-- Pages load faster with scripts at the bottom -->
This start an important part of the page, where you have all concerning the scripts used by your page. By script I mean javascript.
<!-- Construct 2 exported games require jQuery. To save bandwidth, by default
this is set to grab it off the Google content delivery network (CDN). Fall back to local if not available. -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='jquery-1.6.2.min.js'>\x3C/script>")</script>
This line links the jQuery library to your page. It is a requisite for your application to work, so leave it.
It downloads directly from the official deposit of the library.
If it can't, it will use the jquery-x-min.js file provided in your exported project.
If you decide to move the jQuery exported file the new path to it should be put in the src parameter.
<!-- The runtime script. You can rename it, but don't forget to rename the reference here as well.
This file will have been minified and obfuscated if you enabled "Minify script" during export. -->
<script src="c2runtime.js"></script>
This line links to your game. If you rename your c2runtime.js file to something, remember to change the name here too.
As long as the js file is in the same folder as the html file, you don't need anything more.
If you move the file, reflects its new path in the src parameter.
<script>
// Start the Construct 2 project running on window load.
jQuery(document).ready(function ()
{
// Create new runtime using the c2canvas
cr.createRuntime("c2canvas");
});
</script>
These lines is the actual order to execute your application. The order is given once the page is loaded (jQuery(document).ready).
If you modified the ID of the canvas earlier, the new name should be reflected as the parameter to
cr.createRuntime("name_here")
And here closes the body and the document.