Background image for the main canvas?

Dec 14, 2013 at 8:39 AM
Edited Dec 14, 2013 at 8:49 AM
If you set a background image for the main canvas element, sheet objects will interfere with it if their bounding boxes come outside the "world" and into the are occupied by the background image.

I'm wondering if there's any possible fix for this?
Dec 14, 2013 at 8:53 AM
Edited Dec 14, 2013 at 9:12 AM
Hah! I just solved this by using a basesheet as the background, just set it up before you go into your basesheet loop:
var canvas_bg = new sheetengine.BaseSheet({x:0 , y:0 , z:0}, {alphaD:0,betaD:0,gammaD:45}, {w:900,h:600}); //main canvas dimensions
              canvas_bg.color = "#00bff3"
          for (var x=-tiles; x<=tiles; x++)
            for (var y=-tiles; y<=tiles; y++)
              if(col > 9) col = 1;
              var basesheet = new sheetengine.BaseSheet({x:x*(64) , y:y*(64) , z:0}, {alphaD:90,betaD:0,gammaD:0}, {w:64,h:64});
              basesheet.color = '#5D7E36';
              basesheet.img = grass;
Of course you can set it to be an image as well if you use Robbles code on this page
Dec 15, 2013 at 5:20 AM
Just as an addition to this, I ran into some problems when moving the camera, as the canvas is a set width and height and those are its boundaries.

I solved this for now with a bit of css, and by changing the canvas size. Here's what I'm doing

    overflow: hidden;
<div id="container">
     <canvas id="main" width="960" height="540"></canvas>
sheetengine.scene.init( canvas , {  w:1920 , h:1080  } );
There might be a more elegant solution but this is working for me for now.
Jan 15, 2014 at 1:53 AM
Edited Jan 15, 2014 at 4:42 AM
Hmm seems like this isn't going to work because when you call setCenter() it will move the entire scene to the specified coordinates, this includes any sheets you've defined, which will include the background base sheet.

Any suggestions?

edit: I'm going to try some trickery with CSS3 gradients. Basically the idea will be to set things up as I've done so far, but set the background property of the the canvas element accordingly using a CSS3 gradient. This will require color stops at exact pixel values and to calculate the difference in height between the bottom/top of the canvas and the scene.

edit2: my previous method may actually work if you use an image for the background, and then set the background for the canvas element to the same image. I don't want to do things this way though, as I'd prefer to code the values in for flexibility.