Forums » Help » Moving the background image on repeat

Hi, is it possible to have the background move from right to left, keeping the player entity stationary? Then once the background image has reached its end, get it to repeat?

I am trying to create a continuous side-scroller that runs until the player dies. I thought it would be easier to keep the player stationary and have enemies appear just off screen and run towards it. That way it appears as though the player is moving.

Doing this would mean the background would need to move too, any better alternatives out there?

Thanks

Kinda like this link

http://www.learnjquery.org/newsletter/Tutorial-7-jquery-animation.html

Changing the background image once it finishes could possibly work too. Something like this link maybe?

http://impactjs.com/documentation/class-reference/backgroundmap

That's one way you could do it. A few people have already had a go at making an infinite runner in ImpactJS. Maybe see how they approached it?

I managed to achieve it by making two background entities.

Here's how I've done it:

In the main.js ->

this.spawnEntity( EntityBackground, 0, 0);
this.spawnEntity( EntityBackground, 320, 0); //320 is the screen width

EntityBackground ->

EntityBackground = ig.Entity.extend({
	
	size: {x:320, y:240},
	collides: ig.Entity.COLLIDES.NONE,
	
	animSheet: new ig.AnimationSheet('media/background.png', 320, 240),
	
	init: function(x, y, settings){
		this.parent(x, y , settings);
		
		this.addAnim('background', 1, [0]);
		this.maxVel.x = 200;
		this.vel.x = -200;
	},
	
	update: function(){
		this.parent();
		
		if(this.pos.x < -320){
			this.pos.x = 320;
		}
	}
});

Worked like a charm for me, hope it also works for you. :)

Thanks jGuille, I'll give it a go!