Pixi.js: Los sprites no interactivos bloquean el clic de los sprites interactivos (y DOM ya no bloquea el mouse sobre el lienzo).

Creado en 26 abr. 2015  ·  23Comentarios  ·  Fuente: pixijs/pixi.js

Con suerte, estos dos están lo suficientemente cerca como para encajar en el mismo problema. Estoy usando pixi v3

a.) Siempre que tengo dos sprites superpuestos, incluso si el sprite superior tiene interactivo = falso, mi mouse sobre el sprite inferior (con interactivo = verdadero) es bloqueado por el primer sprite en cuestión.

b.) Al pasar el mouse sobre algunos elementos DOM que utilizo para el HUD de nuestro juego, los sprites debajo todavía actúan como si estuvieran directamente colocados sobre ellos. Esto no solía suceder en v2. Esto sucede con el mouse sobre, pero no con el clic.

Estaba buscando el enlace cdn para v3 para poder intentar crear un jsfiddle para estos, pero no tuve mucha suerte.

🕷 Bug

Comentario más útil

El truco consiste en establecer un hitArea vacío en DisplayObject o DisplayObjectContainer:
mouseDisabledElement.hitArea = new PIXI.Rectangle (0, 0, 0, 0);

Todos 23 comentarios

https://rawgit.com/

Es muy bueno. Simplemente puede pegar el enlace del archivo dev bin allí y le dará una URL que el proxy lo está cargando directamente desde GitHub.

Por ejemplo, puede pegar:

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

y salir:

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

Gracias, hoy haré algunos ejemplos de jsfiddle y los publicaré aquí.

Estoy teniendo problemas para configurar jsfiddle correctamente, ya que creo que necesito usar una imagen para ilustrar mi punto, pero espero poder darle algo de código y observaciones que hice para averiguar qué está sucediendo. .

Caso de error teórico (pseudo fragmento de código):

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

Los dos sprites se superponen, los controladores de bunny dejan de funcionar una vez sobre el segundo sprite.

Cuando hago algo similar en jsfiddle (http://jsfiddle.net/h63mLx7b/), el error no está presente. Una de las principales diferencias que veo aquí es que en el violín no estoy usando fromImage o fromFrame, sino generando una textura. Probé esto en el contexto de mi juego (usando 2 generar texturas) y el error todavía está presente.

Lo siguiente en lo que pienso como una posibilidad es hitArea, pero cuando agregué hitArea al jsfiddle, no volvió a crear el error. Voy a seguir archivando mi código para ver si hay otros fragmentos importantes que me perdí, pero tal vez ¿ves algo que me estoy perdiendo? ¿Hay algo en PIXI que tenga el comportamiento previsto de hacer que un sprite evite que sucedan eventos debajo de él que pueda haber incluido accidentalmente?

Posiblemente también información útil, bunny tiene

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

Otro dato útil: en el contexto de mi juego, ¡el código jsfiddle recrea el error! Entonces, supongo que la pregunta final es, ¿qué opción global (u opción en los contenedores mismos) podría estar creando esto?

wahooooooo ¡Lo descubrí! Sin embargo, eso puede ser una mejor noticia para mí que para usted, asumiendo que esto es realmente un error y no un comportamiento intencionado.

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

Cuando los Sprites existen en un contenedor con interactivo = verdadero, ocurre el error. Si establece stage.interactive = false, el error desaparece.

EDITAR: enlace de violín incorrecto al principio

@englercj ping. solo curiosidad si has tenido la oportunidad de ver esto

Todavía no lo he hecho, lo siento Shadow.

Tengo muchos eventos en la vida en este momento y no he tenido mucho tiempo para proyectos paralelos. Espero hacer un aplastamiento de errores pronto, pero estoy extremadamente ocupado en este momento :(

no te preocupes hombre, entiendo como va :)

Hola, píos: hice un pequeño ajuste en la rama de desarrollo, cómo esto:

http://jsfiddle.net/g3vcfmef/

¡Ahora está bien!
Gracias :)

Confirmado trabajando en mi parte también. ¡Gracias un montón!

En realidad, la segunda parte de mi pregunta original sigue planteando un problema:

b.) Al pasar el mouse sobre algunos elementos DOM que utilizo para el HUD de nuestro juego, los sprites debajo todavía actúan como si se estuvieran colocando el mouse directamente sobre ellos o haciendo clic en ellos. Esto no solía suceder en v2. Esto sucede con el mouse sobre, pero sin hacer clic.

Esto está causando un pequeño problema, ya que trato de hacer clic en uno de los elementos DOM HUD, el lienzo de abajo aún activa un clic y ocurre mi controlador principal del mouse de Contenedor, ocultando así el menú instantáneamente después de crearlo / mostrarlo. Intenté usar e.stopPropagation en el controlador jquery mouseup, sin éxito.

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

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

el menú de batalla se superpone al escenario.

Lamento volver a abrir esto, debería haber vuelto a leer mi publicación original :(

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

Es extraño, porque a veces el clic del escenario se activa otras veces, no es así. Simplemente haga clic en un ver

Si sirve de algo, este tipo de comportamiento solo parece ocurrir con el mouse hacia arriba. El mouse y el clic parecen ser sólidos.

Revertido en 5344062ef4657857ce6a20bea4681e5d66c1c2b2 para # 1765. Estamos buscando la mejor manera de resolver estos problemas.

@englercj Entonces, solo para asegurarme de seguirlo, el error de sprite superpuesto que mencioné existe nuevamente en la rama maestra de pixi mientras todos buscan una manera de solucionarlo mejor.

Solo quiero asegurarme de saber dónde estoy parado / si puedo pasar de esto por ahora para trabajar en otras cosas

Si, eso es correcto.

Ok, gracias por la actualización @englercj

¡reparado! : +1:

¿Qué escenario se solucionó? Si mi contenedor es interactivo = verdadero y un emisor de partículas bloquea la vista de un objeto interactivo, los eventos del ratón para ese objeto todavía no se activan. Obviamente, si configuro el contenedor interactivo = falso, los eventos se activan. Sin embargo, necesito que el contenedor sea interactivo para que el mapa se pueda arrastrar y hacer zoom. Estoy usando la última versión de desarrollo del código.

El truco consiste en establecer un hitArea vacío en DisplayObject o DisplayObjectContainer:
mouseDisabledElement.hitArea = new PIXI.Rectangle (0, 0, 0, 0);

Este hilo se ha bloqueado automáticamente ya que no ha habido ninguna actividad reciente después de su cierre. Abra un nuevo problema para errores relacionados.

¿Fue útil esta página
0 / 5 - 0 calificaciones