Construct2: How to customize the exported HTML5 index.html ?

Favourite 71 favourites
Tutorial written by KyatricOriginally published on 13th, September 2011 - 16 revisions

Construct 2 can export to HTML5, meaning that your application can be played/executed in last generation browsers.

NOTE: This tutorial is not meant to be an exhaustive or even accurate explanation about HTML.

Just a simple overview oriented around our exported project.
I strongly advise you to take a look at the w3schools HTML tutorials for more.

+ HTML5 what is it ?
....° What is HTML ?....................Page 2
....° And what about this HTML5 ?.......Page 2
....° So what is this article about ?...Page 2

+ C2 and HTML5
I. Understanding what you are given.....Page 2
....° The exported files................Page 2
II. Analysing export.html...............Page 3
III. Analysing a custom index.html......Page 4

+ Quick "How to"
....° Change the background color.......Page 5
....° Put an image as background........Page 5
....° Add a logo........................Page 5

+ Conclusion............................Page 6


Ashley 192.5k rep

Great tutorial! To explain some of the stuff you weren't sure about: the http-equiv is for compatibility with Internet Explorer, and the oncontextmenu part of the canvas tag prevents the right-click menu appearing when you right-click the canvas, which is annoying for games which use the right mouse button.

Wednesday, September 14, 2011 at 3:06:09 PM
Kyatric 87.5k rep

Thank you Ashley a clear explanation, as always.
I'll make sure to add that to the tutorial.

Friday, September 16, 2011 at 3:13:59 AM
vidi 5,058 rep

I have studied your tutorial today, and now it is possible for me to make my own page
HTML coding was not foreign to me, but after I opened your example on my PC and saw no preview was it clearer for me.
I can only see the "Game window" online in the Browser not in my editor.

Your tutorial is very good and detailed. Thank you very much !

Sunday, September 25, 2011 at 7:29:08 PM
cesisco 10.3k rep

Great tutorial!tks.

Wednesday, December 07, 2011 at 10:24:30 PM
kranthi1910 2,913 rep

Gd Tutorial. It i very much usefull thanks for preparing

Friday, April 27, 2012 at 7:58:59 AM
Equinox80 4,794 rep

It seems I created a tutorial after looking, and THEN it seems I seen it lol. My bad. Good tutorial!

Wednesday, May 02, 2012 at 9:51:51 PM
Kyatric 87.5k rep

@Equinox80: well a little link in your tutorial would be appreciated and might help prevent too much spreading on infos.
If I may suggest to add a little precision in your tutorial, before making modifications to the export.html page, people should backup this/those file(s) as not every user around here is a seasoned web developer. (even if this is a no-brainer for used developers, it's not always a reflex amongst our beginners)
Also, like for your tutorial, if you have any suggestion or tips or anything you would like to see added to this present tutorial, I'll be glad to hear from it and see those infos make their way into it.

Wednesday, May 02, 2012 at 11:35:19 PM
Equinox80 4,794 rep

Alright sounds good, I'll fix it soon and add a "Need more info?" link or something to yours, you've definitely spent more time on making yours and went much more in depth.

Thursday, May 03, 2012 at 12:21:17 AM
Lordshiva1948 40.3k rep

Great tutorial usefull thanks for preparing

Sunday, February 23, 2014 at 10:00:39 AM
jsiitb 386 rep

How do I write HTML5 Video tags in Construct 2? I want to add a Preload=auto attribute to my video embed code. Is there a way to do the same?

Thursday, May 15, 2014 at 9:11:43 PM
Vinians 4,949 rep

This tutorial is outdated, the actual version of Construct 2 hava dozens of html files. But its good anyway.

Monday, June 20, 2016 at 5:30:41 PM
Ciao121 990 rep

Tried to add:
<link rel="import" href="add_head.html" />
but I cannot find it after exporting as html5

Friday, February 17, 2017 at 3:55:21 PM
Ciao121 990 rep

For me the correct file to edit was export-fs.html

Friday, February 17, 2017 at 4:09:35 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.