Infinity background

[Chendler]

Hello, developers.

 

I have interesting question for my game.

 

First of all, I have background image, player and bad guy.

Player have to catch bad guy.

 

My create function:

game.physics.startSystem(Phaser.Physics.ARCADE);game.world.setBounds(0, 0, 3464, 764);background = game.add.tileSprite(0, 0, 3464, 764, 'background');layer = game.add.group();layer.enableBody = true;ground = layer.create(0, game.world.height - 80, 'ground');ground.scale.x = 100;ground.body.immovable = true;player = game.add.sprite(150, 20, 'hero');game.physics.enable(player, Phaser.Physics.ARCADE);game.camera.follow(player);player.body.gravity.y = 500;player.body.collideWorldBounds = true;player.animations.add('left', [0, 1], 10, true);player.animations.add('right', [3, 4], 10, true);badGuy = game.add.sprite(700, 20, 'badGuy');game.physics.enable(badGuy, Phaser.Physics.ARCADE);badGuy.body.gravity.y = 500;badGuy.body.collideWorldBounds = true;badGuy.animations.add('move', [0, 1, 2, 3], 10, true);cursors = game.input.keyboard.createCursorKeys();

My update function:

game.physics.arcade.collide(player, ground);game.physics.arcade.collide(badGuy, ground);game.physics.arcade.overlap(player, badGuy, _this.catchBadGuy, null, this);player.body.velocity.x = 0;badGuy.body.touching.down && (badGuy.body.velocity.x = 150);if (cursors.left.isDown) {    player.body.velocity.x = -200;    player.animations.play('left');    badGuy.animations.play('move');} else if (cursors.right.isDown) {    player.body.velocity.x = 200;    player.animations.play('right');    badGuy.animations.play('move');} else {    player.animations.stop();    player.frame = 2;}if (cursors.up.isDown && player.body.touching.down) {    player.body.velocity.y = -350;}

But I've a big problem, because my player and bad guy runs while background width exist, then they are stop by end of background.

 

I tried to change background position such as background.tilePosition.x += 10; but background ends also. And I have situation when bad guy just holds by the end of background.

 

I'm newbie in game dev and don't know right way to solve this problem.

 

Have you some tips for me?

Thanks.

[ZoomBox]

It has nothing to do with your background and even less with the tilePosition of it.

 

You want your world to be infinite so you have 2 choices:

-Move the world bounds

-Don't use a camera system

 

I'll explain after my launch.

[lewster32]

The reason this is happening is because you're setting world bounds and setting collideWorldBounds = true, so when the object reaches the limits of the world it collides with it. For an infinite runner you need to move the world around the player, rather than follow the player through the world with a camera. I've put a little fiddle together to demonstrate a crude way of doing this: http://jsfiddle.net/lewster32/2e77q54s/

[Chendler]

The reason this is happening is because you're setting world bounds and setting collideWorldBounds = true, so when the object reaches the limits of the world it collides with it. For an infinite runner you need to move the world around the player, rather than follow the player through the world with a camera. I've put a little fiddle together to demonstrate a crude way of doing this: http://jsfiddle.net/lewster32/2e77q54s/

 

Thank you.

This solution really helped me.