added background, still needs parallax style scrolling though! - fixes #89

app/Game/Client/Loader/TiledLevel.js

@@ -40,7 +40,8 @@ function (Parent, Settings) {
 	    	paths.push(texturePath);
         };
 
-        // FIXME: Get background image
+        var background = this.getLayer(levelData, "background");
+        paths.push(Settings.MAPS_PATH + background.image);
 
         return paths;
 

app/Game/Client/View/Mesh.js

@@ -0,0 +1,20 @@
+define([
+    'Game/Config/Settings',
+    'Lib/Utilities/NotificationCenter',
+    "Lib/Vendor/Stats",
+    "Lib/Vendor/Screenfull"
+],
+
+function (Settings, Nc, Stats, Screenfull) {
+
+    function Mesh() {
+
+    }
+
+    Mesh.prototype.render = function() {
+
+    };
+
+    return Mesh;
+
+});

app/Game/Client/View/Views/PixiView.js

@@ -117,6 +117,7 @@ function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Ex
         if (options.x) mesh.position.x = options.x;
         if (options.y) mesh.position.y = options.y;
         if (options.rotation) mesh.rotation = options.rotation;
+        if (options.alpha) mesh.alpha = options.alpha;
         if (options.width) mesh.width = options.width;
         if (options.height) mesh.height = options.height;
         if (options.xScale) mesh.width = Math.abs(mesh.width) * options.xScale;

app/Game/Core/Loader/Level.js

@@ -24,6 +24,7 @@ define([
         var path = Settings.MAPS_PATH + uid + ".json"
         this.loadLevelDataFromPath(path, function(levelData) {
             self.levelData = levelData;
+            self.addBackground();
             self.createTiles();
             self.createItems();
             self.isLoaded = true;
@@ -97,6 +98,10 @@ define([
             //this.gameObjects.animated.push(item); 
         };
     };
+
+    // Extended by TiledLevel
+    Level.prototype.addBackground = function() {
+    }
 */
 
     return Level;

app/Game/Core/Loader/TiledLevel.js

@@ -5,12 +5,13 @@ define([
     "Lib/Vendor/Box2D", 
     "Lib/Utilities/Options",
     "Lib/Utilities/Exception",
+    "Lib/Utilities/NotificationCenter",
     "Game/" + GLOBALS.context + "/Collision/Detector",
     "Game/" + GLOBALS.context + "/GameObjects/Tile",
     "Game/" + GLOBALS.context + "/GameObjects/Item",
     "Game/" + GLOBALS.context + "/GameObjects/Items/Skateboard",
 
-], function (Parent, Settings, ItemSettings, Box2D, Options, Exception, CollisionDetector, Tile, Item, Skateboard) {
+], function (Parent, Settings, ItemSettings, Box2D, Options, Exception, Nc, CollisionDetector, Tile, Item, Skateboard) {
     
     // Public
     function TiledLevel (path, engine) {
@@ -75,6 +76,20 @@ define([
         };
     };
 
+    TiledLevel.prototype.addBackground = function(path) {
+
+        var texturePath = Settings.GRAPHICS_PATH + "Backgrounds/starnight.png";
+        var callback = function (mesh) {
+            Nc.trigger(Nc.ns.client.view.mesh.add, mesh, 0); // FIXME: add at z layer -1 or so
+        }
+        Nc.trigger(Nc.ns.client.view.mesh.create, texturePath, callback, {
+            width: 4000,
+            height: 2959, 
+            x: -(4000 - Settings.STAGE_WIDTH) / 2,
+            y: -(2959 + Settings.STAGE_HEIGHT + 700) / 2
+        });
+    }
+
     TiledLevel.prototype.gatherOptions = function(tiledObject) {
         var options = {};
 
@@ -138,7 +153,6 @@ define([
                 x: object.x / Settings.TILE_RATIO,
                 y: object.y / Settings.TILE_RATIO
             }
-
         }
     };
 

static/maps/tiled/debug.json

@@ -3,7 +3,7 @@
  "layers":[
         {
          "height":0,
-         "image":"..\/..\/img\/Backgrounds\/londonatnight.jpg",
+         "image":"..\/..\/img\/Backgrounds\/starnight.png",
          "name":"background",
          "opacity":1,
          "type":"imagelayer",