Pixi.js: Les sprites non interactifs bloquent le clic des sprites interactifs (et DOM ne bloque plus la souris sur le canevas)?

Créé le 26 avr. 2015  ·  23Commentaires  ·  Source: pixijs/pixi.js

Espérons que ces deux sont suffisamment proches pour s'intégrer dans le même problème. J'utilise pixi v3

a.) Chaque fois que j'ai deux sprites qui se chevauchent, même si le sprite supérieur a interactif = false, mon survol sur le sprite inférieur (avec interactive = true) est bloqué par le premier sprite en question.

b.) Lorsque vous passez la souris sur certains éléments DOM que j'utilise pour le HUD de notre jeu, les sprites en dessous agissent toujours comme s'ils étaient directement déplacés. Cela ne se produisait pas dans la v2. Cela se produit avec le survol de la souris, mais pas avec un clic.

Je cherchais le lien cdn pour la v3 afin que je puisse essayer de créer un jsfiddle pour ceux-ci, mais je n'ai pas eu beaucoup de chance.

🕷 Bug

Commentaire le plus utile

L'astuce consiste à définir un hitArea vide sur DisplayObject ou DisplayObjectContainer:
mouseDisabledElement.hitArea = nouveau PIXI.Rectangle (0, 0, 0, 0);

Tous les 23 commentaires

https://rawgit.com/

C'est plutôt cool. Vous pouvez simplement coller le lien du fichier dev bin ici et il vous donnera une URL que le proxy le charge directement depuis GitHub.

Par exemple, vous pouvez coller:

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

et sortez:

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

Merci, je vais faire quelques exemples jsfiddle aujourd'hui et les poster ici.

J'ai des problèmes pour configurer correctement jsfiddle, car je pense que je dois utiliser une image pour illustrer mon propos, mais j'espère pouvoir vous donner du code et des observations que j'ai faites afin de comprendre ce qui se passe .

Cas de bogue théorique (extrait de pseudo-code):

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

Les deux sprites se chevauchent, les gestionnaires de lapin arrêtent de travailler une fois sur le second sprite.

Quand je fais une chose similaire dans jsfiddle (http://jsfiddle.net/h63mLx7b/), le bogue n'est pas présent. L'une des principales différences que je vois ici est que dans le violon, je n'utilise ni fromImage ni fromFrame, mais générant une texture. J'ai essayé cela dans le cadre de mon jeu (en utilisant 2 générer des textures) et le bug est toujours présent.

La prochaine chose que je pense comme une possibilité est le hitArea, mais quand j'ai ajouté hitArea au jsfiddle, il n'a pas recréé le bogue. Je vais continuer à parcourir mon code pour voir s'il y a d'autres extraits importants que j'ai manqués, mais peut-être voyez-vous quelque chose qui me manque? Y a-t-il quelque chose dans PIXI qui a le comportement prévu de faire en sorte qu'un sprite empêche les événements en dessous de se produire que j'ai pu inclure accidentellement?

Peut-être aussi des informations utiles, le lapin a

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

Encore une autre information utile: dans le contexte de mon jeu, le code jsfiddle recrée le bogue! Donc, je suppose que la dernière question devient, quelle option globale (ou option sur les conteneurs eux-mêmes) pourrait créer cela?

wahooooooo je l'ai compris! C'est peut-être une meilleure nouvelle pour moi que vous, en supposant qu'il s'agit vraiment d'un bug et non d'un comportement intentionnel.

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

Lorsque les Sprites existent dans un conteneur avec interactive = true, le bogue se produit. Si vous définissez stage.interactive = false, le bogue disparaît.

EDIT: Mauvais lien de violon au début

@englercj ping. juste curieux de savoir si vous avez eu la chance de regarder ça

Je ne l'ai pas encore fait, désolé Shadow.

J'ai beaucoup d'événements de la vie en cours en ce moment et je n'ai pas eu beaucoup de temps pour des projets parallèles. J'espère faire un bug smash bientôt, mais extrêmement occupé en ce moment :(

pas de soucis mec, je comprends comment ça se passe :)

Hey peeps - fait un petit ajustement à la branche dev, comment ceci:

http://jsfiddle.net/g3vcfmef/

C'est bon maintenant!
Merci :)

J'ai également confirmé travailler de mon côté. Merci beaucoup!

En fait, la deuxième partie de ma question initiale pose toujours un problème:

b.) Lorsque vous passez la souris sur certains éléments DOM que j'utilise pour le HUD de notre jeu, les sprites en dessous agissent toujours comme s'ils étaient directement sur / cliqués. Cela ne se produisait pas dans la v2. Cela se produit avec la souris, mais pas avec un clic.

Cela pose un petit problème car j'essaie de cliquer sur l'un des éléments DOM HUD, la toile ci-dessous déclenche toujours un clic et mon gestionnaire de souris principal Container se produit, cachant ainsi le menu instantanément après sa création / affichage. J'ai essayé d'utiliser e.stopPropagation dans le gestionnaire jquery mouseup, en vain.

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

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

le menu de bataille chevauche l'étape.

Désolé de rouvrir ceci, j'aurais dû relire mon message original :(

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

C'est bizarre, parce que parfois le clic de scène se déclenche d'autres fois, ce n'est pas le cas. Cliquez simplement autour d'une vue

Si cela aide du tout, ce genre de comportement ne semble se produire que pour la souris. La souris et le clic semblent solides.

Rétabli dans 5344062ef4657857ce6a20bea4681e5d66c1c2b2 pour # 1765. Nous recherchons la meilleure façon de résoudre ces problèmes.

@englercj Donc, juste pour m'assurer de bien suivre, le bogue de sprite qui se chevauchent que j'ai mentionné existe à nouveau dans la branche master de pixi pendant que vous cherchez un moyen de mieux le corriger?

Je veux juste m'assurer de savoir où j'en suis / si je peux passer à autre chose pour l'instant pour travailler sur d'autres choses

Oui c'est correct.

Ok, merci pour la mise à jour @englercj

fixé! : +1:

Quel scénario a été corrigé? Si interactif de mon conteneur = true et qu'un émetteur de particules bloque la vue d'un sprite interactif, les événements de souris pour ce sprite ne se déclenchent toujours pas. Évidemment, si je règle le paramètre interactive = false du conteneur, les événements se déclenchent. Cependant, je demande que le conteneur soit interactif afin que la carte puisse être glissée et agrandie. J'utilise la dernière version de développement du code.

L'astuce consiste à définir un hitArea vide sur DisplayObject ou DisplayObjectContainer:
mouseDisabledElement.hitArea = nouveau PIXI.Rectangle (0, 0, 0, 0);

Ce thread a été automatiquement verrouillé car il n'y a pas eu d'activité récente après sa fermeture. Veuillez ouvrir un nouveau numéro pour les bogues associés.

Cette page vous a été utile?
0 / 5 - 0 notes