Pixi.js: Sprites não interativos bloqueiam o clique de sprites interativos (e o DOM não bloqueia mais o mouse sobre a tela)?

Criado em 26 abr. 2015  ·  23Comentários  ·  Fonte: pixijs/pixi.js

Esperançosamente, esses dois estão próximos o suficiente para realmente se encaixar no mesmo problema. Estou usando o pixi v3

a.) Sempre que tenho dois sprites sobrepostos, mesmo que o sprite superior tenha interativo = false, meu mouseover no sprite inferior (com interativo = verdadeiro) é bloqueado pelo primeiro sprite em questão.

b.) Ao passar o mouse sobre alguns elementos DOM que uso para o HUD do nosso jogo, os sprites abaixo dele ainda agem como se estivessem sendo movidos diretamente com o mouse. Isso não costumava acontecer na v2. Isso está acontecendo com o mouseover, mas não com o clique.

Estava procurando o link cdn para v3 para tentar criar um jsfiddle para eles, mas não tive muita sorte.

🕷 Bug

Comentários muito úteis

O truque é definir um hitArea vazio para DisplayObject ou DisplayObjectContainer:
mouseDisabledElement.hitArea = new PIXI.Rectangle (0, 0, 0, 0);

Todos 23 comentários

https://rawgit.com/

É muito legal. Você pode simplesmente colar o link do arquivo dev bin lá e ele lhe dará uma url que o proxy está carregando direto do GitHub.

Por exemplo, você pode colar em:

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

e saia:

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

Obrigado, farei alguns exemplos do jsfiddle hoje e postarei aqui.

Estou tendo problemas para configurar o jsfiddle corretamente, pois acho que preciso usar uma imagem para ilustrar meu ponto, mas espero poder apenas fornecer um código e algumas observações que fiz para descobrir o que está acontecendo .

Caso de bug teórico (Pseudo snippet 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);

Os dois sprites se sobrepõem, os manipuladores do coelho param de trabalhar uma vez no segundo sprite.

Quando faço algo semelhante no jsfiddle (http://jsfiddle.net/h63mLx7b/), o bug não está presente. Uma das principais diferenças que vejo aqui é que no violino não estou usando fromImage ou fromFrame, mas gerando uma textura. Eu tentei isso no contexto do meu jogo (usando 2 gerar texturas) e o bug ainda está presente.

A próxima coisa que estou pensando como uma possibilidade é hitArea, mas quando adicionei hitArea ao jsfiddle, o bug não foi recriado. Vou continuar arquivando meu código para ver se há algum outro trecho significativo que perdi, mas talvez você veja algo que estou perdendo? Existe algo no PIXI que tem o comportamento pretendido de fazer um sprite impedir que eventos abaixo dele aconteçam que eu possa ter incluído acidentalmente?

Possivelmente também informações úteis, o coelho tem

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

Mais uma informação útil: no contexto do meu jogo, o código jsfiddle recria o bug! Então eu acho que a pergunta final é: qual opção global (ou opção nos próprios contêineres) poderia estar criando isso?

wahooooooo Eu descobri! Isso pode ser uma notícia um pouco melhor para mim do que para você, presumindo que seja realmente um bug e não um comportamento intencional.

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

Quando os Sprites existem em um container com interativo = true, o bug acontece. Se você definir stage.interactive = false, o bug desaparece.

EDITAR: Link de violino errado no início

@englercj ping. apenas curioso se você teve a chance de olhar para este

Ainda não, desculpe Shadow.

Tenho muitos eventos de vida acontecendo agora e não tive muito tempo com projetos paralelos. Espero destruir um bug em breve, mas estou extremamente ocupado agora :(

não se preocupe cara, eu entendo como vai :)

Ei, pessoal - fiz um pequeno ajuste no branch de desenvolvimento, como este:

http://jsfiddle.net/g3vcfmef/

Está tudo bem agora!
Obrigado :)

Confirmado trabalhando no meu fim também. Muito obrigado!

Na verdade, a segunda parte da minha pergunta original ainda apresenta um problema:

b.) Ao passar o mouse sobre alguns elementos DOM que uso para o HUD do nosso jogo, os sprites abaixo dele ainda agem como se estivessem sendo movidos / clicados diretamente. Isso não costumava acontecer na v2. Isso está acontecendo com o mouseover, mas não com o clique.

Isso está causando um pequeno problema, pois tento clicar em um dos elementos do DOM HUD, a tela abaixo ainda dispara um clique e meu manipulador de mouseup principal do Container acontece, ocultando assim o menu instantaneamente após criá-lo / exibi-lo. Tentei usar e.stopPropagation no manipulador jquery mouseup, mas sem sucesso.

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

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

o menu de batalha se sobrepõe ao palco.

Desculpe por reabrir isto, eu deveria ter relido minha postagem original :(

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

É estranho, porque às vezes o clique do palco é acionado, outras vezes, não. Basta clicar e ver

Se ajudar, esse tipo de comportamento só parece ocorrer com o mouseup. Abaixar o mouse e clicar parecem sólidos.

Revertido em 5344062ef4657857ce6a20bea4681e5d66c1c2b2 para # 1765. Estamos procurando a melhor maneira de resolver esses problemas.

@englercj Então, só para ter certeza de que estou acompanhando, o bug do sprite sobreposto que mencionei existe no branch master do pixi novamente, enquanto vocês procuram uma maneira de consertá-lo melhor?

Só quero ter certeza de que sei onde estou / se posso simplesmente seguir em frente para trabalhar em outras coisas

Sim, está correto.

Ok, obrigado pela atualização @englercj

fixo! : +1:

Qual cenário foi corrigido? Se meu contêiner interativo = true, e um emissor de partículas está bloqueando a visualização de um sprite interativo, os eventos de mouse para aquele sprite ainda não estão disparando. Obviamente, se eu definir o contêiner interativo = false, os eventos serão acionados. No entanto, exijo que o contêiner seja interativo para que o mapa possa ser arrastado e ampliado. Estou usando a versão dev mais recente do código.

O truque é definir um hitArea vazio para DisplayObject ou DisplayObjectContainer:
mouseDisabledElement.hitArea = new PIXI.Rectangle (0, 0, 0, 0);

Este tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente depois que foi fechado. Abra um novo problema para bugs relacionados.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

lunabunn picture lunabunn  ·  3Comentários

readygosports picture readygosports  ·  3Comentários

SebastienFPRousseau picture SebastienFPRousseau  ·  3Comentários

distinctdan picture distinctdan  ·  3Comentários

zcr1 picture zcr1  ·  3Comentários