Hello guest! Login or Register

Similar tutorials

Webstorage - how to save ingame information

More by this author

This is the authors current only tutorial. Be sure to upvote and comment on it if you like it!



Other reading

Let's make a calculator!How to edit your Index Page (Export Game Page)3D spritesPhysical Bike!Drawing with the SDK in Construct 2

Tutorial stats

  • 23.9K views
  • 14 September 2011


AJAX Example with Construct 2

30 votes

Construct 2 has an AJAX object that will allow you to make a request to a target page in order to return the resultant data to AJAX.LastData where we can use the information collected.

In this tutorial I'm going to show you:
1. How to set up a simple interface that can form as the boilerplate for future tutorials.
2. How to set up a simple php file (we can also use a simple .txt file)
3. How to connect the AJAX object to make a call to our target page then return it to our HTML5 page.

If you are already familiar with Construct 2, you can skip step 1. The AJAX stuff is after building the interface.

Here's an example of what we're going to make:


It's located at:
http://www.jtadeo.com/scirra/ajax/ajaxexample1/

If you click the image, it will do the following:


1. It will make a call to the target page. In our example the page is called ajaxexampleGET.php. It can really be any page that will render output to a browser window. For example, xml, txt or html.

2. When the call to the page is done, the information collected is stuffed into the AJAX.LastData object where we can then consume it in our game.

A critical part about getting data from a page is that there must be data to be collected. For example, if we go to:

http://www.jtadeo.com/scirra/ajax/ajaxexample1/ajaxexampleGET.php

You will notice that it just spits out the following information:

That is basically what we're after and we want that information in our HTML5 page.

This is the same AJAX technique I used to create Cash Roll, a game I originally created for the iPhone and now also available as an HTML5 game.

You can check it out at:
http://www.jtadeo.com/scirra/cashroll/

This tutorial is on multiple pages

Total of 6 edits. Last edit by Ghengis on 05 November 2011 6:38 PM
Posted by

3
Wink (4.6K) Wednesday, September 14, 2011 at 4:46:51 AM
Outstanding! Great tutorial Ghenis. Lots of pictures :) I learn faster visually. I was going to wait until next payday to purchase a license but after playing around with Construct 2, reading great well written tutorials like yours, and seeing all the great community support here I'm going to buy a license this pay day. :)
1
Mehtab (856) Wednesday, September 14, 2011 at 7:56:19 AM
awesome tutorial mate!
3
Ashley (48K) Wednesday, September 14, 2011 at 2:52:25 PM
Great work! This is an excellent tutorial, thanks very much. Just one minor point to note: the first time you click the object the text is set to nothing. It's because the request takes a moment to complete so AJAX.LastData is not set to anything immediately after the 'request' action. It's best to set the text in an 'AJAX: On Completed' event, which is when the LastData expression is set.
2
Ghengis (2,499) Wednesday, September 14, 2011 at 3:49:21 PM
Thanks everyone for the kind comments.

Ashley, that is a very good point. I'll update the tutorial.
1
prinsukun (1,297) Thursday, September 15, 2011 at 3:37:40 AM
thank you so much for this a great tut =D
1
Kujisoft (462) Sunday, September 18, 2011 at 12:53:27 AM
I waited for that, thanks a lot for the tutorial ! :]
1
vidi (1,869) Tuesday, September 20, 2011 at 5:11:20 PM
I agree it is an excellent tutorial. Thank you for this! :)
1
chrisbrobs (2,779) Saturday, September 24, 2011 at 11:07:05 PM
10 out of 10 for this guide!
0
alexh (205) Thursday, October 06, 2011 at 11:09:20 PM
great tutorial and easy to follow but can get it to work
0
nano2001ac (731) Friday, October 07, 2011 at 9:36:08 PM
Thank you for this great tutorial.

It would be wonderful if some day is extended to learn how to implement a simple high score system like you have in cashroll.

I know Construct Scirra is not a place to learn programming, nevertheless I think a high score system is a basic thing to be implemented in any game, so I am fighting with tutorials like this:

http://www.unifycommunity.com/wiki/index.php?title=Server_Side_Highscores

But I don“t get the way to make it work at the moment. I will keep learning. Regards.
0
Vicu (345) Saturday, October 08, 2011 at 2:25:58 PM
Link don't works(((
0
nano2001ac (731) Saturday, October 08, 2011 at 6:40:07 PM
Sorry for this. I wrote some best scores in your cashroll list. I know now why the md5 hash is a important thing. :(
0
Ghengis (2,499) Saturday, October 08, 2011 at 8:23:29 PM
Comment by nano2001ac

Sorry for this. I wrote some best scores in your cashroll list. I know now why the md5 hash is a important thing. :(
Hi nano2001ac,

No probs, it's a very simplistic scoring system and at this time I haven't had much time to clean up the code. That being said, there are some techniques that can employed to increase security and to mitigate the score issue.
0
SocialLie (9.9K) Tuesday, October 11, 2011 at 1:01:00 PM
This can be very useful.
0
habiplay (312) Tuesday, October 25, 2011 at 12:55:52 PM
very good tutorial, it is well structured.


You need to Login to post a comment!
Login to your account, or register a new account