In this article we will discuss the various methods that you can upload your HTML5 game to the internet for testing and for people to play. This is important as testing locally is not an ideal option since it will not work correctly nor give a true representation of your game (as explained here). If you have not yet set up the HTML5 target module, then you should read over the following articles before going any further:
- Setup The Micro Web Server For HTML5 Games
- The Global Game Settings For HTML5
- Debugging HTML5 Games
- HTML5 Issues And Differences
Assuming that your game is ready and you have set up the Web Server and got everything working as you wish, it's time to upload it to the internet for people to play!
Create The Game Files
To create your game files (assuming that you have everything set up correctly in the Global Game Settings), you simply need to click on the "Create Executable" button at the top of the IDE. this will open a file explorer for you to specify a save location for the files required to run your game. This would normally consist in an "index.html" file and a "html5game" folder. The folder holds the JavaScript necessary for your game, as well as all the game assets. note that you can change these names in the Global Game Settings should you need to.
Once you have these that's all you need to do from GameMaker: Studio, and you will need to upload both the index.html and the HTML5game folder to a server to get people to play it. We will now look at the various ways that you can go about this.
Using A Free Web Host
Another viable alternative for getting your game on the internet is to use a free web host. There are many of these available, but not all of them accept FTP uploads (more about this in a moment) and some of them have bandwidth mimits and advertising which can interrupt your game or prevent it running. This means that you should choose your host carefully and make sure it is appropriate to your needs.
In this article, we will cover one particular web host:
For other web hosts the process should be pretty much the same as outlined below.
Free Web Hosting Area
When you sign up for an account with this company, you can create a custom sub-domain or use a domain that you own. If you already have a domain registered you can go ahead and use that domain name for your site, but keep in mind that not all free hosts permit access to content through your own domain which means that you'll have to use the public URL they provide you if you are not using Free Web Hosting Area. You will then be taken to a page where you set up your account email and complete a captcha.
For the basics, that's all you have to do! You have a "webpage", ie: a space on a host server where you can put content, as well as a domain (or sub domain) to access it. You will need to look through the page details after signing up and take note of the FTP (File Transfer Protocol) information it gives you, as we'll need that in the next step.
Using Your Own Host
If you have your own domain and paid host, then you will need to know the FTP details for uploading the files. Most web hosts have these details available from the Control Panel screen, as shown in the example image below:
Once you find the section related to FTP access, either make a new FTP account or use one of the existing ones, but whatever you do you'll need the FTP login name, URL and password to upload your game correctly.
FIleZilla
You should now download to your PC a copy of the free and open-source FTP client, FileZilla: http://filezilla-project.org/ (Note that we say to download the client version as that is all that is needed to interface with your web host). After you have installed FileZilla, run it and you will see a local file explorer on the left and a blank page on the right, which is where all the directories and files of your website will be located. You now need to log in (from the FileZilla interface) using the FTP information that you got when you first set up the account. Now the right pane of the FileZilla client window will be filled with all of the files created along with the website.
Uploading your files from FileZilla is a very simple process. First create a new directory for your games on your web host in FileZilla by right-clicking in the right pane and selecting "Create Directory And Enter It". This will open a dialogue where you specify the new directory (call it HTML5Games or something appropriate) and then the directory will be opened in FileZilla for you. Now browse to the file location in the explorer pane on the left, then drag the HTML5 files into the right pane of FileZilla and they will be uploaded to this new directory.
To get people to access them, use the URL that the web host provides (or the domain URL that you are using), plus the folder name then the index.html, for example: http ://mcsweeneygames.orgfree.com/HTML5Games/index.html
Summary
Once you have uploaded your game files to a host site, a free host or your own, all you need to do is give people the link to the index.html and they can play your game. Once you are happy with this process, you can start to edit the index.html file after it has been created to fit in better with your web page. You'll find that it's relatively easy to re-position the game canvas and add the buttons, links and text that you see on other sites.
You should also be aware that you are not just limited to having your game hosted on your own hosts, as there are also many HTML5 games portals and hosting sites out there, like GameJolt or FGL. These sites have instructions on how to upload your games files to them, so they are not covered in this tutorial. Note too that many of these sites have their own API's which you can integrate into your games to get on-line highscores and other features using the JavaScript extension packages permitted in GameMaker: Studio. This means that your games can easily be adapted to different sites and even customer specifications (for an example of this, see the tutorial on Integrating The Kongregate API).