seeseekey.net - Invictus Deus Ex Machina

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.

Vor kur­zem ist die neue Ver­sion des freien Mape­di­tors Tiled (wird unter ande­rem bei Inver­tika benutzt) erschie­nen. Die neuen Fea­tures sind dabei ziem­lich reichhaltig:

  • Unter­stüt­zung von gespie­gel­ten Tiles
  • Copy & Paste Sup­port für Objekte
  • Sup­port für das Ver­schmel­zen von Ebenen
  • Lua Export Plugin
  • Dro­id­craft Plu­gin (von mir :))

Neben die­sen Ände­run­gen gibt es noch viele wei­tere Dinge wel­che ver­bes­sert wur­den. So wurde zum Bei­spiel das Auto­map­ping ver­bes­sert vor allem bezüg­lich der dabei ent­stan­de­nen Spei­cher­be­las­tung. Auch die Über­set­zun­gen wur­den natür­lich wie­der aktua­li­siert. Tiled kann dabei unter http://www.mapeditor.org/ für die Sys­teme Linux, Win­dows und Mac OS X bezo­gen werden.

Heute ist die neue Ver­sion 0.6 von Tiled erschie­nen. Dabei han­delt es sich um einen Open Source Mape­di­tor wel­cher auf Basis von Tile­sets arbei­tet. Die­ser Mape­di­tor wird für viele Pro­jekte benutzt wie z.B. Inver­tika.

Es sind in der neuen Ver­sion eine Menge Fea­tures hin­zu­ge­kom­men, wie z.B. das Öff­nen von meh­re­ren Kar­ten in einer Instanz von Tiled. Ein sehr inter­es­san­tes Fea­ture ist das soge­nannte Auto­map­ping. Dabei wird eine Regel­da­tei erstellt und mit die­ser kann Tiled anhand eines vor­ge­ge­be­nen Umris­ses Maps erstel­len z.B. eine Höhle. Dies sollte eine Menge Arbeit spa­ren, da man sich nun auf die wich­ti­gen Dinge kon­zen­trie­ren kann.

Wei­tere Fea­tures sind die OpenGL beschleu­nigte Anzeige, sowie einige neue Werk­zeuge. Bezo­gen wer­den kann der Edi­tor unter http://www.mapeditor.org/.

Wei­tere Infor­ma­tio­nen gibt es unter:
http://wiki.themanaworld.org/index.php/User:Argul/automapping
http://sourceforge.net/apps/mediawiki/tiled/index.php?title=Main_Page

Bei der Über­set­zung einer Soft­ware muss man sich zunächst in das ver­wen­dete Über­set­zungs­sys­tem ein­ar­bei­ten und die ent­spre­chende Soft­ware besor­gen. Ein­fa­cher geht es mit einer web­ba­sier­ten Über­set­zungs­platt­form wie Tran­si­fex wel­che unter http://www.transifex.net/ zu fin­den ist. Dort kann man eigene Pro­jekte anle­gen und anschlie­ßend mit der Über­set­zung begin­nen. So benutzt z.B. Tiled (http://www.transifex.net/projects/p/tiled/) die Soft­ware. Die Soft­ware hin­ter Tran­si­fex ist dabei Open Source.