Page 1 of 3

Highscore Table

PostPosted: Sat Aug 02, 2008 8:32 pm
by Flamespectre
This is a basic tutorial for creating a very basic highscore table.

- A webserver with PHP/MySQL support
- Basic PHP and MySQL understanding
- Basic understanding of how Construct works

The Construct part:
I made a .cap file in case my directions might be a little hard to understand so you can check out a working example.
Download it here

Create a new Direct-X project and add a variable named "Clicks" with a starting number of zero. Create an Edit Box and set the initial text to something like "Enter your name". Now create two buttons, rename them to "Click" and "Submit", change the text for "Submit" to "Submit" and go to the event sheet editor. Create a new "Always" condition and add an action for the "Click" button to set button text to "round(global('Clicks'))".

Note: "set button text to "round(global('Clicks'))"" makes the button display the number of times it has been clicked.
Note: global('<variable name>') is used for global variables.
Note: round() removes all decimals, this isn't really necessary but just to make sure that the submitted score looks like 1234 and not like 1234,00.

Create a new event for when the "Click" button is clicked and a new action that adds 1 to the "Clicks" variable. Go back to the layout editor and create a new HTTP object, then return to the event sheet editor.

Note: The HTTP object enables communication over the internet, at least one-way. I have yet to discover how to create a working both-way connection.

Create another event for when the other button is clicked and add a condition to check that "Clicks" is not zero. Then add a few actions for the HTTP object. Add two strings, one with the argument name "name" and the argument "EditBox".

Note: It is very important to not add the quotes to "Editbox" since it will use the contents of it for the variable.

The other string should have a name of "score" and an argument of "round(global('Clicks'))". The next last action to add is the post request action, set it to submit to your PHP file.
Mine is "http://localhost/scores.php?submit", you might want to change it later when we've set up the PHP file.
Lastly, add an action that resets the score when it has been submitted, that way a person can't send their score twice. You might also want to add something that indicates that the score has been submitted, but that's not necessary.

The PHP Part:
For this to work you will need a webhost who supports PHP and MySQL, I recommend WAMP if you want to set up your own.

Create a file called score.php containing:

Note: This is the file that displays the highscore, and also the file that you should link to in your game.

// mySQL details
$host = "localhost";
$user = "root";
$pass = "";
$db = "highscores";

// Checks if everything has been submitted
if (isset($_POST['name']) && isset($_POST['score'])) {

$name = $_POST['name'];
$score = $_POST['score'];

// Stores the IP adress of the submitted score (in case of cheating)

// Connects to the database
$connection = mysql_connect($host, $user, $pass) or die ("Unable to connect!");
mysql_select_db($db) or die ("Databasen kunde inte hittas!");

// Submits the info
$query = "INSERT INTO highscores(name, score, ip) VALUES('$name', '$score', '$ip')";
$result = mysql_query($query);

// Closes the connection

// Connects to the database
$connection = mysql_connect($host, $user, $pass) or die ("Unable to connect!");
mysql_select_db($db) or die ("Database not found!");

// Retrieves the info and sorts it
$query = "SELECT * FROM highscores ORDER BY score + 0 DESC LIMIT 10";
$result = mysql_query($query);
$count = 1;

// Displays names and score
if (mysql_num_rows($result) > 0) {
while($row = mysql_fetch_row($result)) {
<b>#<?= $count ?></b>&nbsp;|&nbsp;Name:&nbsp;<?= $row[1] ?>&nbsp;|&nbsp;Score:&nbsp;<?= $row[2] ?><br />
$count += 1;

// Closes the connection

It won't work just yet, it will need a database to submit to. Open up your favorite MySQL manager and execute the following code:

[code:147dh0cl]CREATE DATABASE `highscores` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `highscores`;

CREATE TABLE `highscores` (
`id` int(11) NOT NULL auto_increment,
`name` varchar(255) NOT NULL default '',
`score` varchar(255) NOT NULL default '',
`ip` varchar(255) NOT NULL default '',

This should work, It worked when I tested it with the latest version of Construct (v96.3) but if it doesn't work for you I'll happily answer all questions in this thread.

Re: Highscore Table

PostPosted: Sat Oct 04, 2008 8:37 am
by Sagal
I dont know how to do that MySql part in wamp it always gives me error so could someone give me step on step tutorial?

Re: Highscore Table

PostPosted: Sat Oct 04, 2008 8:55 am
by Sagal
Meh i just cant get this workin

Re: Highscore Table

PostPosted: Mon Oct 06, 2008 1:02 pm
by Flamespectre
If you open up phpMyAdmin, (click the white semicircle and select phpMyAdmin) below the logo there's a button that says SQL, click it and copy-paste the code there and it will set up the database for you.

Re: Highscore Table

PostPosted: Tue Oct 07, 2008 10:59 am
by Sagal
I got it almost working i think^^ But Il look more into it when the game is ready but ty for this tutorial!

Re: Highscore Table

PostPosted: Tue Oct 07, 2008 1:51 pm
by Flamespectre
No problem, good luck with the game

Re: Highscore Table

PostPosted: Fri Oct 17, 2008 6:52 am
by dfyb
hmm.. your download link seems to be broken

Re: Highscore Table

PostPosted: Fri Oct 17, 2008 4:01 pm
by Flamespectre
[quote="dfyb":2jzo87tv]hmm.. your download link seems to be broken[/quote:2jzo87tv]

I also noticed that I started the PHP tag with "<?" and not "<?php", this is not valid by default in wamp, so if the script isn't working for you, try changing "<?" to "<?php" in the code.

Btw, this .cap has been tested with the latest-latest version (v97.5) of Construct

Re: Highscore Table

PostPosted: Wed Nov 05, 2008 2:35 pm
by Tom
Good tutorial but keep in mind that if the user finds out the URL the form is posted to (fairly easy to do) then they can "post" their own high scores, as a hack. But as a foundation for a high score board or a high score board for simple games it's a good introduction tutorial!

Re: Highscore Table

PostPosted: Fri Nov 14, 2008 5:08 pm
by shama
Information that might be useful to others, because it had me stumped for a while:

The problem I had was how to get the HTML written out by the PHP back into Construct. To cut a long story short, my solution was:
I used the 'download' object to download the PHP page to a local file ('scores.html'). You can then use the event 'download complete' to detect when it is available, and display it somehow.

I tried to use the HTML object to display this local file, but despite its name it doesn't actually like fully formed HTML (i.e. a file that begins <html>). It appears to only accept a subset of HTML tags. So to remedy this you change your server side PHP file to only generate the tags recognised by the HTML object, and to not be a 'proper' HTML file.
Tags I tried that didn't work:
<P> <br /> <table> <tr> <td> <style>

So now I have a fully working server-stored highscore table, but one that I can't really change the appearance of much (font size/colour) or put into a table. Better than nothing!