How to talk to the page your game sits in

1

Stats

3,823 visits, 6,410 views

Tools

Translations

This tutorial hasn't been translated.

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.

Published on 14 Dec, 2012. Last updated 19 Feb, 2019

This tutorial will show you how to communicate with the page that your game is sitting in, which could give you some pretty awesome options!

View the online demo HERE

Using Javascript in your index page, you can receive messages from your Construct2 game.

This opens up some very cool options for you! Imagine that for every level that your player reaches, you suddenly change the background image of your html page! Or maybe you want to keep score and lives in the HTML page rather than inside the game. Or maybe you want to apply some sort of css (maybe float a real html div across the page) based on some action that occurred inside the game! THAT WOULD BE COOL!!!

Well here is how you do it (and it's very easy!)

ONE THING TO CONSIDER -- What type of export are you planning??? I have only played with the standard HTML5 project export. I assume the Chrome store would be fine, but you will want to check about other export types before spending too much time on this in case it won't be relevant to your export type.

1) Double click your canvas and add the Browser object.

2) Using a text editor - Write your javascript code in a script block

-doing what it is you want your page to do. I wrote a very simple function that will take a number and depending on what number it is, changes the background color of the HTML body. -Not very useful really but illustrates the point. YOU CAN WRITE these functions using notepad, Visual Studio, pretty much anything. But you want this written ahead of time.

3) Back in Construct2 - in your event sheet

-when you want your HTML page thing to happen - you can call out to your javascript function like this. (Using SYSTEM, Go to URL)

Notice that I call to my page and send it a random number.

4) Export your project (HTML5 most likely)

Now find the index page that was exported and in the HEAD portion of your HTML simply insert the script you wrote!

Upload your game and viola! Interaction between your game and page.

FYI - Construct2 already sets up JQuery for you.. so you can go right ahead and use JQuery in your scripts... you dont need to mess with anything except adding your script to the head of your page. (or adding an external js sheet)

Capx : dl.dropbox.com/u/22869159/typer.capx

  • 0 Comments

Want to leave a comment? Login or Register an account!