Ajaxschmiede.de

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.

Da soll noch mal einer sagen Web-Programmierer haben keinen Sinn für Kunst. Román Cortés hat in vielen Stunden Probierens mit CSS (Cascade Style Sheets) erst ein Porträt von Homer Simpson und einige Wochen später von George W. Bush erstellt. Die „Kunstwerke“ bestehen nur aus Zeichen in verschiedenen Größen, Farben und Positionsangaben. Beim Markieren des Bildes kann man dies sehr gut sehen.

Die Bilder werden im Internet Explorer 5.5+, Firefox 2+, Opera 9+ und Safari 3+ korrekt dargestellt.

Angeregt von Cortés‘ Beitrag veröffentlichte Ned Batchelder in seinem Blog eine mit jQuery animierte Version der Homer-„Grafik“, die den Aufbau anschaulich darstellt.

Ü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.

Harald Kirschner veröffentlichte Version 2.0 seiner Multi-Uploadlösung FancyUpload, die den Flashuploader swiff und die Javascript-Bibliothek MooTools voraussetzt.

FancyUpload ist eine einfach zu handhabende Anwendung, die es ermöglicht mehrere Uploads nacheinander auszuführen und diesen Vorgang graphisch darzustellen. Es ist leicht einzurichten, serverunabhängig, lässt sich mit Hilfe von CSS und XHTML vollständig frei gestalten und basiert auf MooTools, um auf allen aktuellen Browsern (Internet Explorer 6+, Opera 9, Firefox 1.5+ und Safari 2+) zu laufen.

Die Featureliste liest sich wie folgt:

• Auswählen und Uploaden von mehreren Dateien
• Herausfiltern von Dateitypen durch einen Auswahldialog
• Optionale Events um eigene Ereignisfunktionen einzubinden
• Anzeigen von nützlichen Dateiinformationen noch vor Beginn des Uploadvorgangs
• Begrenzen der Uploads über die Dateigröße oder – anzahl
• plattform- und serverunabhängig, setzt nur Flash 9+ vorraus
• Abbrechen laufender Uploads, Hinzufügen neuer Uploads während eines laufenden Hochladevorgangs
• Alles ist optional, dokumentiert und lässt sich leicht anpassen
• Serverantwort nach dem Uploaden zum Anzeigen zusätzlicher Dateiinformationen oder einer Bildvorschau
• Angabe der aktuellen Uploadgeschwindigkeit und der verbleibenden Zeit
• Senden zusätzlicher Informationen über Variablen mittels GET und POST
• Bestimmen des Dateinamens nach dem Uploadvorgang

Wie die Entwickler des WebKit-Browsers in ihrem Blog berichten, unterstützt ihr Schützling ab sofort CSS-Masken, mit denen sich sehr coole Effekte erzeugen lassen. Möglich wird dies durch die folgenden, neu eingeführten CSS-Eigenschaften:

• -webkit-mask (background)
• -webkit-mask-attachment (background-attachment)
• -webkit-mask-clip (background-clip)
• -webkit-mask-origin (background-origin)
• -webkit-mask-image (background-image)
• -webkit-mask-repeat (background-repeat)
• -webkit-mask-composite (background-composite)
• -webkit-mask-box-image (border-image)

Mit den CSS-Masken ergeben sich interessante Möglichkeiten um Überblendeffekte zu erstellen. So kann man beispielsweise ein Bild mit einem weichen Übergang zum Hintergrund erschaffen, indem man dem Bild eine Maskengrafik erweist. Der Quellcode dafür sieht wie folgt aus:

<img src=”kate.png” style=”-webkit-mask-box-image: url(mask.png) 75 stretch;” />

Des weiteren ist ebenso gut möglich, die vor kurzem vorgestellten Gradienten als Maskengrafik zu verwenden um Verläufe zu erzeugen. Der Code hierfür lautet:

<img src=”kate.png” style=”-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1), to(rgba(0,0,0,0))” />

Auch svg-Grafiken eigenen sich als Grundlage für CSS-Masken. Dafür wird folgende Syntax angewandt:

<img src=”kate.png” style=”-webkit-mask-image: url(circle.svg)” />

WebKit stellt die Mittel zur Verfügung, es liegt an uns Webentwicklern die Chancen zu erkennen und die neuen Funktionen zu verwenden.

Ich bezweifle jedoch, dass sich die hier vorgestellten Masken in dieser Form mittelfristig durchsetzen werden, da sie erst in zukünftigen CSS-Definitionen Einzug halten. Es wird noch etliche Zeit dauern bis CSS-Masken auch von den „gewöhnlichen“ Browsern, zu denen ich WebKit nicht zähle, unterstützt werden.

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.

In dieser Woche sind jeweils neue Versionen und Snapshots der wichtigsten Browser erschienen. Während die einen Sicherheitslücken schließen, bieten andere gänzlich neue Möglichkeiten.

Den Anfang machen die beiden Browser der Mozilla Foundation mit Namen Firefox und Appels Safari. Die neuen Versionen 2.0.0.14 von FF und 3.1.1 von Safari, die jeweils auch in deutscher Sprache zur Verfügung stehen, beheben einige Sicherheitslücken, die es zum Beispiel ermöglichten den Browser zum Absturz zu bringen bzw. schadhaften Code aus dem Clienten-Rechner auszuführen. In beiden Fällen steckte der Fehler in der Javascript-Engine.

Ein Fehler, der nur im Safari – sowohl die Windows- als auch die Mac-Version, betrifft, ermöglichte das Ausführen von Cross-Site-Scripting-Attacken indem ein Doppelpunkt in die Adressleiste eingegeben wurde.

Es wird dringend empfohlen, auf die veröffentlichen Versionen upzudaten!

Auch bei den Opera-Entwicklern gibt es Neuigkeiten zu vermelden. Im aktuellen Nightly Build wurde eine neue Schutzfunktion zum Warnen vor gefakten und betrügerischen Websites integriert. Diese „fraud protection“ ermöglicht besseres, schnelleres und nachvollziehbareres Blocken von unerwünschten Seiten und ist standardmäßig aktiviert. Zudem wurde eine zweite Beta der Version 9.5 in Aussicht gestellt.

Völliges Neuland betreten die Entwickler von WebKit. Ihr Browser unterstützt ab sofort die in HTML5 erwähnten Gradientenfarbverläufe. Die Syntax sieht wie folgt aus:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Die einzelnen Attribute haben folgende Bedeutung:

• type – bestimmt die Art des Gradienten („linear“ oder „radial“)
• point – ist ein Pärchen von mit Leerzeichen abgetrennten Werten (in Zahlen, Prozentangaben und Beschreibungen wie „bottom“)
• radius – gibt den Radius des Gradienten beim Typ „radial“ an
• stop – ist eine Funktion mit Namen „color-stop“, die 2 Argumente erwartet – „stop value“ (ein Wert zwischen 0 und 1 oder prozentual) und „color“ (eine css-konforme Farbangabe)

Die Gradientenverläufe lassen sich auf Hintergründe, Rahmen, Listengrafiken und als eingebettete Grafiken verwenden. Wer genaueres wissen möchte, schaue sich den WebKit-Blog zu diesem Thema an.

Auf der dänischen Javascript-Website Nihilogic wurde vor wenigen Tagen eine Canvas-Adaption des Spieleklassikers Super Mario vorgestellt.

Das gesamte „Spiel“ kommt ohne Grafikdateien aus. Die dargestellten Elemente werden über Canvas, einem HTML5-Element zum Darstellen von Grafiken im Webbrowser, erzeugt. Da der Internet Explorer, einschließlich Version 8 – wie wir berichten – Canvas nicht unterstürzt, wurde ein DIV-Fallbackmodus eingerichtet.

Auch an die Hintergrundmusik wurde gedacht. Diese stammt von einer MIDI-Datei, die mittels base64-Kodierung direkt in den Javascript-Code eingebunden wurden.

Die Ausführgeschwindigkeit der JS-Spielerei kann zwar zwischen den einzelnen Browern variieren, läuft aber sowohl mit Firefox, Opera, Safari als auch mit dem erwähnten IE.

Ich halte die Umsetzung für eine gelunge Demonstration, was in Zukunft alles möglich ist im Web, wenn sich gewisse (neuere) Standards durchsetzen. Es handelt sich hierbei um keinen komplettem Level!