Toplisten und Ränge: Wie schaffe ich es, eine Topliste zu realiseren?

Im heutigen Teil der Serie, kümmern wir uns um die versprochenen ersten Zeilen Code, die euch eine Topliste ermöglichen.

Bereits in diesem Beitrag haben wir schon die Thematik besprochen welche Überlegungen getroffen werden sollten und wie sinnvoll eine Topliste für eure User App wirklich ist. Wenn ihr also zu dem Entschluß gekommen seid eine eigene Topliste anzubieten, gibt es ein paar Klassen und Methoden, deren Funktionsweise man kennen und verstehen sollte.

Nehmen wir an, in eurer User App werden Punkte vergeben. Diese Punkte werden bei den Spielern in die UserPersistence mit dem Key points gespeichert. Damit ihr nun eine Liste mit den besten Punktesammlern ausgeben und verarbeiten könnt, müssen wir zuerst einmal den Zugriff (eng. Access) auf die Toplisten ermöglichen. Anschließend können wir mit der Topliste arbeiten und ggf. den Anzeigemodus (eng. Display mode / Display type) ändern.

ToplistAccess

Damit wir überhaupt Toplisten erstellen, löschen oder verarbeiten können, ist es notwendig den Zugriff auf die Toplisten sicherzustellen. Damit dies möglich ist, muss mit Hilfe der KnuddelsServer-Klasse eine Verbindung hergestellt werden.

var toplistAccess = KnuddelsServer.getToplistAccess();

Mit dem oben gezeigten Beispiel laden wir nun in die Variable toplistAccess alle benötigten Informationen, die wir für die weitere Arbeit mit den Toplisten benötigten und können uns daran machen unsere erste eigene Topliste zu erstellen.

Die Klasse ToplistAccess bietet uns nun einige Methoden an, wie es weiter gehen soll. Am häufigsten verwendet wird hierbei die Methode createOrUpdateToplist, die wie der Methodenname bereits verrät eine Topliste erstellt oder aktualisiert. Die Dokumentation hat für uns dafür auch ein passendes Beispiel parat:

var toplistAccess = KnuddelsServer.getToplistAccess();
var toplist = toplistAccess.createOrUpdateToplist('points', 'Punkte', {});

In den Zeilen 2 – 4 die nun hinzu gekommen sind, wird eine Topliste für den UserPersistenceKey points erstellt. Diese Topliste wird nun auch in den Profilen der User angezeigt, die eurer User App bereits bekannt sind und einen Wert in der UserPersistence unter dem Key points gespeichert haben.

Das oben gezeigte Beispiel, stellt jetzt eine sehr minimalistische Darstellung der Topliste dar. Es sind auch noch weit aus mehr Möglichkeiten möglich. Wenn ihr z.B. Ränge angeben möchtet, so sollte euer Code so aussehen:

var toplistAccess = KnuddelsServer.getToplistAccess();
var labelMapping = {
 '1': 'Anfänger', // 1-24
 '25': 'Beginner', // 25-49
 '50': 'Profi', // 50-99
 '100': 'Genius' // ab 100
};
var toplist = toplistAccess.createOrUpdateToplist('points', 'Punkte', {
 labelMapping: labelMapping
});

In Zeile 2 – 7 definiert ihr, in welchen Punktebereichen sich die User befinden müssen, um den jeweiligen Rang zu erreichen. Damit die Topliste aber auch weiss, dass ihr Ränge angezeigt haben möchtet, müsst ihr in Zeile 9 diese Informationen mit übergeben.

Anschließend gibt die Klasse ToplistAccess in den Profilen der Nutzer automatisch den aktuellen Rang unter Berücksichtigung der Punkte an.

Toplist

Die Klasse Toplist repräsentiert eure Topliste. Mit Hilfe dieser Klasse und den dazu gehörigen Methoden, könnt ihr zum Beispiel auf Veränderungen innerhalb der Topliste reagieren oder aber Links zum öffnen der Topliste erzeugen.

Das reagieren auf Veränderungen in der Topliste kann zum Beispiel notwendig sein, wenn ihr auf das Erreichen eines neuen Ranges hinweisen möchtet oder aber ein Spieler darüber informiert werden soll, wenn er von einem anderen User auf der Topliste überholt wurde. Dazu kommen wir aber zu einem späteren Zeitpunkt in dieser Serie.

Update:

In diesem Beitrag könnt ihr euch schon mal anschauen, wie es funktioniert auf einen neuen Rang öffentlich zu reagieren.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s