Almost our HTML5 game is created by construct 3 engine. This guide includes some useful information to know when publishing Construct 3 games online.
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. 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.
UPLOADING TO THE WEB
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.
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).
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.
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 (600×400) 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.
<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!