Pixi.js: カメラフォロープレーヤー

「カメラ」コンテナを作り、そこにすべてを置きます。

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
}

誰か、それをpixiwikiの記事にしてください。 私はそのことを10回説明していると思います、私たちはそのことについてのチュートリアルが必要です

ありがとうございました。 それは仕事をしますが、私は2.ポイントを達成することができません。 mapRect.enlarge（400）;の結果。 NaNです。 ドキュメントによると、別の長方形があるはずです。
もう少し詳しく説明していただければ幸いです。
ありがとうございました。

OK、代わりに「pad（400,400）」を使用してください;）

すべてのフレームでnewRect.xが常に大きくなるため、まだ問題があるようです。 私はここで何か巨大なものが欠けていると思います:(

@mirosssc

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

また、毎回newRectを作成するようにしてください。 そうでない場合は、「mapRect.copy（newRect）;」を使用してください。 割り当ての代わりに。

擬似コードを書きました。 そのようなものをgameStart、gameFrameなどのさまざまな関数にコピーしていただければ幸いです。 1つの機能に含まれることは想定されていません。

こんにちは！ 非アクティブであるため、今のところこの問題を閉じます。 この問題の再開をご希望の場合は、お気軽にご連絡ください。 ありがとう👍

このスレッドは、閉じられた後に最近のアクティビティがないため、自動的にロックされています。 関連するバグについては、新しい問題を開いてください。