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