This is a short example on loading data from a database into thinking worlds and saving it back again, this is a rather complex example and not for the faint hearted, there are a lot of code examples and some prior knowledge of HTML, PHP, SQL and CScript would help, but is not required. This code has been written for my example, all variables and some code will need to changed for your own deployment.
Loading external Parameters
Firstly I will cover the c-script function for retrieving the values,
figure 1.0
ExternalParamValue( String parameterName )
When calling this function you will need to pass the parameter name you wish to retrieve from the TW_Applet.php (I will cover writing these out later) and a variable to store the returned value, for example,
figure 1.1
- Code: Select all
string tempStringVar := "Number"
tempStringVar := ExternalParamValue( tempStringVar )
This will retrieve the Number parameter and store the returned value in tempStringVar.
Parameter format
Our engine is looking for the following line within your TW_Applet.html file, so based on our previous example (figure 1.1) the number 34 will be stored in the tempStringVar.
figure 2.0
<PARAM name="externalparams" value="Number-34">
However, hardcoded values are rather useless, what we would like to do is dynamically generate the externalparams, either from the a database or some other source.
Our example will be loading the values from an external mySQL database, and construct the externalparams, depending on the values returned.
Connecting to the database
My database is named JavascriptTest, and my table will be Players, I am running my server locally on localhost with default username root and no password.
figure 3.0
Number INT
Name STRING
Age INT
Score INT
The code to create a connection to the database is stored in dbConnection.php (figure 3.1) and referenced from within both the saveGame and loadGame.
figure 3.1
- Code: Select all
<?php
//Connect to the server, PARAMETERS(URL, Username, Password)
$connection = mysql_connect("localhost","root","");
//Select the database
mysql_select_db("JavascriptTest");
?>
Loading from the database
I won’t talk too much about this file, loadGame.php (figure 4.1) this is basically running a selection on the database and returning in the parameter format (figure 4.0) .
figure 4.0
<PARAM name="externalparams" value="Number-1,Name-Gary,Age-23,Score-100">
<PARAM name="externalparams" value="Number-2,Name-Sky,Age-20,Score-500">
<PARAM name="externalparams" value="Number-3,Name-Alan,Age-23,Score-400">
<PARAM name="externalparams" value="Number-4,Name-Gregg,Age-23,Score-600">
<PARAM name="externalparams" value="Number-5,Name-Gary,Age-23,Score-340">
However, it should be noted that the engine will only load the last externalparams. For any extra information check the comments inside the file or (figure 4.1).
figure 4.1
- Code: Select all
<?php
//Include Database connection
include 'dbConnection.php';
//SQL to select the table
$sql = "SELECT * FROM players";
//Store the query results
$queryresult = mysql_query($sql) or die (mysql_error());
//Write out each parameter returned from the query
while($row = mysql_fetch_assoc($queryresult)){
//Store number locally
$Number = $row['Number'];
//Store name locally
$Name = $row['Name'];
//Store age locally
$Age = $row['Age'];
//Store score locally
$Score = $row['Score'];
/*
Out put the returned record in the format
<PARAM name="externalparams" value="">
Replacing value with the Key->Value information, for example Name-Gary, Score-500
*/
echo "<PARAM name=\"externalparams\" value=\"Number-$Number,Name-$Name,Age-$Age,Score-$Score\">\n";
}
//Close the database connection
mysql_close($connection);
?>
Saving to the database
Again I won’t talk too much about this file, saveGame.php (figure 5.0) this is basically getting all parameters passed to it (figure 6.1), storing in variables and inserting those values into the database. For any extra information check the comments inside the file or below
figure 5.0
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Save Game</title>
</head>
<body>
<?php
//Include Database connection
include 'dbConnection.php';
//Retrieve the passed parameters
$Number = $_GET['Number'];
$Name = $_GET['Name'];
$Age = $_GET['Age'];
$Score = $_GET['Score'];
//SQL to insert the values as a new database record
$sql = "INSERT INTO players (Number, Name, Age, Score)
values ('$Number', '$Name', '$Age', '$Score')";
//Execute the SQL or display error message
mysql_query($sql) or die (mysql_error());
//Out put game saved
echo "Game Saved!" ;
//Close the database connection
mysql_close($connection);
?>
</body>
</html>
TW_Applet
The TW_Applet.php is where these two files will be called from, the loadGame.php (figure 4.1), will be called to load the parameter into the html and the saveGame.php (figure 5.0) will be called from a java script function to save the game (figure 6.1).
I have omitted the rest of TW_Applet.php for brevity, this piece of code (figure 6.0) is located on line 77 and this will call the loadGame.php (figure 4.1) and retrieve the parameters ready for the ExternalParamValue (figure 1.0) function is c-script to retrieve.
figure 6.0
- Code: Select all
<!-- Print out variables from database. -->
<?php include 'loadGame.php';?>
This is the save function (figure 6.1), it is invoked from the thinking worlds engine with the JavaScriptInvoke (figure 7.1) c-script function, it will then pass this data to the saveGame.php (figure 5.0).
figure 6.1
- Code: Select all
function save(number, name, age, score)
{
var vnumber = number;
var vname = name;
var vage = age;
var vscore = score;
window.location.href= "saveGame.php/?Number="+vnumber+"&Name="+vname+"&Age="+vage+"&Score="+vscore;
}
Retrieving and saving c-script
With all these functions in place within our export, we finally just need to set up two functions, one for loading the parameters into the thinking worlds variables (figure 7.2), and one for taking these variables and passing them to the save java script function (figure 7.3).
This function (figure 7.2) will take our example parameter (figure 7.0) and store each value in a corresponding variable within thinking worlds.
figure 7.0
<PARAM name="externalparams" value="Number-1,Name-Gary,Age-23,Score-100">
(figure 7.1) Displays the contents of the variables after the function (figure 7.2) has run,
figure 7.1
NumberLogicVariableValue == 1
NameLogicVariableValue == Gary
AgeLogicVariableValue == 23
ScoreLogicVariableValue == 100
figure 7.2
- Code: Select all
// [Enter comment here]
function getData()
{
//This function extracts the external parameters from the html and stores them in local varibles within thinking worlds
string tempStringVar := "Number"
tempStringVar := ExternalParamValue( tempStringVar )
NumberLogicVariableValue := StringToNumber( tempStringVar )
Print(NumberLogicVariableValue)
//
tempStringVar := "Name"
tempStringVar := ExternalParamValue( tempStringVar )
NameLogicVariableValue:= tempStringVar
Print(NameLogicVariableValue)
//
tempStringVar := "Age"
tempStringVar := ExternalParamValue( tempStringVar )
AgeLogicVariableValue := StringToNumber( tempStringVar )
Print(AgeLogicVariableValue)
//
tempStringVar := "Score"
tempStringVar := ExternalParamValue( tempStringVar )
ScoreLogicVariableValue := StringToNumber( tempStringVar )
Print(ScoreLogicVariableValue)
}
This function (figure 7.5) will concatenate a string which will be passed to the JavaScriptInvoke calling the save(number, name, age, score) (figure 6.1).
If the inputs are as follows (figure 7.3),
figure 7.3
NumberLogicVariableValue == 1
NameLogicVariableValue == Gary
AgeLogicVariableValue == 23
ScoreLogicVariableValue == 100
the JavaScriptInvoke will be called as follows (figure 7.4) after all concatenations.
figure 7.4
JavaScriptInvoke(save(1,"Gary",23,100))
figure 7.5
- Code: Select all
function saveGame()
{
//This function calls the save() javascript function with the varibles in game.
//All game variables are concatenated into a string before the function is called.
//
string functionName := "save("
string varValue := NumberToString(NumberLogicVariableValue)
AppendString(functionName , varValue)
AppendString(functionName, ",")
AppendString(functionName, "\"")
varValue := NameLogicVariableValue
AppendString(functionName , varValue)
AppendString(functionName, "\"")
AppendString(functionName, ",")
varValue := NumberToString(AgeLogicVariableValue)
AppendString(functionName , varValue)
AppendString(functionName, ",")
varValue := NumberToString(ScoreLogicVariableValue)
AppendString(functionName , varValue)
AppendString(functionName, ")")
Print(functionName)
//
//This function will call the corresponding function name passed as a parameter
JavaScriptInvoke(functionName)
}
Calling from the logic canvas
The final piece to our rather elaborate puzzle is calling from the logic canvas (figure 8.0), like all examples it doesn’t need to copied exactly, however you will need to load the data at the start and choose when to save your game variables to the database.
So if we take a look at the examples logic canvas (figure 8.0) we are calling the get data function (figure 7.2) after we have loaded the hud, and when the save button on the hud is pressed the save game function (figure 7.5) is called.
figure 8.0
- logicCanvas.png (18.01 KiB) Viewed 1198 times
This completes our example on loading and saving from a database, I encourage you to be brave and experiment with the code.
If you have any questions let me know at support@thinkingworlds.co.uk
Thanks Gary
