Translations

Know another language? Translate this tutorial!

Stats

1,261 visitors
4.8K page views

Get/Set data from HTML page

Favourite 11 favourites
Tutorial written by JACLEMGOOriginally published on 17th, April 2012 - 1 revision

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:
http://www.xgamedev.com/tutz/htmltofromcanvas/

Download the files here:
http://www.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.c2 event sheet


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:timer script


Increment click count script:
And the body of the HTML page:
Open full size image

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!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Comments

0
gerris 2,488 rep

Nice! I'm using localStorage in a Christmas calendar I'm working on, 24 different games, and a bunch of stored variables. Keep in mind that localStorage is for your whole domain, variables from each game should have unique names: "christmasPuzzleScore" not "score".

Thursday, April 19, 2012 at 10:23:15 AM
0
EyeHawk 7,386 rep

Nice Work!! Thanks a bunch, I've been looking specifically for this solution! :)

Thursday, June 21, 2012 at 8:15:46 AM
0
joshwhitkin 1,420 rep

Very cool! Thank you. FYI the funcitonal examples aren't accessible. The hosting site xgamedev.com is "under construction"

Sunday, July 15, 2012 at 12:48:00 PM
0
DesAigles 932 rep

Thank You merci, this is helping...

Friday, April 12, 2013 at 11:54:39 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.