Pixi.js: InteractionManager: menyebarkan klik melalui piksel transparan

Dibuat pada 18 Agu 2019 · 5Komentar · Sumber: pixijs/pixi.js

Perilaku yang Diharapkan

Mencari cara untuk menyebarkan klik/arahkan melalui sprite interaktif dengan transparansi ke sprite interaktif lain di belakangnya.

Perilaku Saat Ini

Klik ditangkap oleh sprite besar dengan bagian transparansi yang sangat besar, di depan sprite yang lebih kecil.

Kemungkinan Solusi

Mengganti metode onHit dari sprite interaktif untuk memeriksa apakah titik tersebut cocok dengan piksel yang sepenuhnya transparan atau tidak, jika piksel tersebut sepenuhnya transparan, itu tidak cocok dan saya mengharapkan efek "klik-tayang".

Tidak yakin bagaimana atau di mana, apakah ini pernah dilakukan sebelumnya? Ada tips? Saya ingin agar efek "ubah kursor pada kursor interaktif" berfungsi sebaik klik.

Langkah-langkah untuk Reproduksi

Render sprite besar dengan banyak transparansi di depan sprite kecil yang ditempatkan di bawah transparansi, kedua sprite bersifat interaktif. Sprite yang lebih kecil tidak dapat berinteraksi dengannya saat dirender di belakang sprite yang lebih besar.

Lingkungan

pixi.js versi : _5.1.1_
Browser & Versi : Chrome v76
OS & Versi : Windows 10.
Menjalankan Contoh :

example

Saya kelinci putih di sini, pohon dan kelinci kuning keduanya interaktif. Di sini kelinci kuning ditampilkan di belakang pohon dan tidak dapat berinteraksi dengannya. Jika kelinci kuning ditampilkan di depan pohon, kelinci dapat berinteraksi dengannya.

Sumber

codingchili

Komentar yang paling membantu

Gunakan hitArea. Jika Anda perlu menentukan bentuk untuk BANYAK sprite, gunakan PhysicsEditor dan plugin untuk itu https://github.com/eXponenta/pixi-poly . Ia bekerja dengan mendefinisikan ulang containsPoint : https://github.com/eXponenta/pixi-poly/blob/master/pixi-poly-importer/ShapedSprite.js#L11

Solusi pamungkas ada di sini, peretasan memunculkan peta hit 1-bit untuk sprite berdasarkan alfa: https://github.com/pixijs/pixi.js/wiki/v5-Hacks#pixel -perfect-interaction

ivanpopelyshev pada 19 Agu 2019

👍4 🚀2

Semua 5 komentar

Sudahkah Anda mencoba menggunakan hitArea untuk Sprite? Anda dapat menggunakan ini untuk menentukan poligon yang ingin Anda gunakan untuk area interaktif. Mungkin akan mendapatkan hasil yang lebih baik daripada mengesampingkan hal-hal di manajer interaksi.

const tree = PIXI.Sprite.fromFrame('tree.png')
tree.hitArea = new PIXI.Polygon([])

bigtimebuddy pada 18 Agu 2019

👍1

Solusi pamungkas ada di sini, peretasan memunculkan peta hit 1-bit untuk sprite berdasarkan alfa: https://github.com/pixijs/pixi.js/wiki/v5-Hacks#pixel -perfect-interaction

ivanpopelyshev pada 19 Agu 2019

👍4 🚀2

@bigtimebuddy Tidak, saya sedang mencari sesuatu yang akan menambahkan paling sedikit overhead per aset game. Jika saya dapat menghindari menentukan area hit, saya akan menghemat banyak waktu, saya kira saya dapat membuatnya dari gambar. Terima kasih untuk sarannya.

@ivanpopelyshev Saya mencoba untuk mengambil pixel alpha menggunakan renderer.extract.pixels(sprite) di hitArea#contains, tapi sekarang saya hanya mendapatkan 0s. Terima kasih atas tautannya, peretasan sempurna piksel adalah yang saya cari.

codingchili pada 19 Agu 2019

Wow itu bekerja dengan sempurna! Saya menggunakan getColorByPoint dari hitArea.contains dan cukup periksa alfa setelah batas diperiksa. Saya sudah gugup tentang ini untuk sementara waktu, sangat bagus untuk menyelesaikannya.

Terimakasih banyak!

codingchili pada 19 Agu 2019

Hai,

Saya mencoba menggunakan teknik interaksi sempurna Pixel tetapi saya mengalami kesulitan dengan integrasi TypeScript.

Saya menggunakan contoh di atas oleh @ivanpopelyshev ( demo pixel perfect )
Tetapi ketika saya mencoba menambahkan metode .getColorByPoint ke PIXI.Sprite.prototype saya tidak tahu dari mana asal properti colormap dari baseTex const.
Saya memeriksa dokumentasi untuk properti SPRITE.texture.baseTexture.colormap tanpa hasil. Saya hanya menemukannya di kelas colorMapFilter .
TS beri saya pesan kesalahan ini: Properti "colormap" tidak ada pada tipe "BaseTexture"
Inilah cara saya mendeklarasikan baseText :
const baseTex : PIXI.BaseTexture = this.texture.baseTexture;
Masalah yang sama dengan baseTex.resource.source (Properti "sumber" tidak ada pada jenis "Sumber Daya")

Dari mana datangnya properti .colormap dan .source ? Versi PIXI lain atau di luar paket npm pixi v5 utama?

Saya menggunakan PIXI.js v5.3.0. Saya baru dalam hal itu (berasal dari Actioscript 3) Bantuan apa pun akan sangat dihargai.