Some problems (movement smooth, layers, sound)

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(){
        layer[i].onMoveComplete = function(){

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;

var dest1 = (curpos1<=-1920) ? 1920 : curpos1 -5;


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;

var dest1 = (curpos1<=-1920) ? curpos0 + 1920 - LAYERSPEED : curpos1 - LAYERSPEED;

But some else?


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.setLayerRenderMode(13, '2d');

        wade.setLayerRenderMode(14, '2d');

        wade.setLayerRenderMode(15, '2d');

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?


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;
 = 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

1 Comment

Hi krumza

To answer your 3 questions above:

1. You already found the answer yourself :)

2. 2d/canvas drawing does not work very well with floating-point coordinates, for performance reasons drawing coordinates are rounded to the nearest integer value in most cases (though this depends on the browser). So on a 2d layer, things typically seem to move 1 pixel at a time, not fractions of a pixel, so it doesn't look very smooth especially when you have an image with lots of contrast and small details like your stars image. I would definitely try webgl instead, and I would use images that are power-of-2 in terms of size

3. I have used this method in the past to convert from AudioBuffer to base64 (link to StackOverflow answer). However there may be better solutions. If you wait for the callback of wade.loadAudio, you can probably use the same URL with howler and since it's been already loaded, it will have been cached by your brower, so howler will load it almost immediately. Or potentially, if you are going to require web audio for your game, you could use the WebAudio api directly - get the web audio context with wade.getWebAudioContext(), create a source, set the volume, and assign the AudioBuffer to it.


Post a reply
Add Attachment
Submit Reply
Login to Reply