How to Upload a Game to the Internet

Features on these Courses

Translations

French
Portugese (Brazillian)

License

This tutorial is licensed nether CC By 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Construct projects are based on HTML5, which makes them perfectly suited for web publishing. This guide includes some useful information to know when publishing Construct games online.

To publish to web, use the Web (HTML5) option when exporting. When the export finishes, you'll get a zip file which contains all the files to upload.

Exported games won't work until you upload them

Games will not work if y'all run them from disk. If you extract the exported zilch to your computer and double-click index.html to run it, the game will start using a file:/// URL instead of a http:// or https:// 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 folio from a file:/// URL, and these usually finish Construct games from working. The best workflow is to examination by previewing in Construct during development, and so immediately publish the game to the web after exporting. If you run a game from disk y'all might meet a messagebox reminding you lot of this ("exported games won't work until yous upload them").

If you lot really need your game to run from the desktop, use a desktop export option instead. If you need to exam on mobile, you can apply Remote Preview instead of having to export repeatedly.

Local hosting

Advanced users might desire to consider running a local HTTP server with a server like nginx or Caddy. These are relatively easy to gear up to serve the contents of a folder on your figurer at a URL like http://localhost:8080. And so you lot can only re-create the exported project to the server's folder, and load it in a browser. The game will work since it is running on a HTTP URL.

Uploading to the web

You volition need a web server to upload your game to. If y'all don't accept i, there are many services where y'all tin can hire a cheap static file host. The specific steps for uploading files to your server depend on your host. If you need help finding out how to practice that, contact your host. The procedure sometimes involves tools similar FTP, Remote Desktop, or a tool on the host's website. Alternatively you can export to the Scirra Arcade which hosts your game for you.

There are lots of possible services out there yous could use. One handy one is Netlify Drop, since it provides a really quick way to get started: drag and drib in a folder of files for instant hosting.

Once uploaded, you lot should have a link y'all tin can share and get-go publicising your game! If y'all've designed your game with touch controls it ought to work nicely on mobile browsers likewise.

Information technology'due south common to make a fault while uploading your files. If you forget to upload a file or folder, the game could interruption. If your game does non seem to work one time uploaded, check for browser errors and hopefully there will exist a useful message (e.chiliad. "myfile.png returned 404 not found", indicating you forgot to upload myfile.png).

Setting upward MIME types

For all features to piece of work correctly, your web server should accept the right MIME types prepare. This is a way for associating file extensions (similar .png) with a content type (similar image/png). If the server does not know near some file extensions that Construct uses, it can return 404 Non Constitute for the file, or interpret the file incorrectly and decadent it. For more data see the transmission entry on MIME types.

Utilize secure hosting

Many Construct features require secure hosting to work. This means hosting your website on HTTPS (with https:// in the URL), rather than insecure HTTP (with http:// in the URL). For example offline support, fullscreen, geolocation admission, photographic camera/microphone access, and several other features all require HTTPS hosting to work correctly. It is probable in hereafter even more features will require secure hosting.

These days whatsoever new server you set up should be secure from the start. If yous accept existing insecure spider web sites, you lot should showtime updating them to be secure.

If your website is non already secure, contact your host for support in making sure information technology is secure. You may need to pay to purchase a certificate. Alternatively the Let'due south Encrypt service allows you to get certificates free of charge.

Domain lock

If you lot want to limit your game to simply working on certain websites, y'all tin can simply compare the Browser.Domain expression in the Browser object. For case if you host on https://www.mywebsite.com/mygame/, the Domain expression will exist www.mywebsite.com. Y'all tin make the game refuse to play if this value is non from a website you control. (Note that preview mode runs on preview.construct.net, and so y'all should probably permit this domain also!) This makes it slightly more hard for someone to copy your game. Annotation this cheque - any whatever other kind of check yous implement - tin can nonetheless be circumvented. Every bit with many security issues, the goal is mainly to make it more difficult to copy, rather than making information technology completely impossible (which is oft infeasible).

Cantankerous-domain requests

If your game loads content from another domain, this is called a cross-domain request and some security limitations can bear on whether the request is allowed. For example if your game is hosted on mywebsite.com, and tries to load content from otherwebsite.com, the request might exist blocked and the load may fail. This can affect AJAX requests, loading images in to objects similar Sprite, playing videos, or any other time yous load content from a URL.

Browsers limit requests according to their domain, scheme, and port. Together these are referred to as an origin. Requests to other origins require Cross-Origin Resource Sharing (CORS) to exist set, otherwise the browser may be blocked. Typically this involves sending the HTTP header Admission-Control-Allow-Origin in the response of the server hosting the content. If this header allows the request, it tin succeed. The requests can be limited to certain origins, or you can utilize the post-obit header to allow requests from whatever server:

Access-Command-Allow-Origin: *

Don't exercise this for annihilation security sensitive (like profile data) since it allows the content to exist accessed past any website on the Internet! All the same it's commonly safety for static files that you simply want to share across domains.

Embedding

If you desire to embed a game within another spider web page, you can display it using an iframe element. Simply point the iframe to the spider web address of your game. For instance:

              <iframe src="https://www.mywebsite.com/mygame/" width="600" height="400" scrolling="no" noresize="noresize" />

This will create a fixed size iframe (600x400) inside of which the game volition appear. Past default the game will automatically scale to fill whatever size the iframe is prepare to. However if it's a fixed size game, make sure the width and height attributes of the iframe tag match the viewport size of the game.

The scrolling and noresize attributes are necessary to ensure the iframe displays at the right size on some versions of iOS.

Assuasive fullscreen

It'south notwithstanding possible for games inside iframes to switch in to fullscreen mode, where information technology takes up the entire display. To support this, your game must non exist fixed size (Fullscreen mode must not be Off). And so use the Browser object'southward Request fullscreen activeness in your game.

Finally, you must add the allowfullscreen attribute to the iframe tag like this:

                <iframe src="https://www.mywebsite.com/mygame/" allowfullscreen="true" width="600" acme="400" scrolling="no" noresize="noresize" />

With all that in place, your iframed game should now exist able to "pause out" in to total screen mode!

Sandboxing

If y'all run a games arcade or otherwise want to ensure that games are isolated from the parent page, the most important point is to run the games on a different origin to the parent page. For example if the parent page is on https://www.myarcadesite.com, the iframe should bespeak to games hosted on some other origin like https://games.myarcadesite.com. The browser'due south same-origin security policy will prevent games beingness able to admission any storage or content on the domain www.myarcadesite.com.

For further isolation, you can use the sandbox attribute of the iframe tag. This allows for farther locking down of capabilities similar opening popups, navigating the tiptop frame, then on. For more than data see the iframe tag on MDN. At a minimum the sandbox attribute must incorporate let-scripts for the game's JavaScript to run. If the game is on a different origin to the parent page, y'all tin can also employ allow-same-origin.

Decision-making framing

You may wish to limit which websites are immune to display your game in an iframe. Alternatively you may wish to block the ability to brandish your game in an iframe at all, ensuring information technology can only be played when directly visiting its URL.

In modern browsers, you lot tin control this past sending a Content-Security-Policy HTTP header with a frame-ancestors directive. For instance you tin can set this to 'none' to cake framing completely, or specify an origin to allow just that page to display the content in a frame.

For older browsers you can achieve similar results with the X-Frame-Options HTTP header.

garvinposixed.blogspot.com

Source: https://www.construct.net/en/tutorials/publishing-web-10