How to embed a Construct 2 project into your website.

2

Index

Tagged

Stats

16,867 visits, 31,034 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

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

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).

  • 4 Comments

  • Order by
Want to leave a comment? Login or Register an account!
    • [-] [+]
    • 1
    • co3's avatar
    • co3
    • 1 points
    • (0 children)

    After embedding the game to my site, long pressing it on an iphone on safari causes it to highlight the game. Is there anyway to disable the highlight functionality on ios in the iframe code or the game?

  • I have iFrame using C2 session to display on my website. Within the session I have a button that I want to take the user out of the iFrame into the website login page. Tried Browser...self, parent, top but it all remains in the iFrame. How do I get out of the iFrame back to webpage??? Thank you :)

  • I have my game embedded in an iFrame on a PARENT webpage and I need to get a variable from the PARENT webpage into my construct game that lives inside an iFrame on the PARENT webpage? I need to SET a Construct Global Variable Value with the value of a variable located in the PARENT Window?

    • A simple solution could be to add a query parameter to the game page url/src of the iFrame, then use C3 to pick up that query parameter with the Browser object (See, en.wikipedia.org/wiki/Query_string).

      For example, http...my-website.com/my-game.html?variable_name=some_value

      However, if the variable is not present when the url is created. You may have to use postMessages to communicate information between the iframe and the parent page (See, developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).

      Alternatively, data can be passed via other intermediaries such as iFrame element attributes, LocalStroage/IndexDB, AJAX requests.