Ajaxschmiede.de

Der Däne Jacob Seidelin, dessen Javascript-Spieleumsetungen schon mehrmals Thema auf unserer Seite waren, spendierte seinem Schachspiel vergangene Woche die Steuerung per Maus. Bisher war es nur möglich, die Figuren mittels der Tasten 2,4,6, und 8 im Ziffernblock zu bewegen und mit 5 auszuwählen.

Das komplette Spielfeld ist in 3D gehalten und lässt sich beliebig drehen. Die grafische Darstellung übernimmt das Canvas-Element, wobei jede Figur in ein separates Canvas-Element gezeichnet wird. Somit muss nach jedem Zug nicht das kompette Schachbrett neu gerendert werden und spart somit Rechenzeit.

Da es sich auch hier legdiglich um eine Demonstration und kein vollständiges Spiel handelt, gibt es einige Einschränkungen, die vielleicht später einmal aufgehoben werden:

• untexturierte Grafiken
• kein Computergegner (KI) – man steuert beide Seiten
• keine Spezialzüge
• keine grafische Oberfläche

Da der Internet Explorer von Haus mit Canvas nichts anzufangen weiß und auch die excanvas-Abhilfe keine Unterstützung von mehreren Canvas-Elementen bietet, läuft die Demonstration nur auf den Alternativbrowsern Firefox (2+), Opera (9+) und Webkit / Safari 3.

Hier gehts zum Spiel.

Jacob Seidelin hat sein Canvas-Javascript-Bildbearbeitungstool Pixastic, über das wir bereits Anfang des Monats berichteten, einem kleinen Update unterworfen.

So lieferte Seidelin nun die versprochene Zoom-Funktion nach. Damit wird es nun auch möglich größere Bilder zu bearbeiten, so dass die maximale Dateigröße auf 4 MB und die maximale Auflösung auf 2048×2048 Pixel erhöht wurde. Gezoomt wird – wie üblich – mit dem Mausrad, alternativ auch über die Tasten Z und X.

Der Quelltext der aufgerufenen Aktion (Sättigung, usw) lässt sich nun mittels Klick auf die gewünschte Funktion bei gleichzeitig gedrückter Shift-Taste in einem separaten Dialogfenster anzeigen

Das Laden von Bilder über die URL funktioniert weiterhin auf Grund von Servereinschränkungen nicht. Jedoch ist es nun möglich Bilder von Flickr, Photobucket, Picasa Web und Facebook zu laden.

Durch ein privates Projekt, in dem es nötig wurde, einige moderne CSS-Selektoren der Art input[type=text] für nicht so fitte Browser wie den Internet Explorer per Javascript nachzubauen, stieß ich auf das seit jeher bestehende Problem der Browsererkennung.

Da die Werte der Useragent-Abfrage von Client zu Client sehr unterschiedlich gehandhabt werden und in den meisten Fällen auch leicht manipuliert werden können, sollte man darauf nicht vertrauen und stattdessen den Weg über die Abfrage nach verfügbaren Methoden gehen.

Ich gehe davon aus, dass nur die wenige Javascript-Programmierer ein detailiertes Wissen über die konkreten Besonderheiten eines jeden Browsers und dessen Versionen besitzten. Ich gehöre auf jeden Fall nicht dazu und suchte deshalb eine Übersicht, nach der ich meine Javascript-seitige Browserweiche aufbauen kann.

Dabei fand ich die sehr umfangreiche und vielseitige Homepage des Diplom-Designers Kristof Lipfert, der in einem gesonderten Bereich speziell auf die unterschiedlich implementierten Javascript-Funktionen der geläufigsten Browser eingeht und diese tabellarisch darstellt.

Der Däne Jacob Seidelin hat heute auf seiner Spielwiese http://www.nihilogic.dk/ die nächste beeindruckende Demonstration der Möglichkeiten, die Canvas bietet, aufgezeigt.

Nachdem Seidelin zuletzt vor allem an Umsetzungen von Spieleklassikern arbeitete, veröffentlichte er diesmal ein Online-Bildbearbeitungs-Tool namens Pixastic, das nur clientseitig im Browser läuft.

Pixatic ist kein vollständiges Bildbearbeitungsprogramm, das alle erdenkbaren Fotomanipulationsmöglichkeiten bietet, und soll auch niemals Adobe’s Photoshop und ähnliche Programme ablösen. Das Tool soll nur zeigen, was mit modernen Browser auf Grundlage von Canvas und Javascript alles erreicht werden kann, und grundlegende Funktionen zur schnellen, clientseitigen Bildbearbeitung bereit stellen.

Hinter einer primitiv gehaltenen Benutzeroberfläche (GUI) verbergen sich die üblichen Methoden zur Fotomanipulation wie Ausschneiden, Größe verändern und Drehen genauso wie einige Filter- und Effektfunktionen wie zum Beispiel das Anpassen von Helligkeit, Kontrast, Sättigung, Graustufen, Unschärfe und so weiter.

Mit einigen Einschränkungen läuft das Pixastic auf allen modernen Browser, wobei erhebliche Unterschiede bezüglich der Geschwindigkeit auftreten können. Opera 9.5 (Beta), Firefox 3 und die aktuellen nightly builds des WebKit bieten die beste Performance. Der Internet Explorer bleibt wegen fehlender Canvas-Unterstützung außen vor.

Als Bildquelle kann man sowohl Fotos vom eigenen Rechner hochladen oder aber eine URL angeben. Unterstützt werden alle gängigen Bildformate mit einer Auflösung von bis zu 1024×1024 und einer Größe von bis zu einem Megabyte. Desweiteren besteht die Möglichkeit seine bearbeiteten Bilder auf dem eigenen Desktop abzuspeichern.

Folgende Tastenkürzel hat Seidelin integiert (in Opera sollte man stets Ctrl+Shift anstelle von nur Ctrl drücken):

• Ctrl+C, Ctrl+X, Ctrl+V – Kopieren, Ausschneiden und Einfügen angewandt auf die ausgewählte Bildfläche
• Ctrl+Z – Rückgängig machen (bis zu maximal der letzten 10 Aktionen)
• Alt+Backspace / Ctrl+Backspace – einfärben der ausgewählten Bildfläche

Die ToDo-Liste für die Anwendung ist noch lang und reicht von dem Einbau einer Zoom- und Scrollfunktion über das Beheben etlicher Fehler bis hin zur Überarbeitung der gesamten Benutzeroberfläche.

An dieser Stelle möchte ich noch auf ein ähnliches Projekt namens Canvaspaint verweisen. Canvaspaint ist eine nahezu 1-zu-1-Kopie von Microsofts Paint, läuft jedoch wie Pixastic nur im Browser und bietet den selben Funktionsumfang.

Jacob Seidelin kann einfach nicht genug von Mario bekommen. Nachdem er bereits ein Klempner-Abenteuer in Javascript mit Hilfe von Canvas umgesetzt hat, machte er sich nun daran, das bekannte Rennspiel Super Mario Kart zu übertragen.

Wie bereits in seinen vorherigen Spiele-Implementierungen benutzte Seidelin auch dieses Mal zur visuellen Darstellung vorrangig das Canvas-Element, das von Firefox (2 und 3), Opera (9.27), Safari (3.1.1) und den nightly builds des WebKit-Browsers, jedoch nicht von Microsofts Internet Explorer, unterstützt wird.

Da es sich abermals um eine Demo handelt, die nur andeutet, was möglich ist, muss man sich mit einigen Einschränkungen zufrieden geben. So gibt es keines der witzigen Items, keinen Rundenzähler, keine Zeitangabe und auch kein Ziel. Man kann also ewig seine Runden drehen.

Die Kollisionsabfrage ist sehr einfach gehalten. Als Hindernis gelten nur die Map-Grenzen und die farbigen Blöcken in der Karte. Gegnerische Karts sind „Luft“ – man kann durch sie hindurchfahren. Wasser und Sand stellen eben so wenig ein Problem für den Spieler dar.

Vorerst können nur drei verschiedene Fahrer (Mario, Luigi und Prinzessin Peach) und zwei unterschiedliche Strecken (Mario Circuit 1 und Donut Plains 1) ausgewählt werden.

Die Künstliche Intelligenz der anderen Fahrer wurde auch nur grundlegend integriert. Dennoch arbeitet sie zufriedenstellend.

Vor dem Spielstart kann man einige Einstellungen anpassen. So lässt sich die Bildgröße, die Bildqualität und der Render-Modus wählen. Wobei ich nur den standardmäßigen „Single Canvas“-Modus empfehlen kann, da die beim „Per-line Canvas“-Modus in jeweils einzelne Canvas-Elemente aufgesplitteten horizontalen Linien sehr viel Rechenleistung beanspruchen, wodurch das Spiel bei mir nicht mehr flüssig lief.

Die Steuerung des Karts erfolgt über die Pfeiltasten.

Genug der Worte, und nun: freie Fahrt mit Mario Kart.

Jacob Seidelin hatte am vergangenen Wochenende scheinbar seinen Spaß und bastelte an einer weiteren verrückten Idee: Javascriptcode in Bilddateien ablegen. Dabei erreichte er beachtliche Ergebnisse. Die 124 Kilobyte große Prototype-Bibliothek packte er in eine 30 Kilobyte kleine 8-bit-png-Grafik.

Seidelin, der bereits durch seine durch seine Spieleumsetzungen von Super Mario und Wolfenstein 3D auf sich aufmerksam machte, beteuert, dass es bei seiner Demonstration nur um eine Machbarkeitsstudie handelt, die dem im Web häufig anzutreffenden gzip-Komprimieralgorithmus nicht den Rang ablaufen kann.

Zu Beginn seines Vorhabens Code in Grafiken abzuspeichern, stellte sich Seidelin die Frage nach dem zu verwendenten Dateiformat. Sämtliche verlustbehafteten Formate waren von Anfang ausgeschlossen. Somit blieben nur GIF und PNG übrig. PNG bietet indes 2 verschiedene Modi: 24 bit und 8 bit. Durch einfaches Probieren mit Photoshop kam Seidelin zu dem Ergebnis, dass die 8-bit-PNG-Variante die beste Wahl in Sachen Komprimierung ist.

Das Umwandeln der Javascript-Bibliothek Prototype in Farbwerte, die in der PNG-Grafik hinterlegt werden, geschieht in einem PHP-Script. Die PHP-Datei dient dazu die JS-Datei einzulesen, die PNG-Grafik zu erzeugen und jedem Pixel einen Wert zwischen 0 und 255 entsprechend des ASCII-Wertes eines jeden Zeichens der JS-Datei zuzuweisen.

Als Ergebnis erhält man eine PNG-Grafik, die Prototype exakt aber komprimiert abbildet.

Mit Hilfe des Canvas-Elements kann die Grafik einfach über die Funktion drawImage() gezeichnet und über getImageDate() pixelweise eingelesen werden. Auf diese Weise erhält man ein Array aus Werten, wobei jedes Pixel aus 4 Farbwerten (RGBA) besteht. Da unsere Grafik aber nur einen 8-bit-Farbraum darstellt, wird nur jeden vierten Wert benötigt. Reiht man nun all diese Werte auf und verwendet die eval()-Funktion von Javascript erhält man seine ursprünge Protoytpe-Datei zurück.

Die komplette Dekomprimierfunktion sieht man hier.

Da das hier vorgestellte Verfahren die Unterstützung des HTML5-Elementes Canvas voraussetzt, funktioniert es auch nur in den aktuellen Versionen der Browser Firefox, Opera und WebKit. Der Internet Explorer muss wegen fehlender Canvas-Unterstützung außen vor bleiben.

Wer neugierig geworden ist, kann auf dieser Demoseite verschiedene Testdateien komprimieren und sich anzeigen lassen.

Nach der Javascript-Adaption von Super Mario tüftelte Jacob Seidelin an seiner nächsten Spieleumsetzung. Diesmal übertrug er den Egoshooterklassiker Wolfenstein 3D aus dem Hause id Software in die Browserwelt.

Die Demo, die die Originalgrafiken und – sounds aus dem Spiel von John Carmack nutzt, verwendet zur Darstellung der virtuellen 3D-Welt nur Canvas und Javascript. Canvas ist ein Element der zukünftigen HTML5-Spezifikation, womit man 2D-Grafiken mittels Javascript erstellen kann.

In Bezug auf Browser ist die Javascriptimplementierung sehr wählerisch. So läuft das Minispiel am besten unter Opera, in Firefox zumindest in Version 2.0.0.14 flüssig und mit Abstrichen auch im Safari 3.1.1 – Microsofts Internet Explorer wird wegen mangelnder Cansas-Unterstützung, die bisher auch nicht geplant ist, nicht unterstützt.

Folgende Einschränkungen und fehlende Features existieren:

• keine geheimen Türen
• Wachen sind die einzigen Gegner – es gibt keine Hunde
• Wachen schießen nicht zurück
• keine künstliche Intelligenz – die Wachen stehen nur dumm herum
• Pistole als einzige Waffe – es gibt kein Messer
• mangelhafte Kollisionsabfrage
• es ist möglich durch Wände zu schießen
• unter Umständen kann man in Türen steckenbleiben
• der Level kann nicht beendet werden

Die Steuerung der Spielfigur geschieht wie folgt:

• Bewegen – traditionelle WASD-Steuerung
• Umsehen – linke Maustaste gedrückt halten und Maus bewegen
• Tür öffnen – x-Taste
• Schießen – c-Taste

Wer möchte kann die Wolfenstein-Adaption hier direkt anspielen.

Über einen Blog von John Resig, Javascript-Guru und Mozilla-Foundation-Mitarbeiter, stieß ich auf eine sehr interessante Java-Implementierung in Javascript.

Das Orto (PDF in Japanisch) genannte Projekt ist eine Umsetzung der Java Virtual Machine (JVM) in JavaScript. Das bedeutet, dass grundsätzlich jede in Bytecode kompilierte Java-Anwendung sich mit Orto im Browser ausführen lässt. Orto erzeugt dabei aus dem Bytecode Javascript und bettet diesen in die Homepage ein.

Auch die Fähigkeit von Java Programme in mehreren Threads auszuführen, wird durch Timeouts nachgeahmt. Dadurch wird es möglich, Java-Spiele auf weiteren nicht-Java-fähigen Geräten wie dem iPhone zum Laufen zu bewegen. Desweiteren wird von den Entwicklern versucht die Java UI (User Interface)-Übereinstimmungen weitestgehend über HTML-Elemente zu simulieren, wodurch es erheblich leichter wird, existierende Anwendungen zu konvertieren. Dies ist aber nur bis zu einem bestimmten Grad machbar, da Java viel umfangreichere Möglichkeiten bietet.

Alles in allem wird es kaum möglich sein, Java vollständig zu unterstützen, somit ist dieses Projekt nur eine Machbarkeitsstudie.

Das Entwicklerteam hinter Orto veröffentlichte eine Xetris genannte Tetris-Demo, die einen ersten Eindruck ihrer Implementierung zeigt.

Stephen Celis veröffentliche Anfang der Woche den Javascript-Kalender Timeframe mit vielen Extras.

Der Timeframe-Kalender ermöglicht das Markieren eines Tag oder gar mehrerer Tage. Voraussetzung zum Nutzen der Anwendung ist zum einen Prototype und zum anderen die timeframe.js-Datei.

Um Timeframe in ein bestehendes Projekt einzubinden, erzeugt man ein neues Objekt der Klasse Timeframe. Das sieht in der allgemeinen Form so aus: new Timeframe(element, options), wobei element für die ID des Elements steht, in welches der Kalender gezeichnet werden soll.

options bietet folgende Möglichkeiten zum individuellen Anpassen:

• calendars – Anzahl der Monate die auf einmal angezeigt werden sollen (Standard: 2)
• format – gibt das Datumsformat der input-Felder an (default: %b %d, %Y)
• weekoffset – definiert den Tag des Wochenbeginn (1 um die Woche miit Montag beginnen zu lassen)
• startfield, endfield – bestimmt den Beginn und das Ende der markierten Tage (standardmäßig werden diese von Timeframe erzeugt)
• previousbutton, todaybutton, nextbutton, resetbutton – legt die Navigationselemente fest (standardmäßig werden diese von Timeframe dargestellt)

Ein Aufruf sieht beispielsweise so aus:

new Timeframe('calendars', {
startfield: 'start',
endfield: 'end',
previousbutton: 'previous',
todaybutton: 'today',
nextbutton: 'next',
resetbutton: 'reset' });
//]]>

Kürzlich wurde die Version 0.1.0 des Javascript-Rollenspiels ProtoRPG veröffentlicht.

Auf den ersten Blick erinnert diese Spieledemo stark an die Anfänge des Rollenspielgenres auf den Konsolen. Auch die Steuerung ist sehr einfach gehalten. Mittels Pfeiltasten bewegt man sich in der virtuellen Umgebung. Durch Drücken einer Aktionstaste und anschließend einer Pfeiltaste werden besondere Events ausgelöst, die da wären:

• U + Richtungstaste : Benutzen (Tür öffnen, Schalter betätigen, usw.)
• T + Richtungstaste : Sprechen (Gespräch beginnen)
• L + Richtungstaste : Durchstöbern (Truheninhalt ansehen)
• P + Richtungstaste : Schieben (Objekt verschieben)
• A + Richtungstaste : Angriff
• G + Richtungstaste : Item einsammeln

Das gesamte RBG läuft im Browser und ist nur in Javascript geschrieben. Dabei wird auf die Bibliotheken Prototype und Script.aculo.us zurückgegriffen.

ProtoRPG kann leicht verändert und durch eigene Dialoge und Grafiken angepasst werden, da nur gewöhnliche Bildformate und Klartextdateien verwendet werden.

Der Entwickler plant für die kommenden Versionen folgende Erweiterungen:

• Anlegen und Laden von Speicherständen (mittels AJAX und / oder durch das Verwenden der neuen „Local Storage API“, die in den Browsern der nächsten Generation Einzug halten wird)
• Töne (über den neuen <sound>-Tag, der in HTML 5.0 angekündigt wurde)
• Magiesystem mit Zaubern und der Herstellung von Tränken
• Weitere Befehle zum Aufrufen von Events im Spielverlauf
• Zwischensequenzen

Ich gehe davon aus, dass uns in naher Zukunft noch weitere, viel aufwendigere JS-Spiele von pfiffigen Entwicklern erreichen werden und unser bisherigen Verständnis von Browsergames verändern werden.