Construct 2 games are based on HTML5 technology, and as a result has excellent support for exporting games for the web. This guide includes some useful information to know when publishing Construct 2 games online.
Export templates
When exporting and choosing the HTML5 website option, you are also asked to choose a template. These are slightly different styles for displaying the game in a browser, and each are useful for different purposes. The way the game is displayed is also affected by the Fullscreen in browser project property.
Normal style shows fullscreen games taking up the entire browser window. Non-fullscreen games are shown at the top of the viewport and centered horizontally. An example is shown below.
Advert bar style is the same as Normal style, but places a bar down the side of the game. The game itself is shown in a frame. Fullscreen games use the entire game frame (excluding the side bar), and non-fullscreen games again appear at the top and centered horizontally in the game frame. Since some room is always reserved at the side, it can be used to show any other HTML content such as adverts, navigation, and more. Using HTML or integrating ad services is out of the scope of this guide; the option is targeted at advanced users who want to show their own HTML content alongside the game. The bar can be set to appear at any edge of the screen, and have a custom size. An example of having a 150px top bar is shown below. The small white text above the game is the placeholder for additional HTML content.
Embed style simply removes all margins and scrollbars from the browser, and aligns the game top-left. This makes it good for embedding within an iframe at a fixed size. Note that when using a fullscreen game, this is identical to Normal style: in both cases the entire browser viewport is used. Embed style is only useful for non-fullscreen games, so that the page can be shown in an exactly sized iframe without any scrollbars appearing. An example is shown below.
Running exported games
Normally, games do not run in a browser after exporting to disk. If you double-click the index.html file from Windows Explorer, the game will start using a file:/// URL instead of a http:// URL, since the game is on disk and not on a server. For security reasons browsers have some tight limitations on what can be done in a web page from a file:/// URL, and these usually stop Construct 2 games from working. The best workflow is to test by previewing in Construct 2 during development, and then immediately publish the game to the web after exporting. If you run a game from disk you might see a messagebox reminding you of this ("exported games won't work until you upload them"). If you need to test on mobile, you can use preview-over-Wifi instead of having to export repeatedly.
In Google Chrome, it's possible to circumvent the browser security limitations and still test an exported game from disk. First close all instances of Chrome, then use the Run dialog (Windows + R) to launch:
chrome --allow-file-access-from-files
With Chrome open in this mode, you should be able to open your exported index.html file in Chrome and have it work correctly. Note the messagebox reminder might still appear (it can be ignored in this case), and other features might still not work, such as making AJAX requests to real web servers. Using this mode should not normally be necessary, but in some cases this can be useful to test an exported game quickly without having to publish it. Note if you intend to run a game locally on a computer, the node-webkit export option is a better option.
Uploading to the web
It's best to have your own server to host games on. While you can host games on free hosts like Dropbox, they tend to come with bandwidth restrictions. You wouldn't want your game to stop working as soon as it became popular! A cheap static file host would be considerably better, and are easy to find. However the specific steps to upload your game depend on the host you have. It would be best to seek help on this step with whichever host you're using. Some common ways of uploading the files are with FTP, web forms on the host's website, or Remote Desktop.
If you're only making small demos to show a few friends, a free host should suffice. Here are some guides to help get you going:
Upload your game to Dropbox
Upload your game to Google Drive
Upload to the Scirra Arcade (note when uploading to the Scirra Arcade, you need to use the Scirra Arcade export option in Construct 2, not the HTML5 website option).
Once uploaded, you should have a link you can share and start publicising your game! If you've designed your game with touch controls and multiple screen size support, it ought to work nicely on mobile browsers as well.
It's common to make a mistake uploading. If you forget to upload a file or folder, the game could break. If your game does not seem to work once uploaded, check for browser errors and hopefully there will be a useful message (e.g. "myfile.png returned 404 not found", indicating you forgot to upload myfile.png).
Server setup
If you have your own server you should make sure the right MIME types are set in order for the game to work properly. This is described in the manual entry about setting up MIME types.
Embedding
This step is only necessary if you want to embed your game on to another web page. Otherwise you can just run the game directly from its own web address.
The best way to embed a game is with the HTML iframe element. Simply point the iframe to the web address of your game. For example:
<iframe src="http://www.mywebsite.com/mygame" width="600" height="400" />
This will create a fixed size iframe (600x400) inside of which the game will appear. If it's a fullscreen game, it will automatically scale to fill whatever size the iframe is set to - useful to fit the game to whatever size the iframe needs to appear on the other website. If it's a fixed size game, you should have chosen the embed template style, and make sure the width and height attributes of the iframe tag match the size of the game.
Note if the game is embedded on a different domain to the one it is hosted on, cross-domain security restrictions may affect the game. For example AJAX requests or images loaded from a URL must have the appropriate CORS (Cross-Origin Resource Sharing) set up, otherwise the browser will block the request. Generally this refers to responding with the Access-Control-Allow-Origin header in the server's HTTP response.
It's possible for games inside iframes to switch in to fullscreen mode, where it takes up the entire monitor. To support this, your game must not be fixed size - it has to use a fullscreen mode. Then use the Browser object's Request fullscreen action in your game. Finally, you must add the allowfullscreen attribute to the iframe tag like this:
<iframe src="http://www.mywebsite.com/mygame" allowfullscreen="true" width="600" height="400" />
You might also want to cover some vendor prefixes since it's a relatively new HTML5 feature:
<iframe src="http://www.mywebsite.com/mygame" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" msallowfullscreen="true" width="600" height="400" />
With all that in place, your iframed game should now be able to "break out" in to full screen mode!