Pixi.js: Kamera mengikuti pemain

Dibuat pada 29 Apr 2017 · 8Komentar · Sumber: pixijs/pixi.js

Jadi pada dasarnya apa cara paling efisien untuk melakukan ini dengan Pixi? saya ingin

kamera pada dasarnya untuk mengikuti pemain dan mengubah latar belakang sesuai dengan posisi pemain
scroll dunia hanya jika player misalnya 400 px dari ujung kanan kanvas dan 300 px dari ujung kiri kanvas
Hal-hal seperti musuh, benda-benda di tanah, dan benda-benda menyesuaikan diri (menyesuaikan dengan pemandangan juga).

Terima kasih sebelumnya

🤔 Question

Sumber

mirosssc

Komentar yang paling membantu

Seseorang, tolong jadikan itu artikel wiki pixi. Saya pikir saya akan menjelaskan hal itu untuk yang kesepuluh kalinya, kita membutuhkan tutorial tentang hal itu

ivanpopelyshev pada 29 Apr 2017

👍7

Semua 8 komentar

buat wadah "Kamera", taruh semuanya di sana.

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 pada 29 Apr 2017

👍4 🎉1

Seseorang, tolong jadikan itu artikel wiki pixi. Saya pikir saya akan menjelaskan hal itu untuk yang kesepuluh kalinya, kita membutuhkan tutorial tentang hal itu

ivanpopelyshev pada 29 Apr 2017

👍7

Terima kasih. Itu melakukan pekerjaan tetapi saya tidak dapat mencapai 2. poin. Hasil mapRect.enlarge (400); adalah NaN. Menurut dokumentasi seharusnya ada persegi panjang lain.
Jika Anda bisa menjelaskannya sedikit lebih detail, itu akan bagus.
Terima kasih.

mirosssc pada 30 Apr 2017

Oke, gunakan "pad (400.400)" "sebagai gantinya;)

ivanpopelyshev pada 3 Mei 2017

Sepertinya masih ada masalah karena di setiap frame newRect.x akan selalu lebih besar. Saya kehilangan sesuatu yang besar di sini, saya kira :(

mirosssc pada 3 Mei 2017

@bayu_joo

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

juga pastikan Anda membuat newRect setiap saat. Jika tidak, silakan gunakan "mapRect.copy (newRect);" alih-alih tugas.

Saya menulis pseudo-code. Saya harap Anda menyalin hal-hal itu ke berbagai fungsi seperti gameStart, gameFrame, atau lebih? Itu tidak seharusnya dalam satu fungsi.

ivanpopelyshev pada 3 Mei 2017

👎1

Halo yang disana! Menutup masalah ini untuk saat ini karena tidak aktif. Jangan ragu untuk menghubungi kami jika Anda ingin masalah ini dibuka kembali. Terima kasih 👍