seeseekey.net - Invictus Deus Ex Machina

Bom­ber­man kann mitt­ler­weile auf eine lange Geschichte zurück­bli­cken. Man nehme ein paar Mit­spie­ler und ver­su­che sich mit Bom­ben das Leben so schwer wie mög­lich zu machen. Mit Bom­ber­mine gibt es nun auch eine Imple­men­tie­rung des Spiel­prin­zips wel­che im Brow­ser spiel­bar ist.

Bom­ber­mine im Browser

Das Spiel setzte dabei unter ande­rem auf Node.js und HTML5 Tech­ni­ken auf. Im Gegen­satz zu den klas­si­schen Imple­men­ta­tio­nen kann man bei Bom­ber­mine mit bis zu 1000 Mit­spie­lern auf der glei­chen Karte spie­len. Zu fin­den ist das Spiel auf bombermine.com.

Mit Java­script und Co. ist mitt­ler­weile eine ganze Menge mög­lich. Das sieht man auch immer wie­der an den unter­schied­lichs­ten Expe­ri­men­ten, wel­che aus dem Hause Google kom­men. In diese Fall ist es buildwithchrome.com.

Lego im Browser

Auf der Seite kann man dabei vir­tu­ell mit Lego­stei­nen spie­len. Lei­der sind nur rote Steine vor­han­den und auch die Stein­aus­wahl ist begrenzt — trotz­dem kann man beacht­li­che Bau­werk erschaf­fen. Alles in allem ist es ein schö­nes Bei­spiel was man mitt­ler­weile im Brow­ser bewerk­stel­li­gen kann.

Boul­der Dash ist ein Klas­si­ker der Com­pu­ter­spiel­ge­schichte, viele von uns habe die­ses Spiel sicher­lich stun­den­lang gespielt. Tóth Krisz­tián hat sich nun daran gemacht und eine HTML 5 Umset­zung des Spie­les entwickelt.

Boul­der Dash im Browser

Zu fin­den ist das Spiel auf boulderdash.krissz.hu. Dabei umfasst die Imple­men­tie­rung nicht nur die Original-Level, son­dern auch das Construction-Kit mit wel­chem man eigene Level erstel­len kann. Neben Boul­der Dash ist auch eine Imple­men­tie­rung des C64er Spie­les Impos­si­ble Mis­sion auf sei­ner Web­seite zu fin­den. Damit kann der Abend in Nost­al­gie ver­bracht werden.

3D im Brow­ser war bis vor eini­gen Jah­ren noch eine undenk­bare Sache. Das höchste der Gefühle war zu die­ser Zeit eine Lösung wel­che auf Flash oder Java basierte. Mitt­ler­weile ist das mit APIs wie WebGL bes­ser gewor­den. Was mit WebGL alles mög­lich ist zeigt unter ande­rem das 3D-MMO Ironbane.

Das Tuto­rial von Ironbane

Dort bewegt man sich mit einer zwei­di­men­sio­na­len Figur in eine drei­di­men­sio­na­len Welt. Wie MMO schon dezent andeu­tet, spielt man mit ande­ren Spie­lern zusam­men. Das ganze ist dabei freie Soft­ware und auf Git­Hub zu fin­den. Tech­nisch basiert es dabei auf Node.js. Zu fin­den ist das Spiel unter http://www.ironbane.com/.

In dem Spiel „Data Dea­ler“ geht es darum mög­lichst viel per­sön­li­che Daten zu sam­meln. Das auf HTML5 basie­rende Spiel ver­sucht dabei die Mecha­nis­men ech­ter Daten­händ­ler mög­lichst akku­rat abzu­bil­den. Ent­wi­ckelt wird das ganze dabei vom Cuteacute-Team.

Zur Zeit läuft eine Kick­star­ter Kam­pange in wel­cher $50.000 gesam­melt wer­den sol­len. Lei­der feh­len bis zum 11. Juli noch knapp $ 20.000, so das Unter­stüt­zer hier gerne gese­hen sind. Das Spiel soll anschlie­ßend unter einer Crea­tive Com­mons Lizenz erschei­nen und wird damit freie Soft­ware sein. Tes­ten kann man das ganze mit der aktu­el­len Demo­ver­sion unter http://demo.datadealer.net/.

Wei­tere Infor­ma­tio­nen gibt es unter:
http://www.heise.de/newsticker/meldung/Data-Dealer-Farmville-fuer-Datenverticker-1889193.html

Es muss nicht immer Power­point oder Libre­Of­fice Impress sein. Es geht auch ein­fa­cher (und schö­ner) wie impress.js beweist. Dabei han­delt es sich um ein Frame­work basie­rend auf CSS3 Trans­forms wel­ches sich für Prä­sen­ta­tio­nen im Brow­ser eignet.

Das impress.js Demo

Einen Ein­druck der Fähig­kei­ten von impress.js kann man sich auf der ent­spre­chen­den Demo­seite ver­schaf­fen. Das ganze ist dabei freie Soft­ware und unter der GPL sowie der MIT-Lizenz lizen­ziert. Der Quell­code ist auf Git­hub unter https://github.com/bartaz/impress.js zu finden.

Mit­tels HTML 5 und den ent­spre­chen­den APIs wie WebGL ist mitt­ler­weile eine Menge mög­lich. Beson­ders schön sieht man das immer wie­der an ent­spre­chen­den Demos.

Die Visua­li­sie­rung der Musik

Eines die­ser Tech­de­mos ist dabei unter http://do.adive.in/music/ zu fin­den. Dabei han­delt es sich um eine HTML5 App zur Visua­li­sa­tion von Musik. Die jewei­li­gen Para­me­ter sind dabei frei ein­stell­bar und das Ergeb­nis ändert sich dann dem­ent­spre­chend. Dane­ben ist es auch mög­lich die eige­nen Pres­ents abzu­spei­chern um sie spä­ter wie­der zu benutzen.

Das mitt­ler­weile mit CSS Dinge wie Logos und For­men abge­bil­det wer­den, hat sich sicher­lich schon her­um­ge­spro­chen. Wit­zig wird das ganze immer dann, wenn neue Gren­zen aus­ge­lo­tet wer­den, wie dies auch bei den „CSS Crea­tures“ geschieht.

bennettfeely.com/csscreatures/

Dort wer­den kleine Mons­ter gezeigt, wel­che voll­kom­men in CSS erstellt wur­den. Dane­ben kann man sich auch eigene Mons­ter erzeu­gen. Zu fin­den ist das ganze unter http://bennettfeely.com/csscreatures/.

Bei melonJS han­delt es sich um eine Java­script Engine zur Spie­le­ent­wick­lung im Brow­ser mit­tels HTML5. Möchte man dort ein Level laden, so geschieht das in Form einer TMX Datei. In melonJS gibt es dabei zwei Metho­den zum laden der ent­spre­chen­den Daten. Diese sind „me.loader.preload“ und „me.loader.load“. Alle Bei­spiele wel­che man im Netz so fin­det nut­zen dabei immer die „pre­load“ 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 Pro­blem ist das man bei grö­ße­ren Spie­len mit ein paar hun­dert MiB Spiel­da­ten, das ganze schlecht kom­plett in den Spei­cher laden kann. Hier­für gibt es die „load“ Methode. Aller­dings ent­hält diese einige Feh­ler wel­che das ganze erschwe­ren. Die „pre­load“ Methode trägt jede TMX Datei in das Array „levels“ im „me.levelDirector“ ein. Bei der „load“ Methode pas­siert genau dies nicht. Des­halb muss man hier anders vor­ge­hen (bis der Feh­ler beho­ben ist). Ein Mini­mal­b­ei­spiel 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 dyna­misch, ohne auf die „pre­load“ Methode ange­wie­sen zu sein. Mög­lich wird dies durch den klei­nen Bug­fix in der „onload“ Methode:

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

Die­ser sorgt dafür das der level­Di­rec­tor über die ent­spre­chende TMX Datei infor­miert wird und somit die Datei beim laden des Levels auch findet.

Über Webso­ckets kann man Binär­da­ten ver­schi­cken, lei­der ist dies nicht ganz so ein­fach wie es sein sollte. Das erste Pro­blem ist, das es in Java­Script bis vor eini­ger Zeit keine „Binär­ty­pen“ gab. Aber dank eini­ger Dinge ist es mitt­ler­weile mög­lich Binär­da­ten per Java­Script und Webso­ckets zu ver­sen­den. Mein Pro­blem an der binä­ren Daten­über­tra­gung war bis­her, das es augen­schein­lich nir­gens ein kom­plet­tes Bei­spiel gibt, wel­che diese ein­fach mal demons­triert. Dabei ist das ganze rela­tiv 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 ers­ten Zei­len im Skript­teil wird zuerst ein Webso­cket ange­legt, wel­ches sich mit „ws://echo.websocket.org“ ver­bin­det. Die­ser Ser­ver gibt immer genau das zurück was er emp­fängt und eig­net sich somit aus­ge­zeich­net für die­sen klei­nen Test.

Danach wird der „bina­ry­Type“ des Webso­ckets auf „array­buf­fer“ gesetzt, da wir mit einem sol­chen arbei­ten wol­len. In der ver­knüpf­ten „OnO­pen“ Methode wird ein „Array­Buf­fer“ mit der pas­sen­den Größe ange­legt und mit die­sem ein „Data­View“ initia­li­siert. Mit die­sem ist es dann mög­lich pro­blem­los mög­lich die ent­spre­chen­den Werte in den „Array­Buf­fer“ 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 weg­ge­schickt und anschlie­ßend wie­der in der „OnMes­sage“ Funk­tion emp­fan­gen. Dort wird der Daten­typ ermit­telt (für den Fall das man mit meh­re­ren Typen arbei­tet) und anschlie­ßend wird das Paket wie­der Binär aus­ein­an­der genommen.

Wei­tere Infor­ma­tio­nen 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