Tutorial 4: How to host, publish, share and embed your game

Welcome!

Here you can learn how to publish your game online, making it available for others to access, and how to embed your games into your teaching materials. 

For more details, please take a look at Construct 3 official manual here: https://www.construct.net/en/tutorials/publishing-web-10

Before you start

In order to present your Construct 3 games to your students or audience, you first need to host your games on the web. There are many different services where you can host your games on the internet for free. In this tutorial, we will help you learn how to publish your games in one of the best-known indie game publishing channels, itch.io, which is a more permanent hosting solution, and how to use Netlify Drop, which is a temporary hosting solution. 

Let’s get started!

Part 1 – Export your Construct 3 game into HTML5

First you need to export your game as an HTML5-build:

  • We recommend first making a save of your project-file, the .c3p-file, just in case. Click Menu > Project > Save as > ‘Download a copy’ to make a local save on your computer. This .c3p file can then be opened again in the Construct 3 editor.

Then do the following:

  • Go to Menu > Project > Export.
  • Choose Web (HTML5). This format will run in-browser when hosted, and is available in the free version of Construct 3.
  • Click Next, then Next. Remember to download the ZIP-file of your game!
Gif animation: Exporting your game as HTML5.

Part 2 – Host or publish the game online

But just downloading an HTML5 file on your computer does not mean the game is available online. To make it possible for people to actually play your game, you need to host the game. This means making your game available to play online, with its own URL that starts with HTTP:// or HTTPS://. 

Your options here are hosting it, on a domain you own or have access to, or publishing it, on a game publishing website. If you have access to hosting on your own website, you can go ahead and do that. We will go over to alternatives: temporary hosting, and publishing the game on itch.io.

Disclaimer: The options below are some options that we have found as of May 2020. But, as we know technology changes every day. If you found some errors in the below information, or found new ways of publishing the game online, please inform us at annakaisa.kultima (at) aalto.fi 

Option 1 – Temporary hosting

“Remote Preview”-option in Construct 3:

The “Remote Preview” function in Construct 3 allow you to instantly host your game. However, this only works when you have the Construct 3 game project currently running in your PC. It won’t work when your computer and Construct 3 is not on. You find more detailed information here:

https://www.construct.net/en/blogs/construct-official-blog-1/introducing-remote-preview-877

Netflify Drop

This service allows you to host your game for free for up to 24 hours.  Simply drag and drop your game’s HTML5 file (zip) and instantly it will give you a temporary URL:

https://app.netlify.com/drop

Option 2 – Publishing a game on itch.io

itch.io is a website and community for users to host, sell, and download indie video games and participate in game jams. In order to use Itch.io, you first need to create your itch.io account. It is free and very easy to setup: 

https://itch.io/register

Once you have an account setup, you can upload your project. 

  • Click your username on the top-right corner, and choose “Upload new project”
Screenshot: Upload new project on itch.io.

Now, you get to the upload page. Give your game a title and a tagline – a short description.

To make your game more marketable, upload an image to use as its Cover image – think of it as the game’s poster. Screenshot images also make it clearer to potential players what the game is about.

  • In the “Kind of Project” field, select the HTML option , and upload your HTML5 file (zip) by clicking the button “Upload file”.
  • Once the ZIP has been uploaded, check the box “This file will be played in the browser”

If you have made a mobile game, check the option “Mobile friendly” under Frame options. Otherwise, check the option “Fullscreen button” – it will let your players play the game fullscreen.

In the Details-window, please write information about the game, as well as due credit for any assets or collaborators you’ve worked with. Choose “No payments” unless you are going to sell your game.

  • Once everything is set, click the “Save & view page” button.
  • You will be redirected to the preview page. If everything looks good to go, click “Edit game” on the top menu and make sure to publish the game.

And that’s it! On your itch.io Dashboard – https://itch.io/dashboard – you can see the statistics for your game.

Share your itch.io game:

To share the game, simply copy its URL and share it with the world.

  • Your game’s url will be in the form: username.itch.io/game-name

You can also find Playable Concepts sample games at our itch.io page:
https://playableconcepts.itch.io/ 

Advanced itch.io tip 1: Disable scrolling 

If your game is played with arrow keys, your itch.io page will scroll with the game whenever the down- or up-button is pressed. To prevent this, you need to add the following code snippet into your html-file:

	<script>
	window.addEventListener("keydown", function(e) {
	 if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
	 e.preventDefault();
	 }
	}, false);
	</script>

To add it, unzip your project and open the index.html-file in an editor, such as Atom (or even Notepad). Scroll down to the <body> of your project, and paste that exact code without editing anything else. Save the file. Now it should not scroll.

Advanced itch.io tip 2: Genre, tags and metadata

To make your game discoverable on the itch.io-platform, we recommend making use of itch.io’s way of displaying games. The first is you should choose a Genre for your game – for example Educational. Second, you should choose appropriate tags for your game, such as short, or story-driven. Think of these as words that users might type in to search for your game.

Lastly, under Edit game, you can find a tab for Metadata. Filling in information here can make the game more discoverable as well, and provides information for itch.io’s statistics. 

Part 3 – Embedding your game

Now that your game has a home on the internet, we will go into some ways in which you can embed it into your materials or teaching:

Embedding your itch.io-hosted game

If you want to embed only the game (not the game description, backgrounds, etc):

  • Go to Itch.io > Edit game > Distribute > Embed game
  • Copy either the iframe embed code, or the Direct link to use in your materials.

Presentation software

Unfortunately, most presentation software (Keynote, PowerPoint, Google Slides) no longer support embedding games directly into the slides. The only thing we can do for now is to use a hyperlink. 

  • Go to Itch.io or your hosting site and copy the URL in the game’s web page
  • Or if you want to do it in a way to only show the game (not the game description, backgrounds, etc): Itch.io > Edit game > Distribute > Embed game > copy URL. This only works for the game that you developed and published. 
  • Create a hyperlink in the PowerPoint slide
  • Once you click the hyperlink, the game will start to load in your default web browser.

You can find your sample PowerPoint file here: https://drive.google.com/file/d/1bQxFSnwNdkHMEWn3lSvSwTpPc8oyVvbR/view?usp=sharing

If you found a way to embed games in PowerPoint, please do let us know so that we can further update this tutorial!

Google Site

You can build a simple website and use it during a lecture, or as part of your teaching material. To do so, you can use Google Site and embed the games there. 

  • Go to Google Site and start a new site.
  • On the right side menu, choose Insert > Embed.
  • Paste the game’s URL in the popup window
  • Place the game in the right position.
  • Click “Publish” button on the top-left corner. It will automatically give you the website address based on the title of the project. You can share this with your groups and students!

You can find a sample Google Site here: https://sites.google.com/view/playable-concepts-sample-page/home

Finally

And that’s it! Over the course of these tutorials you have learnt the very basics of making a game and sharing it with the world. If you found these tutorials useful, let us know, and share them with a friend!

To continue learning, you can head over to Scirra Ltd official Construct 3 tutorials:

https://www.construct.net/en/tutorials/learn-construct-next-steps-45

Good luck with your game making from the Playable Concepts team!