Pixi.js: 非インタラクティブスプライトはインタラクティブスプライトのクリックをブロックします(そしてDOMはもうキャンバス上でのマウスオーバーをブロックしません)?

作成日 2015年04月26日  ·  23コメント  ·  ソース: pixijs/pixi.js

うまくいけば、これら2つは実際に同じ問題に収まるのに十分近いです。 pixiv3を使用しています

a。)2つの重複するスプライトがある場合は常に、上部のスプライトにインタラクティブ= falseがある場合でも、下部のスプライト(インタラクティブ= true)でのマウスオーバーは、問題の最初のスプライトによってブロックされます。

b。)ゲームのHUDに使用するいくつかのDOM要素にマウスを合わせると、その下のスプライトは、直接マウスオーバーされているかのように機能します。 これは、v2では発生しませんでした。 これはマウスオーバーで発生しますが、クリックでは発生しません。

これらのjsfiddleを作成できるように、v3のcdnリンクを探していましたが、あまり運がありませんでした。

🕷 Bug

最も参考になるコメント

秘訣は、空のhitAreaをDisplayObjectまたはDisplayObjectContainerに設定することです。
mouseDisabledElement.hitArea = new PIXI.Rectangle(0、0、0、0);

全てのコメント23件

https://rawgit.com/

かなりかっこいいです。 dev binファイルリンクをそこに貼り付けるだけで、プロキシがGitHubから直接ロードするURLが提供されます。

たとえば、次のように貼り付けることができます。

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

出て行け:

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

おかげで、今日はいくつかのjsfiddleの例を作成し、ここに投稿します。

私のポイントを説明するために画像を使用する必要があると思うので、jsfiddleを正しく設定するのに問題がありますが、何が起こっているのかを理解するために私が行ったコードと観察をいくつか提供できることを願っています。

理論上のバグケース(擬似コードスニペット):

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);

2つのスプライトがオーバーラップし、バニーのハンドラーが2番目のスプライトで1回動作を停止します。

jsfiddle(http://jsfiddle.net/h63mLx7b/)で同様のことをすると、バグは発生しません。 ここで私が見る主な違いの1つは、フィドルではfromImageまたはfromFrameを使用せず、テクスチャを生成していることです。 私は自分のゲームのコンテキストでこれを試しましたが(2つの生成テクスチャを使用)、バグはまだ存在しています。

次に可能性として考えているのはhitAreaですが、jsfiddleにhitAreaを追加しても、バグは再現されませんでした。 見逃した他の重要なスニペットがあるかどうかを確認するためにコードをファイリングし続けますが、おそらく私が見逃しているものが表示されますか? スプライトを作成して、その下のイベントが発生しないようにするという意図された動作を持っているPIXIに、誤って含めた可能性のあるものはありますか?

おそらくまた有用な情報、バニーは持っています

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

さらにもう1つの便利なヒント:私のゲームのコンテキストでは、jsfiddleコードがバグを再現します! したがって、最後の質問は、どのグローバルオプション(またはコンテナ自体のオプション)がこれを作成できるかということになると思います。

wahoooooooわかった! これが本当にバグであり、意図された動作ではないと仮定すると、それはあなたよりも少し良いニュースかもしれません。

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

スプライトがinteractive = trueのコンテナに存在する場合、バグが発生します。 stage.interactive = falseを設定すると、バグはなくなります。

編集:最初は間違ったフィドルリンク

@englercjping 。 あなたがこれを見る機会を得たかどうかだけ興味があります

まだです、申し訳ありませんがシャドウ。

私は今、たくさんのライフイベントが行われていて、サイドプロジェクトの時間があまりありませんでした。 私はすぐにバグスマッシュをしたいと思っていますが、今は非常に忙しいです:(

心配いりません、私はそれがどうなるか理解しています:)

ちょっと覗いてください-devブランチに少し調整を加えました、どのようにこれ:

http://jsfiddle.net/g3vcfmef/

今は大丈夫です!
ありがとう:)

私の側でも作業を確認しました。 本当にありがとう!

実際、私の最初の質問の2番目の部分は、まだ問題を提起しています。

b。)ゲームのHUDに使用するいくつかのDOM要素にマウスを合わせると、その下のスプライトは、直接マウスオーバー/クリックされているかのように機能します。 これは、v2では発生しませんでした。 これはマウスオーバーで発生しますが、クリックでは発生しません。

これは少し問題を引き起こしています。DOMHUD要素の1つをクリックしようとすると、下のキャンバスがクリックをトリガーし、メインのContainer mouseupハンドラーが発生するため、メニューを作成/表示した直後に非表示になります。 jqueryのmouseupハンドラーでe.stopPropagationを使用しようとしましたが、役に立ちませんでした。

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

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

バトルメニューはステージと重なっています。

これを再度開いて申し訳ありませんが、元の投稿をもう一度読む必要があります:(

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

ステージクリックがトリガーされることもあれば、トリガーされないこともあるので、奇妙です。 見回すだけで

それがまったく役に立ったとしても、この種の動作はマウスアップでのみ発生するようです。 マウスダウンとクリックはしっかりしているようです。

#1765の5344062ef4657857ce6a20bea4681e5d66c1c2b2で元に戻されました。 私たちはこれらの問題を解決するための最良の方法を検討しています。

@englercjそれで、私が従うことを確認するために、私が言及した重複するスプライトバグは、

自分がどこに立っているかを確認したい/今のところ、他のことに取り組むためにこれから先に進むことができるかどうか

はい、その通りです。

わかりました、更新

修繕! :+1:

どのシナリオが修正されましたか? コンテナのinteractive = trueで、パーティクルエミッタがインタラクティブスプライトの表示をブロックしている場合、そのスプライトのマウスイベントはまだ発生していません。 明らかに、コンテナのinteractive = falseを設定すると、イベントが発生します。 ただし、マップをドラッグしてズームできるように、コンテナはインタラクティブである必要があります。 コードの最新の開発バージョンを使用しています。

秘訣は、空のhitAreaをDisplayObjectまたはDisplayObjectContainerに設定することです。
mouseDisabledElement.hitArea = new PIXI.Rectangle(0、0、0、0);

このスレッドは、閉じられた後に最近のアクティビティがないため、自動的にロックされています。 関連するバグについては、新しい問題を開いてください。

このページは役に立ちましたか?
0 / 5 - 0 評価

関連する問題

softshape picture softshape  ·  3コメント

samueller picture samueller  ·  3コメント

sntiagomoreno picture sntiagomoreno  ·  3コメント

madroneropaulo picture madroneropaulo  ·  3コメント

readygosports picture readygosports  ·  3コメント