Pixi.js: Kamera nach Spieler

mache "Kamera" Container, lege alles dort hin.

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
}

Jemand, bitte machen Sie das zu einem Pixi-Wiki-Artikel. Ich denke, ich erkläre das Ding zum 10. Mal. Wir brauchen ein Tutorial zu diesem Thema

Dankeschön. Es macht den Job, aber ich bin nicht in der Lage, 2. Punkt zu erreichen. Das Ergebnis von mapRect.enlarge (400); ist NaN. Laut Dokumentation soll es ein weiteres Rechteck geben.
Wenn Sie es nur etwas detaillierter erklären könnten, wäre das großartig.
Dankeschön.

OK, benutze stattdessen "pad (400,400)" ";)

Es scheint immer noch ein Problem zu geben, da newRect.x in jedem Frame immer größer wird. Ich vermisse hier etwas Großes, denke ich :(

@mirosssc

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

Stellen Sie außerdem sicher, dass Sie jedes Mal newRect erstellen. Wenn Sie dies nicht tun, verwenden Sie bitte "mapRect.copy (newRect);" statt Zuordnung.

Ich habe Pseudocode geschrieben. Ich hoffe du hast das Zeug in verschiedene Funktionen wie gameStart, gameFrame oder so kopiert? Es soll nicht in einer Funktion sein.

Hallo! Schließen Sie dieses Problem vorerst aufgrund seiner Inaktivität. Wenn Sie möchten, dass diese Ausgabe erneut geöffnet wird, können Sie uns gerne einen Stich geben. Danke 👍

Dieser Thread wurde automatisch gesperrt, da nach dem Schließen keine aktuellen Aktivitäten stattgefunden haben. Bitte öffnen Sie eine neue Ausgabe für verwandte Fehler.