Ajax

script type="text/javascript">
    function update() {
        $("#refresh").load('refresh.php?' + 1*new Date());
    };
   
    function timestamp() {
        $.ajax({
            type: "GET",
            url: "update.php",
            success: function(data){
                $("#timestamp").fadeIn("slow").delay(2000).fadeOut("slow");  
            }
        });
    };
   
    $(document).ready(function() {
        $("#refresh").load("refresh.php");
        var refreshId = setInterval(function() {
            $.ajax({
                type: "GET",
                url: "timestamp.php",
                success: function(data){
                    if (data == 'true'){
                        update();
                    }          
                }
            });
        }, 10000);
    });
</script>

Womit programmiert man ein Browser-Adventure?

Für die Animation und Action im Browser-Adventure gibt es verschiedene Möglichkeiten:

  • Flash
  • Videosequenzen
  • Silverlight
  • JavaScript
  • JAVA
  • Canvas und html5

bzw. auch die Kombination daraus.

JAVA ist prinzipiell sehr gut für Spiele geeignet, insbesondere da JAVA weitestgehend plattformunabhängig funktioniert.

Bei einem Browserspielen übernimmt die Funktion: plattformübergreifend allerdings schon der Browser. Und ein in meinem Fall nicht unerheblicher Nachteil von JAVA ist, dass mein Wissen um JAVA reichlich angestaubt und nicht wirklich abrufbar ist.

Flash - habe ich aus Kostengründen verworfen, und auch Mangels Erfahrung.

Canvas und html5 - sind noch zu neu, und funktioniert aktuell nicht in allen Browsern.

Silverlight funktioniert nur mit asp.net und aus mir aktuell noch unerklärlichen Gründen, noch nicht zufriedenstellend auf meinem Entwicklungsrechner. Da selbst kleine virtueller Server mit Windows als Betriebssystem ca. 20 Euro pro Monat kosten,  also bei gleicher Ausstattung Festplattenkapazität, Speicher, CPU fast doppelt so teuer sind, wie ein Linux-Server, ist dies auch eine Kostenfrage.

JavaScript ist allerdings nur eine Scriptsprache, ob die wirklich alles kann, was ich im Spiel brauche?

Die Antwort ist ein klares Jein! Aber es gibt ja noch PHP. Damit kann ich zwar im Browserfenster nix animieren, aber dafür kann ich all die anderen Funktionen, wie User und Spielstände verwalten sehr gut umsetzen.

Um die Funktionen in JavaScript nicht alle selbst zu schreiben, habe ich mir mal angesehen, was es so im Internet unter dem Stichwort: Framework für Onlinespiele, JavaScript-Bilbliothek so gibt.

Dabei sind mir JQuery und Mootools ins Auge gefallen.

Bewegung der Kamera

Bewegung bzw. Perspektive der Kamera

Perspektive innerhalb von Räumen

Die Kameraposition und die Blickrichtung des Betrachters ändern sich während der Aktionen im Raum normalerweise nicht.

D.h. nur die Figur dreht sich um nicht das Zimmer!

Wenn es notwendig bzw.sinnvoll ist, z.B. wenn Tina ihr ganzer Zimmer nach brauchbaren Werkzeugen für ihr Abenteuer durchsucht, kann der Raum auch passend gedreht werden, dass passiert dann über eine Animation, die durch den Klick auf die zu untersuchende Seite des Zimmers ausgelöst wird (Überblendung, Fading, Animation je nach Aufwand).

 

Perspektive außerhalb der Räumen

Für die Bewegung außerhalb - also in der Natur, ist die Welt in logische Quadrate aufgeteilt, wenn die Figur den Rand eines Quadrates überschreitet, wird als Animation die Kamera nachgeführt, so dass am Ende die Figur wieder in der Mitte ist.

Im freien ist das Drehen um die eigene Achse immer möglich. (jeweils in 90° Schritten).

Die benötigten Hintergrundbilder werden aus einzelnen Kacheln zusammengestellt.

 

Gebäude, Bäume, Brücken besondere Plätze

Plätze bei denen es etwas zu untersuchen gibt, werden wie Räume gesteuert, d.h. alle benötigten Hindergrundbilder müssen extra erstellt werden.

 

Vogelperpektive

Für den Flug mit dem Drachen wird die Vogelperspektive verwendet. Außerdem kann über die Wanderkarte auch direkt zu bestimmten Orten gewechselt werden, das wird dann über die Vogelperspektive aninmiert.

 

Bewegung der Figuren

Bewegung der Figuren

Bewegung innerhalb von Räumen

Tastatur

Die Spielfigur kann mit den  Cursortasten jeweils nach links / rechts/ nach vor und zurück bewegt werden - so keine Hindernisse im Weg sind.

Wird bei der Bewegung ein Objekt erreicht so löst ein weiteres Drücken der Cursortaste die Standardaktion, meist Objekt untersuchen aus.

Sind weitere Aktionen möglich können diese über die angezeigten Tastaturkürzel ausgeführt werden (I = ins Inventar, S = Schieben, V = verwenden, Z zusammenbauen / verwenden an, dafür sind jeweils Tastaturkürzel im Inventar denkbar.)

Maus

Alternativ dazu kann mit der Maus auch an beliebige Stellen im Raum geklickt werden. Wobei beim (Links-)Klick mit der Maus ein dynamischer Cursor zum Einsatz kommt, d.h. wenn eine Stelle erreichbar ist - gehe zu - ansonsten ansehen / untersuchen.

Um Dinge in die Hand zu nehmen, zu verschieben oder irgendwas zu machen kannmit Rechtsklick auf das Objekt eine mögliche Aktion ausgewählt werden, mit Doppelklick wird jeweils die Standardaktion sofort ausgeführt.

z.B. Doppelklick auf ein Objekt in der Hand, Objekt in das Inventar (Rucksack / Hosentasche) ablegen.

Wenn man ein Objekt in der Hand hat und auf ein anderes Objekt klickt, welches sich damit zusammenbauen lässt, wird das Zusammenbauen direkt ausgelöst.

 

Anmerkung: Die Umsetzung der Tastatursteuerung über

.keyup(function(event){.. } 
 });

functioniert soweit sehr gut mit einem Input-Feld, inwieweit sich das im Spiel umsetzen lässt muss noch geprüft werden. Vorerst wird auf die Umsetzung der Tastatursteuerung allerdings verzichtet.

Bewegung von Raum zu Raum

Wenn man durch Türen geht oder durch Fenster klettert um in andere Räume oder nach draußen zu gelangen, wird der Übergang ggf. aninmiert (Blende, Fading, Bewegung). Danach befindet sich die Spielfigur in einem neuen "Bild" jeweils an der zum Übergang passenden Stelle.  

z.B. beim Verlassen des Zimmers - rechts aus dem Bildschirm, ist man in dem rechts daneben liegendem Zimmer ganz links.

 

Browser-Adventure mit JQuery

 

Die Umsetzung über JavaScript in Verbindung mit JQuery hat den Vorteil, dass keine zusätzlichen Plugins geladen werden müssen, wie z.B. bei JAVA, Flash und Silverlight.

Um zu testen, ob JavaScript mit JQuery eine brauchbare Kombination ist, soll eine Bibliothek mit mehreren Regalen und Büchern abgebildet werden. Wobei man die Bücher auch lesen kann.

Die grafische Umsetzung der Einzelbilder, Ebenen und Figuren erfolgt vorab mit POV-Ray - im Browser erfolgt dann "nur" die Animation.

^