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.

JavaScript Integer in Enum umwandeln

In JavaScript ist es durchaus möglich Enums anzulegen:

var Protocol =
{ 
  PAMSG_REGISTER:0x0000, // D version, S username, S password, S email, S captcha response
  APMSG_REGISTER_RESPONSE:0x0002, // B error, S updatehost, S Client data URL, B Character slots
  PAMSG_UNREGISTER:0x0003, // S username, S password
}

Interessant wird es nun, wenn man versucht aus einer Zahl in diesem Beispiel der „2“ wieder einen Enum („APMSG_REGISTER_RESPONSE“) zu erzeugen. Hierbei hilft die Funktion „getEnumFromInteger“ welche wie folgt aussieht:

function getEnumFromInteger(enumWithValues, integer)
{
  var keys = Object.keys(enumWithValues);
    
  for (var i=0; i<keys.length; i++)
  {
    if(enumWithValues[keys[i]]==integer) return keys[i];
  }
    
  return null;
}

Damit wird der Enum durchiteriert und der entsprechende Schlüssel, welcher dem Integer entspricht, zurückgegeben.

UKI

Wenn man native Applikation entwickelt, ist die Wahl der Komponenten für die grafische Oberfläche schnell erledigt. Meinst nimmt man das UI Kit, welches dem „Plattform-Standard“ entspricht. Bei Webseiten bzw. Webbapplikationen ist die ganze Sache komplizierter. Hier gibt es eine Reihe von Lösungen, wie jQuery UI, JxLib, YUI und andere. Eine schöne Alternative zu den genannten Lösungen ist UKI.

Eine UKI Beispielanwendung

Die Bibliothek setzt dabei auf direkt auf Javascript auf und benötigt keine weiteren Frameworks. Das ganze ist unter http://ukijs.org/ zu finden. UKI ist dabei freie Software und steht unter der MIT-Lizenz.

OpenLayers

Bei OpenLayers handelt es sich um eine JavaScript-Biliothek zur Darstellung von Karten, im speziellen zur Darstellung von Geodaten. Die Bibliothek steht dabei unter der BSD-Lizenz (2er Klausel Version). So fußt z.B. das Frontend von OpenStreetMap.org auf dieser Bibliothek. Mit Hilfe der Bibliothek ist es ein leichtes Webanwendungen zu schreiben welche Web Feature Services oder Web Map Services nutzen. Auch das Einbinden von OpenStreetMap oder den Google Karten ist kein Problem. Wer vor hat in nächster Zeit so eine Anwendung zu schreiben, der sollte sich OpenLayer anschauen. Die offizielle Seite ist dabei unter http://openlayers.org/ zu finden.

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

Private Funktionen in MooTools Klassen

Mit dem JavaScript Framework MooTools ist es möglich Klassen in JavaScript zu schreiben. In diesen Klassen kann man auch private Methoden definieren. Dazu hängt man ein „.protect()“ an die Methoden an, welche privat sein sollen. Aussehen könnte das ganze dann z.B. so:

var MessageIn = new Class({
  id: 0,
  parts: [],
	
  //Konstruktor
  initialize: function(message) {
    this.parts = this.splitCommand(message);
    this.id=parseInt(this.parts[0], 16);
    this.parts.splice(0, 1); //Erstes Element entfernen
  },
	
  //Methoden
  getPart: function(index) {		
    return this.parts[index];
  },
	
  //Private Methoden
  splitCommand: function(command) {
    ret=new Array();

    ...	

    return ret;
  }.protect()			
});

Dadurch kann die Methode „splitCommand“ nur noch durch die Klasse selbst und nicht mehr von außen aufgerufen werden.

Weitere Informationen gibt es unter:
http://de.wikipedia.org/wiki/MooTools