I tre to build ininity scroll background but i see there is a broblem

I create a bg here is my code:

var w = wade.getScreenWidth()/2;
var h = wade.getScreenHeight()/2;

for(var i=0;i<4;i++)    
var layer[i] = new SceneObject(new Sprite('ui/layer'+i+'.png',10 - i),0,0,0);       
        layer[i].onAddToScene = function(){
        	this.getSprite(0).setSize(2*w,2*h);
            this.moveTo(-2*w,0,32*(i+1));
        }
        layer[i].onMoveComplete = function(){
            this.setPosition(2*w,0);
            this.moveTo(-2*w,0,32*(i+1));
        }
        wade.addSceneObject(layer[i]); 
        layer[i].toGrid(2,1,0,0);
}

But i see a gap 1-some pixels on every layer, and it gap increase with time

 the gap between objects depends on the speed and if the speed is minimal then it is almost there

It doesn't matter if the background color is light , but if you have a black background going will look awful

I try get effect from 1 object with many sprites:

obj.onUpdate = function(){
var curpos0=this.getSpriteOffset(0).x;
var curpos1=this.getSpriteOffset(1).x;

var dest = (curpos0<=-1920) ? 1920 : curpos0 -5;
this.setSpriteOffset(0,{x:dest,y:0});


var dest1 = (curpos1<=-1920) ? 1920 : curpos1 -5;
this.setSpriteOffset(1,{x:dest1,y:0});

}

but same effect = gap.

How cant i do without gaps???

UPD I think I found the answer while writing the question

//if width of wade and layer is 1920

var curpos0=this.getSpriteOffset(0).x;
var curpos1=this.getSpriteOffset(1).x;

var dest = (curpos0<=-1920) ? curpos1 + 1920 - LAYERSPEED : curpos0 - LAYERSPEED;
this.setSpriteOffset(0,{x:dest,y:0});


var dest1 = (curpos1<=-1920) ? curpos0 + 1920 - LAYERSPEED : curpos1 - LAYERSPEED;
this.setSpriteOffset(1,{x:dest1,y:0});

But some else?

NEXT

I create some levels of layer for bg -  to make parallax stars as background, but it move not smooth  - twitches much

i use :

        wade.setLayerTransform(9, 0, 0.1);
        wade.setLayerRenderMode(9, '2d');
        //wade.useQuadtree(9,false);

        wade.setLayerTransform(13,0,1/128);
        wade.setLayerRenderMode(13, '2d');
        //wade.useQuadtree(13,false); 

        wade.setLayerTransform(14,0,1/256);
        wade.setLayerRenderMode(14, '2d');
        //wade.useQuadtree(14,false);

        wade.setLayerTransform(15,0,1/512);
        wade.setLayerRenderMode(15, '2d');
        //wade.useQuadtree(15,false);

for parallax effect, but layers jump irregular and not evenly 

if you look at them closely. It does not suit. I think this dependence on the speed of the player and the transform should be For example, if the speed of the player 200, the layer will move with a speed of 20, but if he moves diagonally, then what

result here (a w s d and tab is forsage, z - mouse follow direct)

How get smoth move for BG layers?

Next

wade have no methods for html5 sound(change volume etc) and I'm forced to use howler,

but howler have own loader and i cant marriage it to wade

so i wrap howler in wade.loadaudio to have shared access to the buffer

i use :

        wade.loadAudio('sounds/city.mp3', false, false, function(d){
        	//return AudioBuffer;

	        wade.app.bgsound = new Howl({
	          src: //???,
	          autoplay: false,
	          loop: true,
	          volume: 0.1,
	        });
        });

BUt howler take in src property only a link or URI data, not audioBuffer

How transform AudioBuffer to URI-base64 data string?

Or how another i can join data with 2 libs