Pixi.js: Câmera seguindo jogador

Criado em 29 abr. 2017  ·  8Comentários  ·  Fonte: pixijs/pixi.js

Então, basicamente, qual é a maneira mais eficiente de fazer isso com Pixi? Eu queria

  1. câmera basicamente para seguir um jogador e mudar o fundo de acordo com a posição do jogador
  2. role o mundo apenas se o jogador estiver, por exemplo, 400 px da extremidade direita da tela e 300 px da extremidade esquerda da tela
  3. coisas como inimigos, coisas no chão e objetos se adaptam de acordo (adapte-se também ao cenário).

desde já, obrigado

🤔 Question

Comentários muito úteis

Alguém, por favor, faça disso um artigo da pixi wiki. Acho que estou explicando isso pela décima vez, precisamos de um tutorial sobre essas coisas

Todos 8 comentários

faça o container "Camera", coloque tudo lá.

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
}

Alguém, por favor, faça disso um artigo da pixi wiki. Acho que estou explicando isso pela décima vez, precisamos de um tutorial sobre essas coisas

Obrigado. Faz o trabalho, mas não consigo atingir o 2. ponto. O resultado de mapRect.enlarge (400); é NaN. De acordo com a documentação, deveria haver outro retângulo.
Se você pudesse apenas explicar com um pouco mais de detalhes, seria ótimo.
Obrigado.

OK, use "pad (400,400)" "em vez disso;)

Ainda parece haver o problema porque em cada quadro newRect.x sempre será maior. Estou perdendo algo enorme aqui, eu acho :(

@mirosssc

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

também certifique-se de criar newRect todas as vezes. Se não o fizer, use "mapRect.copy (newRect);" em vez de atribuição.

Escrevi pseudo-código. Espero que você tenha copiado essas coisas para funções diferentes como gameStart, gameFrame ou algo assim? Não é suposto estar em uma função.

Olá! Fechando esta edição por enquanto devido à sua inatividade. Sinta-se à vontade para nos dar uma olhada se quiser que esta edição seja reaberta. Obrigado 👍

Este tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente depois que ele foi fechado. Abra um novo problema para bugs relacionados.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

madroneropaulo picture madroneropaulo  ·  3Comentários

softshape picture softshape  ·  3Comentários

st3v0 picture st3v0  ·  3Comentários

zcr1 picture zcr1  ·  3Comentários

gigamesh picture gigamesh  ·  3Comentários