Translations

Know another language? Translate this tutorial!

Stats

13.5K visitors
60.4K page views
5.2K translation visitors
17K translation page views

Tips on publishing HTML5 games to the web

Favourite 89 favourites
Tutorial written by AshleyOriginally published on 26th, September 2013 - 1 revision

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.

Normal style export


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.

Ad bar style export


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.

Embed style export

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!

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

10
RandomExile 12.1k rep

Holy fudge that takes the mystery out of web publishing! Huge thanks, favorited!

Thursday, September 26, 2013 at 4:13:19 PM
4
RetrySoft 1,811 rep

Great! tips

Thursday, September 26, 2013 at 4:55:48 PM
11
austin 6,337 rep

In addition to Google Drive / Dropbox / Scirra Arcade, I have to plug Clay.io :) clay.io/development-tools

There's a tutorial for adding your game to Clay.io here: www.scirra.com/tutorials/349/publishing-your-game-to-the-clayio-marketplace

Thursday, September 26, 2013 at 5:38:01 PM
3
onzephyr 9,937 rep

Fantastic tips.

Thursday, September 26, 2013 at 6:59:54 PM
5
AbelaNET 14.7k rep

Thanks for the tips. You just solved a mystery issue I had related to cache. Thanks once again.

Thursday, September 26, 2013 at 8:44:35 PM
2
divaweb 2,684 rep

Thank you so much! It's like you read my mind to discover the tutorial I wanted to see next :)

Thursday, September 26, 2013 at 10:20:17 PM
3
Lordshiva1948 40.3k rep

yep thank you very much

Friday, September 27, 2013 at 8:15:42 AM
2
Daggio 5,326 rep

great tutorial! thanks Ashley

Sunday, September 29, 2013 at 4:55:13 AM
2
BlindMusketeer 2,946 rep

hi guys , if you want to publish a game of yours online and know where , you can submit your creations here at my site : games4galaxy.com

Wednesday, October 02, 2013 at 11:28:50 AM
2
jocimar 987 rep

nao estou conseguindo exporta meu projeto para html5 quando tento exportar apareci uma menssagem falando sobre o java mas eu ja tenho ele estalado

Thursday, October 10, 2013 at 10:06:23 PM
2
mbuck 900 rep

This was very helpful. Thanks for posting.

Thursday, December 19, 2013 at 4:15:10 PM
2
Squeakydave 828 rep

If you want a transparent background it seems like you need to edit the index html file of the exported project and change the background colour from black to transparent.

body {
background-color: transparent;
color: white;
padding: 0;
margin: 0;
overflow: hidden;
}

Wednesday, January 22, 2014 at 4:10:37 PM
0
KoolEcky 16.2k rep

Good on you @Ashley for dishing out the hints and tips on how to publish HTML5 games to the web.

Thanks a lot to @Austin for additionals from his quarter.

Friday, October 28, 2016 at 2:33:37 AM
0
haacker123 202 rep

i exported as html5 games but cannot find my html5 file in the file

Sunday, January 22, 2017 at 9:03:30 AM

Leave a comment

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