Camera following player

[mirosssc]

So basically what is the most efficient way to do this with Pixi? I want

1. camera basically to follow a player and change the background according to the position of player
2. scroll the world only if player is for example 400 px from right end of canvas and 300 px from left end of canvas
3. things like enemies, things on the ground and objects adapt accordingly(adapt with the scenery too).

Thanks in advance

[ivanpopelyshev]

make "Camera" container, put everything there.

camera.position.set(renderer.screen.width/2, renderer.screen.height/2);
camera.pivot.copy(player.position);

//EVERY FRAME

var targetPivot = player.position;

//LERP IT, dt is something between 0 and 1.
// i use dt = 1 - Math.exp(-deltaInMillis / 100);
// or you can just assign targetpivot to pivot
camera.pivot.x = (targetPivot.x - camera.pivot.x) * dt + camera.pivot.x;
camera.pivot.y = (targetPivot.y - camera.pivot.y) * dt + camera.pivot.y;

//big square

var mapRect = new PIXI.Rectangle();
mapRect.x = camera.pivot.x - renderer.screen.width/2;
mapRect.y = camera.pivot.x - renderer.screen.height/2;
mapRect.width  = renderer.screen.width;
mapRect.height = renderer.screen.height;
mapRect.pad(400,400); // -this line was updated

//every time camera changes position


var newRect = new PIXI.Rectangle();
newRect .x = camera.pivot.x - renderer.screen.width/2;
newRect .y = camera.pivot.x - renderer.screen.height/2;
newRect .width  = renderer.screen.width;
newRect .height = renderer.screen.height;
if (newRect.x < mapRect.x || newRect.right > mapRect.right ||
   newRect.y < mapRect.y ||  newRect.bottom > mapRect.bottom) {
   mapRect = newRect;
   //ADJUST THE BACKGROUND AND STUFF
   //CLEAR AND FILL THE TILEMAP: https://github.com/pixijs/pixi-tilemap
}

[ivanpopelyshev]

Somebody, please make that a pixi wiki article. I think Im explaining that thing for 10th time, we need a tutorial on that stuff

[mirosssc]

Thank you. It does the job however I'm not able to accomplish 2. point. The result of mapRect.enlarge(400); is NaN. According to documentation there's supposed to be another rectangle.
If you could just explain it in a little more detail that would be great.
Thank you.

[ivanpopelyshev]

OK, use "pad(400,400)"" instead ;)

[mirosssc]

There still seems to be the problem because in every frame newRect.x is always gonna be bigger. I am missing something huge in here i guess :(

[ivanpopelyshev]

@mirosssc

mapRect = newRect;
mapRect.pad(400,400);

also make sure you create newRect every time. If you dont, please use "mapRect.copy(newRect);" instead of assignment.

I wrote pseudo-code. I hope you copied that stuff into different functions like gameStart, gameFrame or so? Its not supposed to be in one function.

[GoodBoyDigital]

Hi there! Closing this issue for now due to its inactivity. Feel free to give us a poke if you would like this issue reopened. Thanks 👍

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.