Forums » Help » Scrolling background map distorting, but only if scrolling down - not up (screenshot)

I have a background map. It does this at intermittent intervals (so not constantly):

			ig.game.mainBackground.scroll.y += ig.system.tick * 3;

The problem is, it looks like this on my screen, with everything being distorted:

http://i.imgur.com/O5HPl.png

Here is a video of what it's meant to look like (this video does not have the scrolling background in it, but you get the idea...): http://www.youtube.com/watch?v=Zz3XpnKrWag

If I change that += to -= and make it scroll the other way, everything is totally fine and there is no distortion whatsoever. What gives? Am I missing something really obvious here?

Here is how I am creating the background map, when the level is loaded:

				var data = [[1,2,3,4,5,6,7,8],[9,10,11,12,13,14,15,16],[17,18,19,20,21,22,23,24],[25,26,27,28,29,30,31,32],[33,34,35,36,37,38,39,40],[41,42,43,44,45,46,47,48],[49,50,51,52,53,54,55,56],[57,58,59,60,61,62,63,64],[65,66,67,68,69,70,71,72],[73,74,75,76,77,78,79,80],[81,82,83,84,85,86,87,88],[89,90,91,92,93,94,95,96]];
				this.mainBackground = new ig.BackgroundMap( 40, data, 'media/backgrounds/lvl1-2.png' );
				this.mainBackground.repeat = true;
				this.mainBackground.preRender = true;

Just a guess, but maybe try:

ig.game.mainBackground.scroll.y = ig.system.tick * 3;

Thanks, Joncom. Unfortunately just setting it to ig.system.tick * 3 doesn't make it scroll at all because the position ends up being set to the same spot during each "move" period.

This is actually the same thing I usually see when there's no background set at all, which makes me think that maybe it's not repeating correctly on the y axis as it scrolls...But it's set to repeat. I'm just taking stabs in the dark here, still haven't been able to find a solution.

So:

// Does NOT display the map layer properly.
ig.game.mainBackground.scroll.y += ig.system.tick * 3;

// Does display the map layer properly.
ig.game.mainBackground.scroll.x += ig.system.tick * 3;

I haven&039;t played around with #.scroll but it seem's like your doing things correctly.

Maybe post your code that handles the "intermittent y-scrolling"? It may not be doing what you think it's doing.

*Update:* This appears to have something to do with having prerender set to true. If I disable prerender, the background starts repeating as it should without distortion. However, this drives my draw calls up massively so is still a problem. How do I make the background prerender and repeat?

*Original reply:*

No, with scroll.y += does appear to work correctly. -= on the other hand does not work correctly. I just tested with scroll.x and it's the same, += works correctly and -= does not.

With scroll.x it becomes visible that the map does not appear to be repeating properly (a black space comes into view), which is probably what's causing the distortion.

The height and width are correct in relation to the tile size, so I'm not sure why this is actually happening..

The code that actually triggers the scroll is simply this:

		if (ig.game.Controller.boostingUp) {
			ig.game.mainBackground.scroll.x += ig.system.tick * 100;
		}

The boostingUp attribute is toggled here:

		if (block.moving) {
			if (!this.boostingUp && block === ig.game.allBlocks[0]) {
				this.boostingUp = true;
			}
			
			if (block.pos.y < block.endPosY) {
		//		block.currentAnim.update();
				block.vel.y = 50;	
			}
			else {
				block.vel.y = 0;
				block.moving = false;
				if (this.boostingUp && block === ig.game.allBlocks[0]) {
					this.boostingUp = false;
				}
				block.endPosY = block.pos.y + 51;
			}
		}

So it seems like the map repeats correctly in one direction on the x and y axes, but not the other..