Infinite scrolling of tiled background in any direction: using camera following in conjunction with Arcade physics

[hindmost]

I'm trying to make a top-down game where the player sprite is fixed in the center of screen and the background is moving (scrolling) in the direction opposite to the player's direction, so it results in effect of the player's movement.

I started with Invaders example. It uses TileSprite and its tilePosition property to make vertical scrolling of the background. This works good for linear scrolling in fixed direction (vertical or horizontal). But in my case I need implement scrolling (i.e. movement) in any direction. Furthermore I need such physics features as acceleration and drag to be applied to the player sprite.

Here is a sort of what I want to get:
http://phaser.io/sandbox/OoPDpTwx

As can be seen it features constant movement only, no acceleration and other physics stuff. And I had to calculate angular movement manually.

How can I reproduce such effect using Phaser physics?

I've tried to enable camera following to the player sprite like here. Here is my code:
http://phaser.io/sandbox/dowAsYWa

 

But it doesn't work.
What am I doing wrong?

 

[lumoludo]

So the reason the camera doesn't follow your player in the last example you linked is because the Phaser camera clamps to the game's world bounds. Be default, the world bounds are going to be set to the game.width and game.height I believe, or in this case, the size of the iframe that the game is running in.

You can manually set the game bounds in your create function, like so:
 

var ReallyLargeWidth = 99999;
var ReallyLargeHeight = 99999;

game.world.setBounds(-ReallyLargeWidth/2, -ReallyLargeHeight/2, ReallyLargeWidth, ReallyLargeHeight);

Obviously though, this isn't infinitely scrolling. This will only scroll up to whatever number you decide to use.

As a different approach, you could try this trick that appeared to work when I was playing around in your example:
1. Take out the game.camera.follow(player); line in your create function, as it won't be necessary.
2. In your update function, add the following line of code after your player movement:
 

game.world.setBounds(player.x - game.width/2, player.y - game.height/2, game.width, game.height);

This snippet will update the world bounds to always be centered around the player. It's similar to having the camera follow your player, but it isn't restricted by the world bounds as it just changes what they are every update.

You'll need to tile your background still, but hopefully this will get you closer to where you are aiming.

[samme]

Hi hindmost, I would try

• move the player with Arcade Physics
• nullify camera bounds
• camera tracks the player
• tileSprite is fixedToCamera
• tileSprite scrolls opposite to the camera position

See http://phaser.io/sandbox/GfVFRAlU/play

[samme]

For angular motion with Arcade Physics see http://phaser.io/examples/v2/arcade-physics/asteroids-movement .

Here you can move the World bounds with the player as @lumoludo suggested: http://phaser.io/sandbox/QIpZGrVr/play

[hindmost]

@lumoludo, @samme, thank you very much!

[lumoludo]

@samme Ah, yes, your solution looks a bit nicer than mine. I didn't see that bounds.centerOn() function.