Get/Set data from HTML page

Stats

2,429 visits, 3,779 views

Translations

This tutorial hasn't been translated.

Tools

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

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