Mai 29 2008

Mit virtuellen Maschinen zu neuen Javascript-Geschwindigkeitsrekorden

Tag: TrendsPatrick @ 10:50 pm

In der vergangenen Woche erwähnte ich im Zusammenhang mit der Einführung von Video-Tags im Firefox die Zukunftspläne der Mozilla Foundation in Bezug auf Javascript. So planen die Entwickler in der Ende 2009 erscheinenden 4. Auflage des Alternativbrowsers Javascript als virtuelle Maschine laufen zu lassen, um so Skripte um ein vielfaches schneller ausführen zu lassen.

Jetzt meldet sich das Webkit-Lager zu diesem Thema zu Wort und stellt mit der SquirrelFish-Engine die wohl schnellste Javascript-Implemtierung vor, die – ebenso wie Mozillas künftige Tamarin-Engine – zur enormen Beschleunigung der Codeausführung auf Virtuelle Maschinen setzt. Die Entwickler des freien Browser, der von Apple im Safari verwendet wird, versprechen vollmundig von einem Geschwindigkeitszuwachs um den Faktor 4.

Es wird sicher noch etliche Zeit ins Land gehen bis SquirreFish im Safari Einzug halten wird. Dennoch kann man sehr gespannt sein, was Webkit da aus dem Hut zaubert, denn bereits die aktuell verwendete Javascript-Engine überzeugt in Geschwindigkeitstests.

Neu ist die Idee der virtuellen Maschinen nicht. So nutzt beispielsweise die Java-Plattform seit langer Zeit die hauseigene Java Virtual Machine (JVM), und auch Adobe integriete diese Technik in die neunte Flash-Generation.

Bei einer virtuellen Maschine wird der Programmcode in plattformunabhängigen Bytecode umgewandelt, der dann bei der Ausführung auf einen System in hardwarespezifischen Maschinencode übersetzt wird. Der Vorteil gegenüber einer herkömmlichen Engine liegt – ähnlich wie bei Mehrkernprozessoren und Programmen, die von mehreren Kernen Gebrauch machen – in der dynamischen Optimierung und Lastverteilung, was zu einer schnelleren und effizienteren Codebearbeitung führt.


Mai 27 2008

Super Mario Kart als Javascript-Spiel

Tag: Canvas,Javascript,SpielePatrick @ 10:51 pm

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.

Super Mario Kart mit Javascript und Canvas


Mai 22 2008

Die goldenen Regeln für schnelle Prototype-Anwendungen

Tag: PrototypePatrick @ 12:14 am

Der hollänische BWL-Student und Javascript-Programmierer Thierry Schellenbach veröffentliche in seinem Mellow-Morning-Blog eine Abhandlung über geschwindigkeitsoptimiertes Entwickeln von Prototype-Anwendungen. Als Grundlage nutzte Schellenbach die Arbeiten von Joseph Smarr und Mark Wilton-Jones.

Zusammengefasst lassen sich die folgenden Tipps festhalten:

  • Vermeide die $$-Funktion zum Ansprechen von Elementen mit ids
  • Vermeide das Verwenden der bind-Funktion
  • Bevorzuge element.innerHTML gegenüber element.update() und document.createElement
  • Nutze for-Schleifen anstelle von each
  • Sei sparsam mit eval-Aufrufen
  • Sei sparsam mit try-catch-Befehlen
  • Speichere Variablen und Funktionen zwischen (Cache)
  • Führe Funktionen und Events erst dann aus, wenn sie wirklich gebraucht werden
  • Optimiere Schleifendurchläufe dahingehend, dass sie nur bei zu ändernden Elementen greifen

Mai 20 2008

Firefox 3.1 unterstützt HTML5-Videotags

Tag: TrendsPatrick @ 10:53 pm

Wenige Tage ist es her, da stellte die Mozilla Foundation den ersten (und wohlmöglich einzigen) Release Canidate des Firefox 3.0, der nochmals in Sachen Stabilität und Geschwindigkeit gegenüber den Betas zulegte, vor. Mit dem Erscheinen der finalen Version dürfte in den kommenden Wochen – ich gehe von spätestens Ende Juni aus – gerechnet werden. Doch bereits jetzt werfen die zukünftigen Mozillabrowser ihre Schatten in den Weiten des Web.

Noch Ende diesen Jahres steht die Version 3.1 des Firefox ins Haus. Mit an Bord ist dabei die Unterstützung des in HTML5 standardisierten Video-Tags. Dadurch wird es möglich sein Videos nativ durch den Browser, d.h. ohne Einsatz von Plugins wie Adobe Flash, wiederzugeben.

Völlig neu ist die Unterstützung durch die Browserhersteller nicht. Der Safari-Browser beherrscht den Support des neuen Video- als auch des Audio-Tags seit fast einem dreiviertel Jahr.

Uneinig sind sich die Browserentwickler jedoch über den zu verwendenden Codec. Während die Opera- und Mozilla-Fraktion auf den freien Ogg Theora-Codec setzt, nutzt das Apple-Lager den unter Lizenz stehenden H.264-Codec. Aufgrung von möglichen Softwarepatentverletzungen kann man davon ausgehen, dass Apple eine zusätzliche Unterstützung von Ogg Theora nicht implementieren wird, da sonst Klagen in Millionenhöhe auf Apple zukämen.

Mit Version 3.1 des Firefox wird auch die bereits für 3.0 versprochene Umsetzung von Cross-Site-XMLHttpRequests nachgereicht. Dadurch wird die bisher strikte Regel, dass AJAX-Anfragen nicht an fremde Webserver gesendet werden dürfen, aufgehoben. Ermöglich wird dies durch die Einführung von Access-Control Headers, die vorher prüfen, ob das Senden eines Request durch den fremden Webserver gestattet wird.

Doch damit nicht genug. Wahrscheinlich in der ersten Hälfte des Jahres 2009 wird der auf der Gecko-Engine 1.9.1 basierende Firefox 3.5 das Licht der Welt erblicken, ehe Ende 2009 gar die 4. Generation des feuerroten Browsers ansteht, die dann aber bereits die neu entwickelten Gecko-2-Render-Engine nutzt. Als große Neuerung steht dabei die Einführung einer virtuellen Maschine zur wesentlich effizienteren Javascript-Ausführung auf der Featureliste.


Mai 18 2008

Einführung in Canvas

Tag: CanvasPatrick @ 5:06 pm

Da ich in letzter Zeit über einige Projekte geschrieben habe, die auf Canvas beruhen, möchte ich über dessen Möglichkeiten und Funktionen in Form eines kleinen Tutorials berichten. In meinen Ausführungen orientiere ich mich an der Umsetzung im Mozilla Firefox und benutze als Grundlage die englischsprachige Dokumentation von Mozilla

Was ist Canvas, wer unterstützt es und woher kommt es?

Canvas ist ein grafisches Element, das mit HTML5 eingeführt werden wird. Mit Canvas ist es möglich Grafiken, Graphen und einfache Animationen mit Hilfe von Skript-Sprachen (vorrangig Javascript) dynamisch zu erzeugen. (Das Thema Animationen lasse ich in diesem Artikel außen vor.) Der aktuelle Spezifikationvorschlag ist auf der Seite http://www.whatwg.org einzusehen.

Das Canvas-Element wurde ursprünglich von Apple im OS X Dashboard zum skriptbasierten Erstellen von Minianwendungen (sogenannten Widgets) ins Leben gerufen und wurde somit vom hauseigenen Browser Safari unterstützt. Der Support seitens Mozilla begann mit der Gecko-Engine in Version 1.8, die im Firefox 1.5 verwendet wurde. Opera kommt ab Versionsnummer 9 mit Canvas zu recht.

Einzig der Internet Explorer (in allen Varianten) bietet keine Unterstützung des Elementes. Bisher ist dies auch nicht geplant, wie ich bereits in meinem Beitrag über die IE8-Beta erwähnte. Abhilfe schafft das ExplorerCanvas-Skript, das dem Internet Explorer die fehlende Unterstützung nachliefert.

Einbau in den Quellcode

Wie jedes andere HTML-Element wird das Canvas-Element im Quellcode eingebettet. Hierbei ist zu beachten, dass man die Ausmaße der anzuzeigenden Grafik über width und height angibt.

<canvas id="canvas1" width="400" height="100"></canvas>

Der eigentliche Canvas-Code ist in Javascript geschrieben und befindet sich im entsprechenden HTML-Tag. Es empfiehlt sich den Canvas-Code in eine Funktion zu packen, die dann nach dem Laden der Seite aufgerufen wird. Dies erreicht man durch den onload-Befehl, den man entweder direkt in HTML auf das body-Element anwendet oder per Javascript über Event-Methoden anhängt.

in HTML:

<body onload="draw();">

in Javascript:

if ( window.addEventListener ) {
addEventListener( "load", draw, false );
} else {
attachEvent( "onload", draw );
}

Im Javascript-Bereich wird die von mir draw genannte Funktion definiert.

Canvas-Methoden

Ich habe eine Demonstrationsseite erstellt, in der alle hier vorgestellten Methoden angewandt werden. Hinweis: Scheinbar nicht alle Beispiele sind im IE mit ExplorerCanvas nachvollziehbar.

Eine draw-Funktion sieht beispielsweise wie folgt aus:

function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
canvas = canvas.getContext('2d');
canvas.fillStyle = "rgb(200,0,0)";
canvas.fillRect( 10, 10, 55, 55 );
}
}

Die Abfrage nach der Funktion getContext dient dazu, festzustellen ob der Browser Canvas unterstützt und es somit zu keinen JS-Fehlern bei fehlendem Support kommt. Als erstes weist man einer Variable den Pfad zum Canvas-Element zu, in das die Grafik hineingezeichnet werden soll, und wendet dann darauf die Methode getContext(’2d’) an, mit der das Zeichnen eingeleitet wird.

Rechtecke und Gestaltungsmöglichkeiten

Wie man dem oberen Beispiel entnehmen kann, werden einfarbige, gefüllte Rechtecke mit der Funktion fillRect gezeichnet.

Parameter: fillRect( x-Koordinate, y-Koordinate, Breite, Höhe )

Mittels fillStyle kann man die Farbe des darzustellenden Rechtecks festlegen. Erlaubt sind die gewohnten Angaben mit Farbnamen, im rgb(a)-Format und Hexadezimalsystem.

Es ist ebenso möglich ein Rechteck nur mit Umrissen zu zeichnen. Dies wird über die Funktionen strokeRect und strokeStyle realisiert, die genauso benutzt werden können, wie die Methoden für ausgefüllte Rechtecke.

Linien und freie Formen

Das Erstellen von Linien geschieht mit der Methode lineTo, die als Parameter den Endpunkt der zu zeichnenden Gerade enthält.

Parameter: lineTo( x-Koordinate, y-Koordinate )

Um den Startpunkt der Geraden zu verlegen, nutzt man die Funktion moveTo, die ebenfalls einen x- und y-Wert als Parameter erwartet. Durch moveTo kann man sich frei im (virtuellen) “Raum” bewegen.

Parameter: moveTo( x-Koordinate, y-Koordinate )

Um zusammengesetzte Linien zu zeichnen verwendet man die Path-Funktion, die mit beginPath eingeleitet wird. Die danach folgenden Anweisungen wie lineTo geben die Eckpunkte des Pfades an.

Mit den anschließend notierten Methoden fill oder stroke entscheidet man, ob die neu geschaffene Form ausgefüllt oder nur umrandet dargestellt werden soll. Es existiert auch eine closePath-Method zum Festlegen des Pfadendes, die bei Verwendung von fill getrost weggelassen werden kann. Hierbei werden der erste und der letzte Punkt automatisch miteinander verbunden und es ergibt sich somit eine selbstdefinierte “Form”.

Hier ein Codeschnipsel zur Verdeutlichung:

canvas.fillStyle = "rgba(0,150,0,0.7)";
canvas.beginPath();
canvas.moveTo( 50, 75 );
canvas.lineTo( 100, 125 );
canvas.lineTo( 100, 25 );
canvas.fill();

Kreise, Bögen und Kurven

Doch Canvas ist nicht nur auf Geraden und rechteckige Figuren beschränkt. Mit dem Befehl arc zeichnet man Kreise – wie bei den Rechtecken entweder umrahmt oder ausgefüllt.

Parameter: arc( x-Koordinate Kreismittelpunkt, y-Koordinate Kreismittelpunkt, Radius, Startwinkel, Endwinkel, Uhrzeigersinn [ true / false ] );

Bei Kreisen gibt es zwei Dinge zu beachten. Zum einen sind der Start- und Endwinkel in der Einheit Bogenmaß anzugeben, also nicht im Gradmaß. Der 360°-Vollwinkel ist dementsprechend 2*Math.PI. Zum anderen muss man festlegen, ob man die Winkelangaben mit oder entgegen dem Uhrzeigersinn betrachtet.

Ein gefüllter Vollkreis wird beispielsweise mit folgendem Code erzeugt:

canvas.fillStyle = "rgb(0,100,0)";
canvas.beginPath();
canvas.arc( 200, 75, 30, 0, 2*Math.PI, true);
canvas.fill();

Das Darstellen von komplexeren Kurven geschieht mit den beiden Methoden bezierCurveTo und quadraticCurveTo.

Parameter: quadraticCurveTo( x-Koordinate Kontrollpunkt, y-Koordinate Kontrollpunkt, x-Koordinate Endpunkt, x-Koordinate Endpunkt )

Parameter: bezierCurveTo(x-Koordinate Kontrollpunkt 1, y-Koordinate Kontrollpunkt 1, x-Koordinate Kontrollpunkt 2, y-Koordinate Kontrollpunkt 2, x-Koordinate Endpunkt, x-Koordinate Endpunkt )

Während bei der quadratischen Bezierkurve nur ein Kontrollpunkt zur Verlaufsbestimmung benutzt wird, werden bei der bezierCurveTo-Funktion 2 Kontrollpunkte benutzt. Jedoch ist das freie Zeichnen von Bezierkurven, also ohne visuellen Vorschau, äußert zeitaufwendig und eine Herausforderung.

Hier ein Beispiel dazu:

canvas.fillStyle = "rgb(245,0,0)";
canvas.beginPath();
canvas.moveTo( 75, 40 );
canvas.bezierCurveTo( 75, 37, 70, 25, 50, 25 );
canvas.bezierCurveTo( 20, 25, 20, 62.5, 20, 62.5 );
canvas.bezierCurveTo( 20, 80, 40, 102, 75, 120 );
canvas.bezierCurveTo( 110, 102, 130, 80, 130, 62.5 );
canvas.bezierCurveTo( 130, 62.5, 130, 25, 100, 25 );
canvas.bezierCurveTo( 85, 25, 75, 37, 75, 40 );
canvas.fill();

canvas.beginPath();
canvas.moveTo( 200, 25 );
canvas.quadraticCurveTo( 150, 25, 150, 62.5 );
canvas.quadraticCurveTo( 150, 100, 175, 100 );
canvas.quadraticCurveTo( 175, 120, 155, 125 );
canvas.quadraticCurveTo( 185, 120, 190, 100 );
canvas.quadraticCurveTo( 250, 100, 250, 62.5 );
canvas.quadraticCurveTo( 250, 25, 200, 25 );
canvas.stroke();

Weitere gestalterische Möglichkeiten

Desweiteren bietet Canvas grundlegende Funktionen zum Manipulieren der Linien und Linienübergänge.

Die Linienstärke wird über lineWidth festgelegt. Mit lineCap bestimmt man das Aussehen der Linienenden. Dazu stehen die folgenden Varianten zur Auswahl: butt (stumpf), round (abgerundet) und square (Überhang). Sowohl das Überhang als auch der Halbkreis haben eine Höhe respektive einen Radius entsprechend dem halben Wert der Linienbreite. butt entspricht dem Standardwert.

canvas.lineWidth = 15;
canvas.lineCap = "round";
canvas.beginPath();
canvas.moveTo( 110, 20 );
canvas.lineTo( 110, 130 );
canvas.stroke();

Mit lineJoin bestimmt man das Aussehen der Ecken zweier verbundener Linien. Hierbei stehen die Attribute round (abgerundet), bevel (abgeschrägt) und miter (eckig) zur Verfügung. Der default-Wert ist round.

canvas.lineJoin = "bevel";
canvas.beginPath();
canvas.moveTo( 200, 60 );
canvas.lineTo( 225, 85 );
canvas.lineTo( 250, 60 );
canvas.lineTo( 275, 85 );
canvas.lineTo( 300, 60 );
canvas.stroke();

Farbverläufe

Canvas ermöglicht Formen sowohl mit linearen als auch mit radialen Farbverläufen auszufüllen. Dazu wird einer Variable ein Verlauf zugewiesen. Die dazugehörigen Methodenaufrufe lauten createLinearGradient und createRadialGradient. Jeweils wird ein Startpunkt beziehungsweise -kreis und ein Endpunkt beziehungsweise -kreis als Parameter angeben, die den Bereich angeben, in dem der Farbverlauf sich erstreckt.

Parameter: createLinearGradient( x-Koordinate Startpunkt, y-Koordinate Startpunkt, x-Koordinate Endpunkt, y-Koordinate Endpunkt )

Parameter: createRadialGradient( x-Koordinate Mittelpunkt Startkreis, y-Koordinate Mittelpunkt Startkreis, Radius Startkreis, x-Koordinate Mittelpunkt Endkreis, y-Koordinate Endpunkt Startkreis, Radius Endkreis )

Anschließend werden die einzelnen farblichen Zwischenstufen mittels addColorStop definiert. Der Funktion fillStyle wird im Anschluß die Variable, die den Verlaufbeinhaltet, zugewiesen.

Parameter: addColorStop( Position [Werte zwischen 0-1 sind erlaubt], Farbdefinition );

Hier ein Beispiel eines Farbverlaufsskriptes:

var lingrad = canvas.createLinearGradient( 0, 0, 0, 150 );
lingrad.addColorStop( 0, "#0099cc" );
lingrad.addColorStop( 0.5, "#fff" );
lingrad.addColorStop( 0.5, "#99cc00");
lingrad.addColorStop( 1, "#0099ff");

canvas.fillStyle = lingrad;
canvas.fillRect( 10, 10, 130 ,130 );

Muster

Neben den bisher genannten Füllmöglichkeiten gibt es noch eine weitere Art die Fläche einer Form auszufüllen. Die Rede ist von Mustern, die aus gewöhnlich Bilddateien generiert werden. Dazu erstellt man zuerst ein neues Image-Objekt, weist diesem den Pfad zur zu verwendenden Grafikquelle zu und definiert eine onload-Funktion, die nach erfolgreichem Laden des Bildes mittels createPattern ein neues Muster erstellt.

Parameter: createPattern( Image-Objekt, Art der Wiederholungen )

Neben der Wiederholungsart “repeat” gibt es – ähnlich der CSS-Eigenschaft background-repeat – weitere Varianten um beispielsweise Wiederholungen nur in x- oder y-Richtung zu erzeugen. Jedoch sind diese noch nicht implementiert.

Der folgende Javascript-Code soll das Vorgehen aufzeigen:

var img = new Image();
img.src="wallpaper.png";
img.onload = function() {
var pattern = canvas.createPattern( img, "repeat" );
canvas.fillStyle = pattern;
canvas.fillRect( 0, 0, 400, 150 );
}

Ausblick

Mozilla wird mit der Version 3.0 des Firefox-Browser, der auf der Gecko-Enging 1.9 basiert, in Sachen Gestaltungsmöglichkeiten von Canvas einen Schritt weiter gehen und das Rendern von Text erlauben. Dazu werden die folgenden mozilla-spezifischen Methoden eingeführt:

  • mozDrawText() – zeichnet Text
  • mozMeasureText() – gibt die Breite des zuzeichnenden Textes zurück
  • mozPathText() – definiert einen Textpfad
  • mozTextAlongPath() – zeichnet Text entlang eines vorher definierten Pfades

Zur Demonstrationsseite


Mai 08 2008

Codekomprimierung mal anders

Tag: Allgemeines,Canvas,JavascriptPatrick @ 9:57 am

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.

Prototype in png komprimiert jQuery in png komprimiert Mario in png komprimiert


Mai 07 2008

Wolfenstein 3D für den Browser

Tag: Canvas,Javascript,SpielePatrick @ 11:49 pm

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.

Wolfenstein 3D in Javascript und Canvas


Mai 06 2008

Homer Simpson und George Bush als CSS-Porträt

Tag: AllgemeinesPatrick @ 8:09 pm

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.

Homer in CSSGeorge Bush in CSS