Bug 33 - You can now set a BG img for the level; it will automaticall…

…y tile if not large enough, and it will scroll at 1/3 the rate of the foreground for that lovely parllax effect.

database_tables.py

@@ -19,6 +19,7 @@ class Level(SQLObject):
     modified = DateTimeCol()
     startX = IntCol()
     startY = IntCol()
+    bgUrl = StringCol()
     # More stuff like tileset URL
 
 class LevelObject( SQLObject ):

designer.html

@@ -15,6 +15,8 @@
     <a id="play-this">Play This Level</a><br/>
     <a href="listlevels.py">Other Levels</a><br/>
     <hr/>
+    <label for="level-bg-url">Level BG IMG url:</label><input type="text" id="level-bg-url"/>
+    <hr/>
     <input type="radio" name="tools" value="eraser" id="eraser-tool"/>
     <label for="eraser-tool">Eraser tool (click platform to remove it)</label></br>
     <input type="radio" name="tools" value="scroll" id="scroll-tool"/>

load-level.py

@@ -25,6 +25,7 @@
     data["worldData"] = worldData
     data["startX"] = levels[0].startX
     data["startY"] = levels[0].startY
+    data["bgUrl"] = levels[0].bgUrl
 
 print "Content-type: text/html"
 print

save-level.py

@@ -36,6 +36,7 @@
         data = simplejson.loads(levelData)
         level.startX = data["startX"]
         level.startY = data["startY"]
+        level.bgUrl = data["bgUrl"]
 
         for obj in data["worldData"]:
             l = LevelObject(level = level, type = obj["type"],

webrunner-edit.js

@@ -272,6 +272,8 @@ function saveChanges() {
     // Add starting point:
     allData.startX = TheWorld.startX;
     allData.startY = TheWorld.startY;
+    // BG image:
+    allData.bgUrl = $("#level-bg-url").val();
     $.ajax({type: "POST", 
             url: URL,
 	    data: {levelName: title,
@@ -284,14 +286,16 @@ function saveChanges() {
 	    },
 	    dataType: "text"
 	    });
-    $("#debug").html("Saving, don't close the page...");
+    //$("#debug").html(JSON.stringify(allData));
+    //$("#debug").html("Saving, don't close the page...");
 }
 
 $(document).ready(function() {
   var title = gup("level");
   $("#play-this").attr("href", "play.py?level=" + title);
   adjustToScreen();
 
+
   // Handle mouseclicks on canvas according to selected tool:
   $("#design-canvas").bind("mousedown", function(evt) {
     pos = canvasCoords(evt);
@@ -355,8 +359,11 @@ $(document).ready(function() {
 	}
       break;
     }
- });
+  });
 
- TheWorld.loadFromServer(title, redraw);
+  TheWorld.loadFromServer(title, function() {
+    $("#level-bg-url").val(TheWorld.bgUrl);
+    redraw();
+  });
 
 });

webrunner-world.js

@@ -32,6 +32,9 @@ var TheWorld = {
   startX: 0,
   startY: 0,
   ticks: 0,
+  bgUrl: "",
+  bgImg: null,
+  bgImgLoaded: false,
   goalArea: {
 	left: 500,
 	top: 350,
@@ -154,9 +157,24 @@ var TheWorld = {
   },
 
   draw: function(ctx) {
-    // blue sky
-    ctx.fillStyle = SKY_COLOR;
-    ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
+    if (this.bgImgLoaded) {
+	// tile img to cover whole background
+	var w = this.bgImg.width;
+	var h = this.bgImg.height;
+	var x = 0 - (Math.floor(this.xOffset/3) % w) - w;
+	while (x < this.canvasWidth) {
+	    var y = 0 - (Math.floor(this.yOffset/3) % h) - h;
+	    while ( y < this.canvasWidth ) {
+		ctx.drawImage(this.bgImg, x, y);
+		y += this.bgImg.height;
+	    }
+	    x += this.bgImg.width;
+	}
+    } else {
+	// blue sky
+	ctx.fillStyle = SKY_COLOR;
+	ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
+    }
 
     // Now apply the translate transform to scroll the world
     ctx.save();
@@ -335,6 +353,12 @@ var TheWorld = {
 	    var parsedData = JSON.parse(data);
 	    self.startX = parsedData.startX;
 	    self.startY = parsedData.startY;
+	    self.bgUrl = parsedData.bgUrl;
+	    if (self.bgUrl != "") {
+		self.bgImg = new Image();
+		self.bgImg.onload = function() { $("#debug").html("Bgimg loaded."); self.bgImgLoaded = true; };
+		self.bgImg.src = self.bgUrl;
+	    }
 	    var worldData = parsedData.worldData;
 	    for (var i = 0; i < worldData.length; i++) {
 		var type = worldData[i].type;
@@ -355,7 +379,7 @@ var TheWorld = {
 					    worldData[i].height);
 		}
 	    }
-	    $("#debug").html("Loaded.");
+	    //$("#debug").html("Loaded.");
 	    callback();
 	}, "html");
   }