Pixi.js: Nicht interaktive Sprites blockieren das Klicken interaktiver Sprites (und DOM blockiert nicht mehr die Maus über die Leinwand)?

Erstellt am 26. Apr. 2015  ·  23Kommentare  ·  Quelle: pixijs/pixi.js

Hoffentlich sind diese beiden nahe genug, um tatsächlich in dasselbe Problem zu passen. Ich benutze pixi v3

a.) Immer wenn ich zwei überlappende Sprites habe, selbst wenn das obere Sprite interaktiv = falsch ist, wird mein Mouseover auf dem unteren Sprite (mit interaktiv = wahr) vom ersten fraglichen Sprite blockiert.

b.) Wenn Sie mit der Maus über einige DOM-Elemente fahren, die ich für das HUD unseres Spiels verwende, verhalten sich die Sprites darunter immer noch so, als würden sie direkt mit der Maus bewegt. Dies war in Version 2 nicht der Fall. Dies geschieht mit Mouseover, aber nicht mit einem Klick.

Ich habe nach dem cdn-Link für v3 gesucht, damit ich versuchen kann, eine jsfiddle für diese zu erstellen, hatte aber nicht viel Glück.

🕷 Bug

Hilfreichster Kommentar

Der Trick besteht darin, ein leeres hitArea auf das DisplayObject oder den DisplayObjectContainer zu setzen:
mouseDisabledElement.hitArea = neues PIXI.Rectangle (0, 0, 0, 0);

Alle 23 Kommentare

https://rawgit.com/

Ist ziemlich cool. Sie können dort einfach den Link dev bin-Datei einfügen und erhalten eine URL, über die der Proxy ihn direkt von GitHub lädt.

Sie können beispielsweise Folgendes einfügen:

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

und raus:

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

Danke, ich werde heute einige jsfiddle-Beispiele machen und sie hier posten.

Ich habe Probleme, die jsfiddle richtig einzurichten, da ich denke, ich muss ein Bild verwenden, um meinen Standpunkt zu veranschaulichen, aber ich hoffe, ich kann Ihnen nur einen Code und Beobachtungen geben, die ich gemacht habe, um herauszufinden, was los ist .

Theoretischer Fehlerfall (Pseudocode-Snippet):

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

Die beiden Sprites überlappen sich, die Handler von Bunny hören einmal auf, über dem zweiten Sprite zu arbeiten.

Wenn ich in jsfiddle (http://jsfiddle.net/h63mLx7b/) etwas Ähnliches mache, ist der Fehler nicht vorhanden. Einer der Hauptunterschiede, den ich hier sehe, ist, dass ich in der Geige nicht fromImage oder fromFrame verwende, sondern eine Textur generiere. Ich habe dies im Kontext meines Spiels versucht (mit 2 generierten Texturen) und der Fehler ist immer noch vorhanden.

Das nächste, was ich für möglich halte, ist hitArea, aber als ich hitArea zur jsfiddle hinzufügte, wurde der Fehler nicht neu erstellt. Ich werde meinen Code weiter durchsuchen, um zu sehen, ob es noch andere wichtige Ausschnitte gibt, die ich verpasst habe, aber vielleicht sehen Sie etwas, das mir fehlt? Gibt es irgendetwas in PIXI, das das beabsichtigte Verhalten hat, ein Sprite so zu gestalten, dass Ereignisse darunter verhindert werden, die ich möglicherweise versehentlich aufgenommen habe?

Möglicherweise auch nützliche Informationen, hat Hase

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

Noch ein nützlicher Leckerbissen: Im Kontext meines Spiels erstellt der jsfiddle-Code den Fehler neu! Ich denke also, die letzte Frage lautet: Welche globale Option (oder Option auf den Containern selbst) könnte dies schaffen?

wahooooooo ich habe es herausgefunden! Das ist vielleicht eine bessere Nachricht für mich als Sie, vorausgesetzt, dies ist wirklich ein Fehler und kein beabsichtigtes Verhalten.

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

Wenn die Sprites in einem Container mit interaktiv = true vorhanden sind, tritt der Fehler auf. Wenn Sie stage.interactive = false setzen, wird der Fehler behoben.

EDIT: Zuerst falscher Geigenlink

@englercj ping. Ich bin nur neugierig, ob Sie die Gelegenheit haben, sich das anzuschauen

Ich habe es noch nicht getan, sorry Shadow.

Ich habe gerade viele Lebensereignisse im Gange und hatte nicht viel Zeit für Nebenprojekte. Ich hoffe, bald einen Bug Smash zu machen, bin aber momentan sehr beschäftigt :(

Keine Sorge Mann, ich verstehe wie es geht :)

Hey guck mal - hab ein bisschen am Entwickler-Zweig gezwickt, wie das:

http://jsfiddle.net/g3vcfmef/

Jetzt ist es ok!
Vielen Dank :)

Bestätigt, auch an meinem Ende zu arbeiten. Vielen Dank!

Eigentlich wirft der zweite Teil meiner ursprünglichen Frage immer noch ein Problem auf:

b.) Wenn Sie mit der Maus über einige DOM-Elemente fahren, die ich für das HUD unseres Spiels verwende, verhalten sich die Sprites darunter immer noch so, als würden sie direkt mit der Maus über / geklickt. Dies war in Version 2 nicht der Fall. Dies geschieht mit Mouseover, aber nicht mit einem Klick.

Dies verursacht ein kleines Problem, da ich versuche, auf eines der DOM-HUD-Elemente zu klicken, die Zeichenfläche unten immer noch einen Klick auslöst und mein Haupt-Container-Mouseup-Handler ausgeführt wird, wodurch das Menü sofort nach dem Erstellen / Anzeigen ausgeblendet wird. Ich habe versucht, e.stopPropagation im jquery mouseup-Handler zu verwenden, ohne Erfolg.

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

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

Das Kampfmenü überlappt die Phase.

Es tut mir leid, dies erneut zu öffnen. Ich hätte meinen ursprünglichen Beitrag erneut lesen sollen :(

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

Es ist komisch, weil manchmal der Bühnenklick andere Male auslöst, nicht. Klicken Sie einfach um und sehen Sie

Wenn es überhaupt hilft, scheint diese Art von Verhalten nur bei Mouseup aufzutreten. Mousedown und Click scheinen solide zu sein.

In 5344062ef4657857ce6a20bea4681e5d66c1c2b2 für # 1765 zurückgesetzt. Wir suchen nach dem besten Weg, um diese Probleme zu lösen.

@englercj Um sicherzugehen, dass ich folge, existiert der überlappende Sprite-Fehler, den ich erwähnt habe, wieder im Hauptzweig von pixi, während Sie nach einer Möglichkeit suchen, ihn besser zu beheben?

Ich möchte nur sicherstellen, dass ich weiß, wo ich stehe / ob ich erst einmal weitermachen kann, um an anderen Dingen zu arbeiten

Ja, das ist richtig.

Ok, danke für das Update @englercj

Fest! : +1:

Welches Szenario wurde behoben? Wenn mein Container interaktiv = wahr ist und ein Partikelemitter die Sicht auf ein interaktives Sprite blockiert, werden die Mausereignisse für dieses Sprite immer noch nicht ausgelöst. Wenn ich den interaktiven Wert des Containers auf "false" setze, werden die Ereignisse ausgelöst. Ich benötige jedoch, dass der Container interaktiv ist, damit die Karte gezogen und gezoomt werden kann. Ich verwende die neueste Entwicklerversion des Codes.

Der Trick besteht darin, ein leeres hitArea auf das DisplayObject oder den DisplayObjectContainer zu setzen:
mouseDisabledElement.hitArea = neues PIXI.Rectangle (0, 0, 0, 0);

Dieser Thread wurde automatisch gesperrt, da nach dem Schließen keine aktuellen Aktivitäten stattgefunden haben. Bitte öffnen Sie eine neue Ausgabe für verwandte Fehler.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

MRVDH picture MRVDH  ·  3Kommentare

SebastienFPRousseau picture SebastienFPRousseau  ·  3Kommentare

sntiagomoreno picture sntiagomoreno  ·  3Kommentare

finscn picture finscn  ·  3Kommentare

softshape picture softshape  ·  3Kommentare