+ HTML5, what is it ?
° What is HTML ?
HTML is a standard that has described the structure of webpages since almost the birth of the internet. The page displayed in your browser is HTML.
When you take a look at the source code of your page, you're taken to a page of markup code that describes the visual look and layout of the page.
That's for the theory about the standard, the fact is that each major browsers in the history had more or less respect for the standard, implementing functions that were specific for their own browser's capabilities or naming functions and parameters according to their liking.
For website maker, it was a headake, having to make the code compatible for browsers using different languages or specific functions at time.
° And what about this HTML5 ?
HTML5 is the "new version" of HTML. The specification of the standard has evolved with the power of the processors and already provided tools and languages supported in browsers.
The specification is nothing but a guideline that browser makers have to implement in their application. If they chose to follow it, they make it easier for webdevelopper to make pages that will be displayed the same in every browsers.
With HTML5, the big four browsers (Internet Explorer, Google Chrome, Mozilla FireFox and Apple Safari) seem to tighten their following and implementation of the standard this time. There are still battles around specific areas (audio support you can read about on scirra's blog, webGL vs silverlight for 3D, ...) but concerning performances and standard for the 2D canvas and the layout of the page, they seem to emulates one another and follow the standard.
And that's the big novelty of this standard: new functions that are available easily and functionaly in any browser. You have now access to anything a game require directly from a browser without having to download any plugin.
This is already INSIDE the browser, you just take advantage of it. You really do take advantage of it if you are using C2 to make your game anyway, and you already know it.
° So what is this article about ?
I will propose you to take a look inside of an exported C2 project to learn how to take your game and provide it over the web in a website or just on its own.
You can even propose your game as a zip package that user download and run from their own computer if you want.
We will specificaly deal with the look (layout) of the exported index.html page (the page in which you play your game).
+ C2 and HTML5
I. Understanding what you are given
When you export your project to a folder, this one gets populated with new files.
° index.html
° c2runtime.js
° jquery-1.6.2.min.js
° images folder
° medias folder
° index.html is your entry point. That is the page that will contain your game and display it. That's the file you give the public url away if you put your game on dropbox.
° c2runtime.js is basicaly the condensate of your C2 project into javascript (JS). JS is one of the "novelties" of the HTML5 spec.
It is not a new language, on the contrary, it has been inside browsers for years now. So it is widely spread and reliable.
What the HTML5 spec did was taking this into account and proposing the famous 2D canvas to be controled by JS code.
So C2runtime.js is your whole programming displayed in the canvas in index.html.
° jquery-1.6.2.min.js is the jQuery library file. You need this javascript library in order for your C2 application to correctly executes. One is provided for you at export time.
You shouldn't mess at all with this file and always let it in the same folder as c2runtime.js
The numbers in the name of the file correspond to the version of the library. At the time of writing of this article it is 1.6.2.
° images/medias folder
If you chose so on export, you'll have folders containing your exported (C2 recompress every images of your file into PNG to minimize the loading time) images and sound files (C2 compresses the files into ogg and aac.)
The folder just help keeping all the assets in one place, easily accessible for c2runtime.
That's what you get from an exported project.
If you took a look at the folder where you installed C2 though, you could also have access in "exporters\html5" to 4 more html files.
° export.html
° export-fs.html
° preview.html
° preview-fs.html
Their names are pretty self-explanatory, both "export" files will end as your "index.html" in your exported folder, whereas "preview" html files are the file you see when previewing your project from C2. It launches a webbrowser and relies on those files to display.
Note: the "-fs" suffixe stands for "full screen". Another novelty of HTML5. It will allow the canvas to take the whole space provided by the browser.