Pixi.js: Sprite non-interaktif memblokir klik sprite interaktif (dan DOM tidak lagi memblokir mouse di atas kanvas)?

Dibuat pada 26 Apr 2015  ·  23Komentar  ·  Sumber: pixijs/pixi.js

Semoga keduanya cukup dekat untuk benar-benar sesuai dengan masalah yang sama. Saya menggunakan pixi v3

a.) Setiap kali saya memiliki dua sprite yang tumpang tindih, bahkan jika sprite teratas memiliki interactive = false, gerakan mouse saya di sprite bawah (dengan interactive = true) diblokir oleh sprite pertama yang dimaksud.

b.) Saat mengarahkan mouse ke beberapa elemen DOM yang saya gunakan untuk HUD game kita, sprite di bawahnya masih bertindak seolah-olah sedang diarahkan secara langsung. Ini tidak pernah terjadi di v2. Ini terjadi dengan gerakan mouse, tetapi tidak dengan klik.

Saya mencari tautan cdn untuk v3 sehingga saya dapat mencoba membuat jsfiddle untuk ini, tetapi tidak terlalu berhasil.

🕷 Bug

Komentar yang paling membantu

Triknya adalah menyetel hitArea kosong ke DisplayObject atau DisplayObjectContainer:
mouseDisabledElement.hitArea = PIXI.Rectangle baru (0, 0, 0, 0);

Semua 23 komentar

https://rawgit.com/

Cukup keren. Anda cukup menempelkan tautan file dev bin di sana dan itu akan memberi Anda url bahwa proxy memuatnya langsung dari GitHub.

Misalnya, Anda dapat menempelkan:

https://github.com/GoodBoyDigital/pixi.js/blob/dev/bin/pixi.js

dan keluar:

https://rawgit.com/GoodBoyDigital/pixi.js/dev/bin/pixi.js

Terima kasih, saya akan membuat beberapa contoh jsfiddle hari ini dan mempostingnya di sini.

Saya mengalami masalah dalam menyiapkan jsfiddle dengan benar, karena saya pikir saya perlu menggunakan gambar untuk mengilustrasikan maksud saya, tapi mudah-mudahan saya bisa memberi Anda beberapa kode dan pengamatan yang saya buat untuk mencari tahu apa yang sedang terjadi .

Kasus Bug Teoritis (cuplikan kode semu):

var bunny = PIXI.Sprite.fromFrame(building.image); 
bunny.interactive = true;
stage.addChild(bunny);
bunny.hitArea = poly;
bunny.on('mouseover',function(data){
      bunny.brighten
});
bunny.on('mouseout',function(data){
      bunny.unbrighten
});
var g2 = new PIXI.Graphics();
    g2.beginFill(0xC03302);
    g2.drawCircle(0, 0, 100);
    g2.endFill(); 
    var cant_touch_this = new PIXI.Sprite(g2.generateTexture());
    cant_touch_this.position.x = bunny.position.x - 100;
    cant_touch_this.position.y = bunny.sprite.position.y - 100;
stage.addChild(cant_touch_this);

Kedua sprite tumpang tindih, penangan kelinci berhenti bekerja sekali selama sprite kedua.

Ketika saya melakukan hal serupa di jsfiddle (http://jsfiddle.net/h63mLx7b/) bug tidak ada. Salah satu perbedaan utama di sini yang saya lihat, adalah bahwa di biola saya tidak menggunakan fromImage atau fromFrame, tetapi menghasilkan tekstur. Saya mencoba ini dalam konteks permainan saya (menggunakan 2 tekstur yang dihasilkan) dan bug masih ada.

Hal berikutnya yang saya pikirkan sebagai kemungkinan adalah hitArea, tetapi ketika saya menambahkan hitArea ke jsfiddle, bug tersebut tidak dibuat ulang. Saya akan terus mengisi kode saya untuk melihat apakah ada cuplikan penting lainnya yang saya lewatkan, tetapi mungkin Anda melihat sesuatu yang saya lewatkan? Apakah ada sesuatu di PIXI yang memiliki perilaku yang dimaksudkan untuk membuat sprite mencegah terjadinya peristiwa di bawahnya yang mungkin tidak sengaja saya masukkan?

Mungkin juga informasi yang berguna, kelinci punya

    bunny.pivot.x = 0.5;
    bunny.pivot.y = 1;
    bunny.anchor.x = 0.5;
    bunny.anchor.y = 1;

Namun berita gembira lain yang berguna: dalam konteks permainan saya, kode jsfiddle membuat ulang bug! Jadi saya kira pertanyaan terakhirnya adalah, opsi global apa (atau opsi pada Container itu sendiri) yang dapat membuat ini?

wahooooooo saya menemukan jawabannya! Itu mungkin sedikit berita yang lebih baik bagi saya daripada Anda, dengan asumsi ini benar-benar bug dan perilaku yang tidak diinginkan.

http://jsfiddle.net/h63mLx7b/1/

Ketika Sprite ada dalam wadah dengan interactive = true, bug terjadi. Jika Anda menyetel stage.interactive = false, bug akan hilang.

EDIT: Tautan biola salah pada awalnya

@enggun ping. hanya ingin tahu apakah Anda mendapat kesempatan untuk melihat ini

Saya belum, maaf Shadow.

Saya memiliki banyak peristiwa kehidupan yang sedang berlangsung saat ini dan tidak memiliki banyak waktu proyek sampingan. Saya berharap untuk segera melakukan bug smash, tetapi saat ini sangat sibuk :(

jangan khawatir kawan, saya mengerti bagaimana kelanjutannya :)

Hey peeps - buat sedikit tweak ke dev branch, caranya begini:

http://jsfiddle.net/g3vcfmef/

Sudah baik sekarang!
Terima kasih :)

Dikonfirmasi bekerja di pihakku juga. Terima kasih banyak!

Sebenarnya, bagian kedua dari pertanyaan awal saya masih menimbulkan masalah:

b.) Saat mengarahkan mouse ke beberapa elemen DOM yang saya gunakan untuk HUD game kita, sprite di bawahnya masih bertindak seolah-olah sedang diarahkan / diklik secara langsung. Ini tidak pernah terjadi di v2. Ini terjadi dengan gerakan mouse, tetapi tidak dengan klik.

Ini menyebabkan sedikit masalah karena, saya mencoba mengklik salah satu elemen DOM HUD, kanvas di bawah ini masih memicu klik dan pengendali mouseup Container utama saya terjadi, sehingga menyembunyikan menu secara instan setelah membuat / menampilkannya. Saya telah mencoba menggunakan e.stopPropagation di jquery mouseup handler, tetapi tidak berhasil.

stage.on('mouseup',function(data){
console.log("Still triggering");
});

$('body').on('mouseup','#battle-menu:not(.attack-island)',function(e){
e.stopPropagation();
});

tahap menu pertempuran tumpang tindih.

Maaf untuk membuka kembali ini, saya harus membaca kembali posting asli saya :(

http://jsfiddle.net/prg9jubt/2/

Aneh, karena terkadang klik tahapan terpicu di waktu lain, ternyata tidak. Cukup klik di sekitar tahi lalat

Jika membantu sama sekali, perilaku semacam ini tampaknya hanya terjadi untuk mouseup. Mousedown dan klik tampaknya solid.

Dikembalikan di 5344062ef4657857ce6a20bea4681e5d66c1c2b2 untuk # 1765. Kami sedang mencari cara terbaik untuk menyelesaikan masalah ini.

@englercj Jadi hanya untuk memastikan saya mengikuti, bug sprite yang tumpang tindih yang saya sebutkan ada di cabang master pixi lagi sementara kalian mencari cara untuk memperbaikinya dengan lebih baik?

Hanya ingin memastikan saya tahu di mana saya berdiri / apakah saya bisa beralih dari ini sekarang untuk mengerjakan hal-hal lain

Ya itu benar.

Oke, terima kasih atas pembaruan @englercj

tetap! : +1:

Skenario mana yang diperbaiki? Jika penampung saya interactive = true, dan pemancar partikel memblokir tampilan sprite interaktif, peristiwa mouse untuk sprite tersebut masih tidak aktif. Jelas jika saya mengatur penampung interactive = false, maka peristiwa akan menyala. Namun, saya membutuhkan wadah yang interaktif sehingga peta dapat diseret dan diperbesar. Saya menggunakan kode versi dev terbaru.

Triknya adalah menyetel hitArea kosong ke DisplayObject atau DisplayObjectContainer:
mouseDisabledElement.hitArea = PIXI.Rectangle baru (0, 0, 0, 0);

Utas ini telah dikunci secara otomatis karena tidak ada aktivitas baru-baru ini setelah ditutup. Silakan buka masalah baru untuk bug terkait.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

lucap86 picture lucap86  ·  3Komentar

neciszhang picture neciszhang  ·  3Komentar

softshape picture softshape  ·  3Komentar

readygosports picture readygosports  ·  3Komentar

lunabunn picture lunabunn  ·  3Komentar