Pixi.js: Cámara siguiente jugador

Creado en 29 abr. 2017  ·  8Comentarios  ·  Fuente: pixijs/pixi.js

Entonces, básicamente, ¿cuál es la forma más eficiente de hacer esto con Pixi? Quiero

  1. cámara básicamente para seguir a un jugador y cambiar el fondo de acuerdo con la posición del jugador
  2. Desplazarse por el mundo solo si el jugador está, por ejemplo, a 400 px del extremo derecho del lienzo y 300 px del extremo izquierdo del lienzo
  3. cosas como enemigos, cosas en el suelo y objetos se adaptan en consecuencia (también se adaptan al paisaje).

Gracias por adelantado

🤔 Question

Comentario más útil

Alguien, por favor, conviértalo en un artículo de pixi wiki. Creo que estoy explicando eso por décima vez, necesitamos un tutorial sobre eso.

Todos 8 comentarios

hacer el contenedor "Cámara", poner todo allí.

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
}

Alguien, por favor, conviértalo en un artículo de pixi wiki. Creo que estoy explicando eso por décima vez, necesitamos un tutorial sobre eso.

Gracias. Hace el trabajo, sin embargo, no puedo lograr 2. punto. El resultado de mapRect.enlarge (400); es NaN. Según la documentación, se supone que debe haber otro rectángulo.
Si pudiera explicarlo con un poco más de detalle, sería genial.
Gracias.

OK, use "pad (400,400)" "en su lugar;)

Todavía parece haber un problema porque en cada fotograma newRect.x siempre será más grande. Me falta algo enorme aquí, supongo :(

@mirosssc

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

también asegúrese de crear newRect cada vez. Si no lo hace, utilice "mapRect.copy (newRect);" en lugar de asignación.

Escribí pseudocódigo. Espero que hayas copiado esas cosas en diferentes funciones como gameStart, gameFrame o algo así. No se supone que esté en una función.

¡Hola! Cerrando este tema por ahora debido a su inactividad. No dude en darnos un toque si desea que se vuelva a abrir este número. Gracias 👍

Este hilo se ha bloqueado automáticamente ya que no ha habido ninguna actividad reciente después de su cierre. Abra un nuevo problema para errores relacionados.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

softshape picture softshape  ·  3Comentarios

courtneyvigo picture courtneyvigo  ·  3Comentarios

SebastienFPRousseau picture SebastienFPRousseau  ·  3Comentarios

samueller picture samueller  ·  3Comentarios

YuryKuvetski picture YuryKuvetski  ·  3Comentarios