Pixi.js: Saat mengubah ukuran kanvas, ada latar belakang putih yang berkedip-kedip

Dibuat pada 3 Des 2016 · 7Komentar · Sumber: pixijs/pixi.js

Saya mengubah ukuran kanvas dengan fungsi mandiri sederhana, seperti ini:

function resizeCanvas(width, height) {
    game.canvas.width = width;
    game.canvas.height = height;
    game.canvas.style.width = width / game.resolution + 'px';
    game.canvas.style.height = height / game.resolution + 'px';
}

Dan ketika game bootup, saya melakukan sesuatu seperti ini:

game.renderer = new PIXI.WebGLRenderer(
    game.canvas.width,
    game.canvas.height,
    {
         view: game.canvas,
         backgroundColor: 0x000000,
     }
);

// recompute viewport size & canvas size with  browser window size 
game.scaler.update();  

// resize  renderer with new size.
game.renderer.resize(game.viewportWidth, game.viewportHeight);

kasus uji sangat sederhana: menggambar gambar png kecil.

Peramban: Chrome 55 untuk macOS 10.12

Safari baik-baik saja.

Saya tahu mungkin ini masalah Chrome, tapi saya harap ada cara hack untuk memperbaikinya.

Terima kasih

💾 v4.x (Legacy)

Sumber

finscn

Komentar yang paling membantu

Terima kasih! @mickdekkers itu luar biasa, memanggil render segera membuatnya bekerja dengan ResizeObserver callback.

inukshuk pada 11 Sep 2017

🎉4 ❤2

Semua 7 komentar

Saya menggunakan kode seperti ini untuk memperbaiki bug ini:

    game.renderer.resize(game.viewportWidth - 1, game.viewportHeight);
    setTimeout(function() {
        game.renderer.resize(game.viewportWidth, game.viewportHeight);
    }, 1);

Ini sangat jelek Siapa yang bisa memberi saya saran yang lebih baik

Tentu saja Cara terbaik adalah melaporkannya ke tim Chrome.
Siapa yang bisa melakukannya? Bahasa Inggris saya terlalu lemah untuk menggambarkan bug ini。

finscn pada 3 Des 2016

Chrome baru tidak ada masalah ini.

finscn pada 12 Jan 2017

Saya ingin mengonfirmasi bahwa ini masih terjadi di Safari desktop (terbaru) dan Edge. Pixi v4.3.0.

Sunting: dalam kodesemu, kami melakukan sesuatu seperti

handleWindowDimensionChange(function() {
renderer.resize(window.innerWidth, window.innerHeight)
});

Mengubah ukuran jendela menyebabkan kedipan buruk di kedua browser yang disebutkan. Bukan chrome atau Firefox.

nthapaliya pada 25 Feb 2017

Adakah yang tahu apa yang berpotensi menyebabkan kedipan saat mengubah ukuran? Saya memiliki masalah yang sama di Electron (diuji dengan versi yang berbeda, tetapi pada dasarnya, Chromium 56, 58 dan 59) dan Pixi 4.5.5 (diuji di Linux dan macOS) tetapi hanya dalam skenario yang aneh:

Saya mengubah ukuran penyaji (webgl) berdasarkan elemen penampung di DOM: elemen penampung dapat mengubah ukuran jika jendela diubah ukurannya atau dipicu oleh widget yang dapat diubah ukurannya yang diimplementasikan dalam Javascript. Sekarang, jika saya mengubah ukuran penyaji di resize jendela dan pengendali resize khusus widget (berdasarkan peristiwa mousemove ), semuanya baik-baik saja , tetapi jika saya menggunakan ResizeObserver baru

Beberapa pengamatan:

Kedipan disebabkan oleh seluruh kanvas yang dibersihkan (seperti yang disebutkan OP, dalam kasus saya ini tidak putih tetapi transparan): ini terlihat jelas ketika saya melakukan perekaman kinerja dengan tangkapan layar di alat dev: kanvas kosong untuk sekitar 100ms selama mengubah ukuran.
Saya berasumsi bahwa ini adalah masalah kinerja/waktu karena ResizeObserver lebih sering menyala, tetapi bukan itu masalahnya: Saya mendapatkan frekuensi yang sebanding di kedua skenario.
Terlebih lagi, saya membatasi ukuran itu sendiri, jadi frekuensi panggilan sebenarnya ke renderer.resize identik dalam kedua kasus; juga panggilan tidak terjadi di salah satu event handler tetapi tertunda, jadi sepertinya tidak mungkin bagi saya bahwa waktu yang harus disalahkan.
Dugaan saya berikutnya adalah bahwa nilai yang dilaporkan oleh ResizeObserver berbeda; itu melaporkan kotak konten penampung bukan kotak pembatas, tetapi karena tidak ada batas atau bantalan yang terlibat, nilainya sama. Selanjutnya, saya membulatkan dimensi menjadi piksel penuh di kedua skenario. Sungguh, baik dimensi yang diatur dan frekuensinya sangat mirip dalam kedua kasus.
Kedipan berhenti jika saya meningkatkan batas waktu throttle menjadi sekitar 500 ms atau lebih tinggi
Menggunakan penangan acara jendela/widget Saya perlu mengukur wadah menggunakan getBoundingClientRect() -- untuk menyimpan panggilan ini (menyebabkan pengecatan ulang) sebenarnya adalah alasan besar untuk menggunakan ResizeObserver tapi saya pikir kurangnya pengecatan ulang dapat menyebabkan kedipan karena alasan tertentu. Jadi saya menambahkan panggilan yang tidak perlu ke getBoundingClientRect() sebelum mengubah ukuran, tetapi tidak berhasil.

Saya tidak terlalu khawatir, karena ada solusi yang layak (menggunakan dua penangan terpisah, alih-alih ResizeObserver ), tetapi saya benar-benar ingin tahu apa yang menyebabkan ini. Saya juga mematikan autoResize dan antialias tetapi itu tidak ada bedanya. Ada ide apa lagi yang bisa saya coba?

inukshuk pada 10 Sep 2017

@inukshuk dalam kasus saya solusinya ternyata sangat sederhana: panggil saja render setelah mengubah ukuran.

app.renderer.resize(width, height)
// Immediately render because resizing clears the canvas
app.render()

Ini memperbaiki masalah yang berkedip-kedip untuk saya. Perlu diingat bahwa jika Anda menjalankan animasi, itu hanya akan menampilkan bingkai terakhir hingga loop pembaruan Anda berikutnya dan ini mungkin memberikan efek "pembekuan". Jika Anda ingin tetap berjalan dengan lancar, Anda harus memanggil fungsi pembaruan Anda sebelum memanggil render.