Get/Set data from HTML page

2

Stats

4,305 visits, 6,482 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 17 Apr, 2012. Last updated 19 Feb, 2019

In this tutorial I will show you how to send data from the HTML page which hosts the Constuct 2 game (canvas), to the game itself, and vice versa.

This is handy for setting values like:

Toggle the sound from the HTML page

Setting user data like character health, stats, etc…

Check the demo here:

xgamedev.com/tutz/htmltofromcanvas

Download the files here:

xgamedev.com/tutz/htmltofromcanvas/htmltofromcanvas.zip

Ok, let’s get started:

We will be doing 2 actions here:

1. Send data from the game to the HTML page. (timer values)

2. Get data from the HTML page. (click counts)

In Construct:

Add WebStorage to layout

Add a textbox to display for the data from the HTML page.

Create an event which updates the “timer” key in WebStroge every 1 sec.

Create another event which checks if the “clickcount” key is in WebStorage, if so, update the textbox with this value.

That is it for construct.

Now the HTML page:

Timer script:

Increment click count script:

And the body of the HTML page:

Please note:

Your game will not work if you run it from the file directly or from Construct, it must be uploaded to a server (to my knowledge). If this is an issue for you, use localStorage instead.

That is it!

  • 0 Comments

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