Construct2 Daten speichern

Mit Construct2 gibt es sehr unterschiedliche Möglichkeiten, um Daten zu speichern.

• Mittels WebStorage auf dem Client-Rechner des Benutzers (beliebige Daten in nicht zu großem Umfang)
• Auf den Rechnern von Clay.io (HighScore-Listen)
• Mit Ajax in einer Datenbank auf einem Server (beliebige Daten ohne Beschränkung)

WebStorage

Mit Hilfe dieses Objektes kann man Variable im Umfeld des Browsers speichern. Es gibt dabei zwei unterschiedliche Prinzipien, einerseits kann man in der Session speichern andererseits lokal.Alle in der Session gespeicherten Daten werden beim Schließen des Browsers gelöscht, die lokal gespeicherten Daten nur, wenn der User seinen Browser-Cache löscht. Genrell ist der zur Verfügung stehende Speicherplatz nicht sehr groß, es geht um einzelne MB. Aber Spielzustände kann man so schon ablegen.

Webstorage von einzelnen Variablen

Wir benutzen das folgende einfache Layout.

Mit drei Textboxen und den zugehörigen Labels. Die zwei bunten Kreise sind Schaltflächen, die grüne dient zum Speichern, die rote zum Laden. Zusätzlich brauchen wir dann noch die Objekte Mouse, Keyboard und natürlich WebStorage.

Das Speichern der Daten ist nicht besonders aufwändig.

Im Prinzip wird hier für jedes Datenfeld ein Bezeichner festgelegt, unter dem es gespeichert wird. Die Daten werden aus dem Attribut Text der jeweiligen Textbox entnommen. Etwas irritierend kann hier sein, dass im Dialog etwas anderes steht, als im EventSheet im Dialog steht Set local value, im Sheet steht Set local key. Im jeweiligen Zusammenhang sind aber beide Darstellungen korrekt.

Was man hier auch gut erkennen kann sind die beiden Möglichkeiten Session und Local.

Das Einlesen der Daten erfolgt analog. Hier werden die Inhalte der Textboxen aus dem WebStorage geladen.

Statt des WebStorage.LocalValue gibt es natürlich auch WebStorage.SessionValue.

Webstorage mit Arrays

Hat man viele Variablen, die man speichern möchte, so wird das schnell unübersichtlich. Daher arbeiten Programmierer gern mit Arrays, in denen sich nahezu beliebige Daten sammeln lassen. Arrays lassen sich auf einen Rutsch laden und Speichern.

Wir nehmen das gleiche Layout wie im vorherigen Beispiel, fügen nur ein Array-Objekt hinzu. Für die Größe ist Vorgabe (10,1,1) das langt für unsere Zwecke auf alle Fälle.

Zum Speichern müssen wir nun nur die Daten ins Array bringen und dann das Array sichern.

Und dann natürlich auch das Gegenstück dazu, das Laden und Zurückspielen ins Array.

Nahezu selbsterklärend.

Clayio

Will man nur eine Highscore-Liste (Leaderboard) mit Namen und Score ablegen, so kann man den Dienst unter http://clay.io/ nutzen. Für die Nutzung gibt es zwei Vorraussetzungen, einen Account bei Clayio und das entsprechende Plugin für Construct2.

Das Plugin Clayio

Das Plugin befindet sich auf der Seite http://clay.io/docs/scirra zusammen mit einer Beschreibung für die Installation und Nutzung. Im Prinzip ist die Installation ganz einfach, man lädt sich die Datei http://clay.io/plugins/scirra.zip auf den heimischen Rechner und entpackt sie in das Verzeichnis Programme\Construct2\exporters\html5\plugins\

Nach einem Neustart von Construct2 steht das neue Objekt Clayio zur Verfügung.

Der Clay.io Account

Im ersten Schritt legt man unter http://clay.io/ einen neuen Account an.

Nach dem man den SignUp Button geklickt hat (Sign up for free) landet man in einer Art Community-Bereich. Wir wollen uns aber als Entwickler betätigen, also klicken wir gleich auf Developers rechts oben.

Hier wird man aufgefordert den gerade erstellten Account upzugraden, was mit einem Mausklick eingeleitet wird.

Dann muss man den Entwicklernamen und einen Key festlegen. Danach kann man dann sofort sein erstes Spiel anlegen. Hier macht sich bemerkbar, dass Clay.io eigentlich eine Plattform ist, auf der man Spiele ablegen kann.

Im nächsten Fenster werden einem dann die gewählten Einstellungen und die Keys angezeigt.

Hier findet sich dann auch der Link auf Leaderbords, über den man seine eigene Higscore-Liste anlegen kann. Zuerst muss man hier einmal auf Add A Leaderboard klicken.

Notwendig ist hier nur der Name, den Identifier kann Clayio selber festlegen. Als Ergebnis erhält man dann die folgende Übersicht über die eigenen Leaderboards.

Von hier aus kann man die jeweilige Liste auch löschen (Vorsicht: leere Listen geben ggf. in der Anwendung Probleme)

Danach kann man sich abmelden, die Link dazu findet sich im Fuß der Seite.

Nutzung von Clayio in Construct2

Zum Testen erstellen wir eine kleine Anwendung mit einem einfachen Layout. Also ein neue Projekt anlegen. Das Layout sieht dann folgendermaßen aus.

Es befinden sich dort sieben sichtbare Elemente:

• 2 Textboxen (für die Eingaben)
• 3 Texte, zwei davon als Label und der dritte für die Augabe der HighScore-Liste.
• 2 beliebige grafische Elemente zum Anklicken. Das grüne Element soll einen neuen Score abschicken, das rote Element die Liste abrufen und anzeigen.

Dazu kommen dann noch drei nicht sichtbare Elemente:

• Mouse
• Keyboard
• Claio

Beim Objekt Clayio muss man noch unbedingt die Property APIkey setzen. Hier kommt der Key hinein, den man auf der Seite Clay.io erstellt hat.

Zuerst das Senden der Daten, wenn der grüne Knopf gedrückt wurde.

Hier wird mit einem Subevent überprüft, ob der im Feld Name eingegebene Wert nicht leer ist. Wenn das zutrifft, dann wird bei Clayio gepostet. Was gepostet wird ergibt sich aus den Einstellungen für Post Leaderboard Score.

Hierbei haben die Felder folgende Bedeutung.

• Name.Text ist der Text im Feld Name
• float(Score.Text) ist der Text im Feld Score umgewandelt in eine Zahl, das Plugin erwartet den Score als Zahl
• In der dritten Zeile steht die LeaderboardID, die man online erzeugt hat
• In der vierten Zeile legt man fest, ob man nach dem Senden von Daten jeweils ein kleines Bestätigungsfenster haben möchte oder nicht.

Nun das Abrufen der Highscore-Liste über den roten Button.

Wenn die rote Grafik angeklickt wurde und Clayio Ready ist, dann wird das Leaderboard Object geladen. Auch hier erfolgen die Einstellungen wieder über die Parameter für Fetch Leaderboard Object.

Danach kann man dann in einer Schleife einfach die Liste Zeilenweise ausgeben mittels Append von dem Textfeld.

Ajax

Mit Hilfe des Ajax-Objektes kann man auch Daten in einer Datenbank auf einem beliebigen Server speichern. Dazu müssen aber auf dem Server ein paar Vorbereitungen getroffen werden.

MySQL-Teil

Zuerst benötigt man eine Datenbank, die kann man z.B. mit folgenden Zeilen erstellen:

CREATE TABLE `scores` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
 `score` int(11) NOT NULL,
 PRIMARY KEY (`id`)
);                                                                             

INSERT INTO `scores` VALUES (1,'Adams',42); 

PHP-Teil

Dann benötigt man zwei Scripten, eines zum Speichern der Daten und eines zum Auslesen der Daten aus der Datenbank.

Zuerst das PHP-Script zum Auslesen der Daten:

<?php
$host    ="localhost";  // Host Name 
$username="xxxxxx";     // Mysql Benutzername 
$password="xxxxxxxx";   // Mysql Passwort
$db_name ="dbname";     // Datenbank Name
$tbl_name="scores";     // Tabellen Name

// Verbindung zum Server aufbauen
mysql_connect("$host", "$username", "$password")or die("Keine Verbindung");

// Selektieren der Daten aus der Datenbank 
$sql="SELECT * FROM $tbl_name ORDER BY score DESC LIMIT 10";
$result=mysql_db_query($db_name, $sql);

// Schleife zu Auslesen der Datenbank.
while($rows=mysql_fetch_array($result)){
 echo $rows['name'] . "|" . $rows['score'] . "
";
} 

// MySQL Verbindung beenden 
mysql_close();
?>

Und hier das Script für die Eingabe der Daten in die Datenbank

<?php
$host    ="localhost";  // Host Name 
$username="xxxxxx";     // Mysql Benutzername 
$password="xxxxxx";     // Mysql Passwort
$db_name ="dbname";     // Datenbank Name
$tbl_name="scores";     // Tabellen Name

// Verbindung zum Server aufbauen
mysql_connect("$host", "$username", "$password")or die("Keine Verbindung");

if(isset($_GET['name']) && isset($_GET['score'])){

    //Die Daten aus den GET's absichern um SQL injections und XSS Attacken zu erschwerden
    $name = strip_tags(mysql_real_escape_string($_GET['name']));
    $score = strip_tags(mysql_real_escape_string($_GET['score']));
    $sql =  "INSERT INTO `scores` (`id`,`name`,`score`) VALUES (,'$name','$score');";
    $result = mysql_db_query($db_name, $sql);

    if($result){

         //Die Eingabe war erfolgreich
         echo 'Dein Score wurde Gespeichert!';

    }else{

         //Die Eingabe war nicht erfolgreich, hier wird es dann schwieriger
         echo 'Beim Speichern der Daten gab es ein Problem';

    }

}else{
    echo 'Mit dem Seitenaufruf wurden nicht die notwendigen Daten uebermittelt. Stelle sicher, dass etwas wie ?name=NAME_HERE&score=1337 an der URL vorhanden ist.
}

mysql_close(); //MySQL Verbindung schließen
?>

Construct2-Teil

Wenn wir wieder das gleiche Layout nehmen wie im vorigen Beispiel, nur erweitert um ein Ajax-Objekt, dann ist das Speichern der Daten nicht schwierig, es ist eigentlich nur ein Seitenaufruf.

Im Prinzip ist auch das Laden der Daten recht einfach, man muss hier nur die Daten wieder zerlegen, da im Prinzip eine einzige Zeile zurück geliefert wird.

In den Rückgabedaten wird die Anzahl der Datensätze bestimmt, indem gezählt wird, wie oft das Trennzeichen (hier der Zeilenumbruch) im Text auftaucht. Diese Zahl muss um 1 vermindert werden, da auch hinter dem letzten Datensatz das Trennzeichen steht. Dann werden in einem Schleifenkonstrukt die einzelnen Zeilen ausgelesen und an den Text angehängt.