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!