melonJS ohne preload benutzen

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.

Rebuild of Invertika

Nach einigen Monaten ist es Zeit den Zwischenstand für den neuen Invertika Server und den Client vorzustellen. Invertika soll somit auf einer neuen technischen Basis stehen. Diese neue technische Basis sieht so aus, das der Server in C# geschrieben wird und somit unter Mono und .NET läuft. Für den Client ist eine Implementation als Webapplikation angedacht. Das ganze hatte dabei mehrere Gründe:

  • die Produktivität ist in C# höher als in C/C++
  • es können keine Speicherlöcher entstehen
  • durch die automatische Speicherverwaltung wird der Entwickler entlastet
  • modernes und konsistentes Framework
  • Anpassung auf eigene Bedürfnisse
  • schnellere Entwicklung
  • IPv6 Unterstützung ist problemlos möglich
  • bessere Unterstützung von mobilen Geräten

Neben diesen Gründen sind es auch einige Dinge wie “typedefs” welche nicht unbedingt zum Verständnis beitrugen oder mehrere Klassen und Strukturen in einer Datei, welche das ganze ziemlich unübersichtlich machen. Auch die Abhängigkeit von zu vielen Bibliotheken wurde verringert.

Der Invertika Code in der Entwicklung

Nach einer kurzen Planungphase ging es dann am 3. Januar los mit der Entwicklung. Zuerst wurde damit begonnen den Accountserver zu portierten. Dabei wurden im Gegensatz zum Original einige Dinge verändern:

  • das Netzwerk setzt nun statt auf der Bibliothek “enet” direkt auf TCP auf
  • PhysFS wurde wegrationalisiert

Am 13. Januar (einem Freitag ;)) waren die größten Portierungprobleme beim Accountserver gelöst und es wurde begonnen den Gameserver zu portieren. Am Gameserver ist die einzige größere Änderung die Anpassung der Skriptschnittstelle, damit diese mit den CLR Sprachen kompatibel ist. Die Roadmap für die Portierung sah dabei so aus:

  • Januar 2012: Implementation des Invertika Server
  • Februar 2012 Implementation des Invertika Clients
  • März 2012: Test der Software

Wie sich das für eine ordentliche Roadmap gehört wurde sie nicht eingehalten. So ist einiges noch nicht fertig und auch am Client muss noch viel getan werden. Der Client sollte ursprünglich auch in C# geschrieben werden und es wurde damit auch begonnen. Theoretisch ließe sich diese Clientvariante auf die Plattformen Windows, Linux, Mac OS X, iOS und Android bringen, praktisch ist es mit kleineren und größeren Problemen verbunden.

Ein generelles Problem an einem solchen Client ist, das er auf der jeweiligen Zielplattform erst installiert (oder auch kompiliert) werden und außerdem vom Nutzer aktuell gehalten werden muss. Schöner wäre es, wenn man diese Hürde aus dem Weg geschafft wird. Mittlerweile ist es dank Techniken wie Websockets, Webworkern und Canvas möglich, den Client komplett als Webapplikation zu schreiben.

Die Anfänge des neuen Clients basieren dabei auf der Techdemo “mana.js” welche unter https://github.com/bjorn/mana.js zu finden ist. Der Vorteil der webbasierten Lösung ist dabei die große Kompatibilität mit unterschiedlichsten Geräten solange sie über einen aktuellen Browser verfügen.

Die Techdemo des Clients auf einem iPad

Während der Entwicklung bekamen die einzelnen Teile auch Namen die wie folgt lauten:

  • invertika (Client)
  • invertika-account (Accountserver)
  • invertika-game (Gameserver)

Der Quelltext sollte in den nächsten Tagen im Repository (http://source.invertika.org) erscheinen und zur Mitarbeit einladen ;)

Weitere Informationen gibt es unter:
http://invertika.org

melonJS unter neuer Lizenz

Bei melonJS handelt es sich um eine Game Engine für HTML5. Diese stand bis vor kurzen unter der Creative Commons Lizenz CC-BY-SA-NC, sprich sie dürfte nicht kommerziell verwendet werden, was aus diesem Stück Software unfreie Software macht. Mit den Release der Version 0.92 hat sich dies geändert. Ab sofort steht die Engine unter der MIT Lizenz und ist damit problemlos in freies Software einsetzbar.

melonJS in der TMW.js Techdemo

melonJS in der TMW.js Techdemo

Das hier gezeigte Beispiel kann man im übrigen auch unter http://manasource.org:8080/ bewundern. Das Framework selbst kann unter http://www.melonjs.org/ bezogen werden.

Weitere Informationen gibt es unter:
http://de.wikipedia.org/wiki/MIT-Lizenz