Brief Outline
This tutorial explains how to embed/display your Construct 2 creation in/on your website with the use of an iframe. It is similar to the tutorial titled
How to embed an HTML5 game on your website but gives a little more explanation.
.
.
Contents:
-Video
- The Scirra Arcade Iframe
- Understanding the concept.
---- 1. The Project
---- 2. Web Hosting
---- 3. Web Address
- Understanding Iframes:
- Tutorial:
---- Step 1.
---- Setp 2.
---- Step 3. <- Iframe code
Video Tutorial
View the video here (Youtube)
.
.
The Scirra Arcade Iframe
As has been explained elsewhere. Once your Construct 2 project has been uploaded to the Scirra Arcade, you are able to retrieve a section of ‘html’ coding which you can use to embed your project on to your site or elsewhere.
.
.
But what if you don’t want to upload your project to the Scirra Arcade?
What if you want to host the project yourself?
Understanding the concept.
Firstly to give you an idea of the concept of viewing your Construct 2 project online, we’ll take the Scirra Arcade as an example. If you already understand the concepts of needing a web host and web address to have an online project please continue to a later section of this tutorial.
So, lets explore what happens when you upload your project to the Scirra Arcade.
1. The Project
When you export your project, it is normally published into a single folder containing a set of other folders and file needed to run your game/app. You can use the index.html file to run your game offline with a web browser from that file.
.
.
However if you want to run it online, you need to somehow put or ‘host’ these files and folders to a hard drive with internet access (i.e. web host/web server).
The files and their position to one another, need to be maintained for your project to correctly locate your assets (images, sounds).
When you export your project ‘To the Scirra Arcade’. Construct 2 automatically zips or archives the above file into an archived file. Making it easier to upload.
2. Web Hosting
When you upload this archived project to the Scirra Arcade, you are requesting and being allocated ‘web space’ available on the web hosting servers used and paid for by Scirra. Think of this as putting your project into the hard drive of a computer which has a constant connection to the internet, making it accessible online.
.
.
3. Web Address
When we connect to the internet we can use an internet browser to ‘browse’ the hard drives (servers) connected to it as well; provided we have permission to do so. This is similar to browsing around the hard drive of your own computer, but not quite the same.
Unlike your desktop where you have a list of files to peruse at your leisure. For online webhosting you need the correct address to point your to ‘hosted’ files. This is where web domains and web addresses come in. They point your internet browser to connect with the correct server (think files on hard drive) to start sharing information; allowing you to view the correct information.
.
.
Therefore, after uploading your project (archived) to the Scirra Arcade it is saved on the Scirra Arcade servers. So when someone with the correct web address (e.g. scirra.com/arcade/games/addicting-shooter-games/000/%3Cyour-game%253E) uses their web browser to find your game, they are directed to the project you uploaded.
Therefore to run your project online you need:
- A completed HTML5 Construct 2 project
- Webhosting (Space online to host your files)
- Web address (Web domain to point to your webhosting).