Translations

Know another language? Translate this tutorial!

Stats

143 visitors
8K page views

Get/Set data from HTML page

Favourite 19 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!

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

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

Comments

1
gerris 2,518 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,687 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,426 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 962 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.