seeseekey.net - Invictus Deus Ex Machina

Bomberman kann mittlerweile auf eine lange Geschichte zurückblicken. Man nehme ein paar Mitspieler und versuche sich mit Bomben das Leben so schwer wie möglich zu machen. Mit Bombermine gibt es nun auch eine Implementierung des Spielprinzips welche im Browser spielbar ist.

Bombermine im Browser

Das Spiel setzte dabei unter anderem auf Node.js und HTML5 Techniken auf. Im Gegensatz zu den klassischen Implementationen kann man bei Bombermine mit bis zu 1000 Mitspielern auf der gleichen Karte spielen. Zu finden ist das Spiel auf bombermine.com.

Mit Javascript und Co. ist mittlerweile eine ganze Menge möglich. Das sieht man auch immer wieder an den unterschiedlichsten Experimenten, welche aus dem Hause Google kommen. In diese Fall ist es buildwithchrome.com.

Lego im Browser

Auf der Seite kann man dabei virtuell mit Legosteinen spielen. Leider sind nur rote Steine vorhanden und auch die Steinauswahl ist begrenzt — trotzdem kann man beachtliche Bauwerk erschaffen. Alles in allem ist es ein schönes Beispiel was man mittlerweile im Browser bewerkstelligen kann.

Boulder Dash ist ein Klassiker der Computerspielgeschichte, viele von uns habe dieses Spiel sicherlich stundenlang gespielt. Tóth Krisztián hat sich nun daran gemacht und eine HTML 5 Umsetzung des Spieles entwickelt.

Boulder Dash im Browser

Zu finden ist das Spiel auf boulderdash.krissz.hu. Dabei umfasst die Implementierung nicht nur die Original-Level, sondern auch das Construction-Kit mit welchem man eigene Level erstellen kann. Neben Boulder Dash ist auch eine Implementierung des C64er Spieles Impossible Mission auf seiner Webseite zu finden. Damit kann der Abend in Nostalgie verbracht werden.

3D im Browser war bis vor einigen Jahren noch eine undenkbare Sache. Das höchste der Gefühle war zu dieser Zeit eine Lösung welche auf Flash oder Java basierte. Mittlerweile ist das mit APIs wie WebGL besser geworden. Was mit WebGL alles möglich ist zeigt unter anderem das 3D-MMO Ironbane.

Das Tutorial von Ironbane

Dort bewegt man sich mit einer zweidimensionalen Figur in eine dreidimensionalen Welt. Wie MMO schon dezent andeutet, spielt man mit anderen Spielern zusammen. Das ganze ist dabei freie Software und auf GitHub zu finden. Technisch basiert es dabei auf Node.js. Zu finden ist das Spiel unter http://www.ironbane.com/.

In dem Spiel „Data Dealer“ geht es darum möglichst viel persönliche Daten zu sammeln. Das auf HTML5 basierende Spiel versucht dabei die Mechanismen echter Datenhändler möglichst akkurat abzubilden. Entwickelt wird das ganze dabei vom Cuteacute-Team.

Zur Zeit läuft eine Kickstarter Kampange in welcher $50.000 gesammelt werden sollen. Leider fehlen bis zum 11. Juli noch knapp $ 20.000, so das Unterstützer hier gerne gesehen sind. Das Spiel soll anschließend unter einer Creative Commons Lizenz erscheinen und wird damit freie Software sein. Testen kann man das ganze mit der aktuellen Demoversion unter http://demo.datadealer.net/.

Weitere Informationen gibt es unter:
http://www.heise.de/newsticker/meldung/Data-Dealer-Farmville-fuer-Datenverticker-1889193.html

Es muss nicht immer Powerpoint oder LibreOffice Impress sein. Es geht auch einfacher (und schöner) wie impress.js beweist. Dabei handelt es sich um ein Framework basierend auf CSS3 Transforms welches sich für Präsentationen im Browser eignet.

Das impress.js Demo

Einen Eindruck der Fähigkeiten von impress.js kann man sich auf der entsprechenden Demoseite verschaffen. Das ganze ist dabei freie Software und unter der GPL sowie der MIT-Lizenz lizenziert. Der Quellcode ist auf Github unter https://github.com/bartaz/impress.js zu finden.

Mittels HTML 5 und den entsprechenden APIs wie WebGL ist mittlerweile eine Menge möglich. Besonders schön sieht man das immer wieder an entsprechenden Demos.

Die Visualisierung der Musik

Eines dieser Techdemos ist dabei unter http://do.adive.in/music/ zu finden. Dabei handelt es sich um eine HTML5 App zur Visualisation von Musik. Die jeweiligen Parameter sind dabei frei einstellbar und das Ergebnis ändert sich dann dementsprechend. Daneben ist es auch möglich die eigenen Presents abzuspeichern um sie später wieder zu benutzen.

Das mittlerweile mit CSS Dinge wie Logos und Formen abgebildet werden, hat sich sicherlich schon herumgesprochen. Witzig wird das ganze immer dann, wenn neue Grenzen ausgelotet werden, wie dies auch bei den „CSS Creatures“ geschieht.

bennettfeely.com/csscreatures/

Dort werden kleine Monster gezeigt, welche vollkommen in CSS erstellt wurden. Daneben kann man sich auch eigene Monster erzeugen. Zu finden ist das ganze unter http://bennettfeely.com/csscreatures/.

Bei melonJS handelt es sich um eine Javascript Engine zur Spieleentwicklung im Browser mittels HTML5. Möchte man dort ein Level laden, so geschieht das in Form einer TMX Datei. In melonJS gibt es dabei zwei Methoden zum laden der entsprechenden Daten. Diese sind „me.loader.preload“ und „me.loader.load“. Alle Beispiele welche man im Netz so findet nutzen dabei immer die „preload“ Methode:

var g_resources= [
{ name: "desert1",          type: "image", src: "desert1.png" },
{ name: "desert",           type: "tmx",   src: "desert.tmx" },
{ name: "player_male_base", type: "image", src: "player_male_base.png" },
{ name: "fog",              type: "image", src: "fog.png" }
];

...

me.loader.preload(g_resources);

Das Problem ist das man bei größeren Spielen mit ein paar hundert MiB Spieldaten, das ganze schlecht komplett in den Speicher laden kann. Hierfür gibt es die „load“ Methode. Allerdings enthält diese einige Fehler welche das ganze erschweren. Die „preload“ Methode trägt jede TMX Datei in das Array „levels“ im „me.levelDirector“ ein. Bei der „load“ Methode passiert genau dies nicht. Deshalb muss man hier anders vorgehen (bis der Fehler behoben ist). Ein Minimalbeispiel zum laden eines Levels sieht damit so aus:

<!DOCTYPE html>
<html>
  <head>
    <title>melonJS minimal sample</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <script type="text/javascript" src="melonJS.js"></script>

    <script type="text/javascript">
      var jsApp = {
        start: function() {
          if (!me.video.init('jsapp', 640, 480, false, '1', false))
          {
            alert("Sorry but your browser does not support html 5 canvas.");
            return;
          }

          me.loader.onload = this.loaded.bind(this);

          //lade manuell
          me.loader.load({name: "desert1",  type:"image",  src: "desert1.png"}, this.onload);
          me.loader.load({name: "desert",  type:"tmx",  src: "desert.tmx"}, this.onload);

          //zeige Ladebildschirm
          me.state.change(me.state.LOADING);
        },

        onload: function(data) {
          me.levelDirector.addTMXLevel("desert"); //Bugfix
          me.levelDirector.loadLevel("desert");
        },

        loaded: function() {
          me.state.set(me.state.PLAY, new PlayScreen());
          me.state.change(me.state.PLAY);
        }
      }

      var PlayScreen = me.ScreenObject.extend({
      });

      //starte wenn der Browser bereit ist
      window.onReady(function() {
        jsApp.start();
      });
    </script>
  </body>
</html>

Damit lädt man ein Level dynamisch, ohne auf die „preload“ Methode angewiesen zu sein. Möglich wird dies durch den kleinen Bugfix in der „onload“ Methode:

me.levelDirector.addTMXLevel("desert"); //Bugfix

Dieser sorgt dafür das der levelDirector über die entsprechende TMX Datei informiert wird und somit die Datei beim laden des Levels auch findet.

Über Websockets kann man Binärdaten verschicken, leider ist dies nicht ganz so einfach wie es sein sollte. Das erste Problem ist, das es in JavaScript bis vor einiger Zeit keine „Binärtypen“ gab. Aber dank einiger Dinge ist es mittlerweile möglich Binärdaten per JavaScript und Websockets zu versenden. Mein Problem an der binären Datenübertragung war bisher, das es augenscheinlich nirgens ein komplettes Beispiel gibt, welche diese einfach mal demonstriert. Dabei ist das ganze relativ einfach:

<!DOCTYPE html>
<html>
  <head>
    <title>Websocket Binary Test</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <script type="text/javascript">
      websocket = new WebSocket("ws://echo.websocket.org");
      websocket.binaryType = "arraybuffer"; //Binärtyp auf arraybuffer setzen

      //OnOpen verdraten
      websocket.onopen = function (e) {
        //Array zusammenbauen
        var message = new ArrayBuffer(9);
        var dataViewMessage = new DataView(message);

        dataViewMessage.setInt8(0, 25); //Command ID
        dataViewMessage.setInt16(1, 11); //Account ID
        dataViewMessage.setInt32(5, 43333020); //Anzahl der Credits

        //message per Websocket wegschicken
        websocket.send(message);
      }

      //OnMessage verdraten
      websocket.onmessage = function (wsPackage) {
        //Datentyp ermitteln
        if(wsPackage.data instanceof ArrayBuffer) alert("ArrayBuffer");
        else if(wsPackage.data instanceof Blob) alert("Blob");
        else if(typeof wsPackage.data === "string") alert("string");

        //Daten empfangen und auseinander bauen
        var dataViewPackage = new DataView(wsPackage.data);
        alert(dataViewPackage.getInt8(0));
        alert(dataViewPackage.getInt16(1));
        alert(dataViewPackage.getInt32(5));
      }
    </script>
  </body>
</html>

Im den ersten Zeilen im Skriptteil wird zuerst ein Websocket angelegt, welches sich mit „ws://echo.websocket.org“ verbindet. Dieser Server gibt immer genau das zurück was er empfängt und eignet sich somit ausgezeichnet für diesen kleinen Test.

Danach wird der „binaryType“ des Websockets auf „arraybuffer“ gesetzt, da wir mit einem solchen arbeiten wollen. In der verknüpften „OnOpen“ Methode wird ein „ArrayBuffer“ mit der passenden Größe angelegt und mit diesem ein „DataView“ initialisiert. Mit diesem ist es dann möglich problemlos möglich die entsprechenden Werte in den „ArrayBuffer“ zu setzen.

Dies geschieht dann mit den Zeilen:

dataViewMessage.setInt8(0, 25); //Command ID
dataViewMessage.setInt16(1, 11); //Account ID
dataViewMessage.setInt32(5, 43333020); //Anzahl der Credits

Am Ende wird das ganze weggeschickt und anschließend wieder in der „OnMessage“ Funktion empfangen. Dort wird der Datentyp ermittelt (für den Fall das man mit mehreren Typen arbeitet) und anschließend wird das Paket wieder Binär auseinander genommen.

Weitere Informationen gibt es unter:
http://www.websocket.org/echo.html
http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/
https://developer.mozilla.org/en-US/docs/JavaScript_typed_arrays
http://msdn.microsoft.com/de-de/library/br212463%28v=vs.94%29.aspx
https://developer.mozilla.org/en-US/docs/JavaScript_typed_arrays/ArrayBuffer
http://stackoverflow.com/questions/11390021/transferring-files-with-javascript-through-websockets