Pixi.js: Dê a opção de definir limites fixos em um contêiner

Criado em 23 set. 2016  ·  15Comentários  ·  Fonte: pixijs/pixi.js

Estou tendo um problema em que desenho algo dentro de um contêiner e os limites desse contêiner são recalculados imediatamente. Embora esse exemplo em particular seja bastante artificial - na realidade, eu desenharia algo assim apenas uma vez, posso ver muitos problemas potenciais provenientes desse comportamento (por exemplo, digamos que eu coloquei algum item fora da tela no contêiner que o o usuário pode deslizar de lado, isso destruiria completamente a lógica de ajuste que tenho lá agora).

💾 v4.x (Legacy) 🤔 Question

Comentários muito úteis

Ei @megakoresh , acho que sei o que está causando a confusão aqui. Como o objetivo principal do pixi é renderizar objetos 2D, quase toda a API é voltada para esse fim. Os limites podem ser particularmente confusos.

Em pixi, os limites de um Sprite são definidos pela textura. Ou seja, o tamanho do resultado final do objeto renderizado. Da mesma forma, uma vez que um Container _não é desenhado_ e, portanto, seus limites são definidos pelos filhos que ele contém. Particularmente, pelos limites dessas crianças. Para um objeto Graphics, os limites são definidos pela geometria que você desenha nele. Se você desenhar outro retângulo em um objeto Graphics fora dos limites atuais, os limites se expandirão para incluir a geometria recém-desenhada.

Esperançosamente, isso faz sentido e dá a você um conceito rápido de como os limites são estruturados no Pixi.

Agora, especificamente para o seu exemplo, acredito que seu problema esteja no mal-entendido de como os limites funcionam para um objeto Graphics. Acho que você não percebeu que desenhar sua grade está mudando os limites do objeto Graphics ( desktop1 ) que contém o retângulo verde ( wonderfulRectangle ).

Você pode ver que, após o primeiro desenho, sua grade se estende para além do tamanho da janela de visualização:

image

Isso estende os limites do objeto Graphics pai ( desktop1 ) para incluir a geometria fora da janela de visualização. Isso torna sua largura maior, o que prejudica seu próximo cálculo da grade, e o ciclo continua. Lembre-se de que as linhas têm espessura e, portanto, ocupam largura.

Existem algumas maneiras de consertar isso, a que vem à mente é que, como sua grade preenche todo o tamanho da janela de visualização, apenas use o tamanho da janela de visualização em vez do tamanho de seu pai. Isso significa que se / quando você desenha mais geometria fora da janela de visualização, seus cálculos de grade nunca mudam. Porque a janela de exibição de renderização não muda de tamanho.

Se isso não for uma opção, por exemplo, sua área de grade não é do tamanho da janela de visualização. Você pode apenas fazer os cálculos com base em um "tamanho conhecido" da área da grade. Acho que era isso que Ivan estava tentando dizer sobre o uso de uma instância estática de Rectangle . Basicamente, decida que sua grade é 800x600 e faça cálculos baseados nisso, em vez de executar os limites reais renderizados dos objetos na cena.

Atualizei o codepen para usar o método de janela de visualização que descrevi. Entre em contato se tiver mais perguntas.

http://codepen.io/anon/pen/yarVwm?editors=0010

Todos 15 comentários

O contêiner não tem área e limites fixos, é apenas uma coleção de filhos e esse é o comportamento padrão do PIXI. Se você quiser corrigir os limites, estenda seu próprio contêiner, substitua o método "CalculeBounds".

Se não tiver uma área e limites fixos e for essencialmente apenas uma estrutura de dados, não deve afetar a renderização (semelhante a como se você colocar um objeto que é muito grande em um iframe, o iframe não vai ficar maior) . No exemplo, isso claramente acontece, e acho difícil culpar isso na lógica falha do exemplo. Talvez não ter uma opção de limites fixos seja não ver a raiz do problema, mas o problema está definitivamente lá.

Como você sugere que eu implemente elementos "fora da tela"?

Por que você precisa de limites?

Você viu o exemplo? O comportamento estranho é causado pelo fato de que toda vez que drawDebugLines é executado e desenha as linhas no contêiner "do ícone", esse contêiner fica maior. O que, por sua vez, confunde os pontos de ajuste, pois dependem das dimensões do contêiner (largura / colunas, altura / linhas).

Se eu mapear o encaixe para o elemento de renderização, isso apresenta 2 problemas: o renderizador depende do tamanho da tela, orientação, densidade de pixels e dimensões especificadas pelo usuário do elemento de desenho. Ele pode conter itens que são maiores do que ele (por exemplo, fora da tela, que podem deslizar) e menores (por exemplo, se eu tornar a área de trabalho 1 e a área de trabalho 2 visíveis ao mesmo tempo. Em todos esses casos, o encaixe e outras restrições devem ser preservados .

lel.width = wonderfulRectangle.width * 0.8;
lel.height = wonderfulRectangle.height * 0.9;

por que você não usa isso como uma constante? Você pode simplesmente configurar algo global, assim:

var globalRect = new PIXI.Rectangle(0, 0, renderr.width/renderer.resolution, renderer.height/renderer.resolution);

atualize esse retângulo em cada redimensionamento e trabalhe com isso. Por que você precisa de "lel.width" e "lel.height"?

LEL. Aquele não tem nada a ver com nada, é apenas um Sprite que pode ser movido e estou definindo a largura e a altura porque a imagem original é muito grande e eu preciso ajustá-la em um retângulo. Se você olhar o código no, verá que o contêiner principal desse "ícone" é desktop1 e é aquele para o qual estou tentando encaixar o ícone. Aquele pertence ao desktopLayer e o desktopLayer é o que coloquei no palco.

O que estou tentando emular é o comportamento de uma tela do Android Launcher com várias visualizações deslizantes e uma grade de ícones sobre um fundo de área de trabalho.

return new PIXI.Point(snapPosX.clamp(0, target.parent.width), snapPosY.clamp(0, target.parent.height));

Ainda não entendo o que você quer. Os limites do contêiner PIXI funcionam exatamente como deveriam. Você não é o primeiro a cometer esse erro.

Oh, respiração do criador, eu não posso mais fazer isso. Alguém pode apenas olhar para o exemplo, mover o rageface e me dizer por que essa porcaria com as linhas está acontecendo e se é um bug / recurso ausente no PIXI ou se eu tenho um erro no código?

Achei que fosse porque suas linhas realmente afetam a largura e a altura do contêiner e você usa essas propriedades para desenhar linhas em primeiro lugar.

Também codepen não está mais funcionando para mim, de alguma forma. Alguma ideia por quê?

Sim, está quebrado para mim também porque eu acidentalmente comentei a chamada do init, meu mal, desculpe, consertado. Sim, você está correto - isso é o que eu faço e não vejo nenhuma outra maneira de desenhar essas linhas para refletir a grade visualmente. Então, o que exatamente você proporia para eu traçar essas linhas? Configurar algum tipo de objeto apenas meta Rectangle separado que sempre copia as dimensões do contêiner renderizado associado e usa isso para derivar os pontos de ajuste e outras posições? Isso parece um excesso de engenharia em torno do problema, em vez de resolvê-lo. Existe algum motivo pelo qual um contêiner não pode ter "estouro" como um elemento DOM normal?

Publiquei isso como um problema não porque não há solução, mas porque não vejo uma justificativa para esse comportamento ilógico. Especialmente porque as linhas não saem dos limites do contêiner, elas são desenhadas de ponta a ponta. No produto que estou construindo, espera-se que o usuário faça muita interação com o conteúdo. Estou preocupado porque, se tiver que configurar "retângulos de referência" para cada objeto na cena, o código ficará extremamente confuso e difícil de manter .

Você mencionou que eu tive um "erro" no meu código. Qual é esse erro? Eu procurei muito bem, mas não consigo encontrar nenhuma lógica defeituosa.

Use alguma variável global em vez de "largura / altura" que estão mudando. Atualize essa variável quando necessário.

var globalRect = new PIXI.Rectangle(0, 0, renderer.width/renderer.resolution, renderer.height/renderer.resolution);

Se você quiser limites "locais", faça-os, mas não use as mesmas variáveis ​​que pixi:

container.myRect = new PIXI.Rectangle(0, 0, renderer.width/renderer.resolution, renderer.height/renderer.resolution);

O erro é que não há layout no PIXI. "largura" e "altura" têm significados diferentes. Você não pode prender coords filho pela altura da largura do pai, porque o filho os afeta.

Não há como o PIXI saber que você deseja a largura / altura de algum retângulo desenhado dentro dos gráficos, e não limites gráficos inteiros (e se houver círculos também?), E não limites filhos. A única lógica razoável para limites é levar tudo dentro deles.

Imagine que temos um container com dois sprites, cada um tem (w = 10, h = 10), um está em (0,0) o segundo está em (100000, 100000). Qual a largura e altura desse contêiner? Além disso, mesmo se de alguma forma fixarmos os limites, o que eles afetarão?

E se quisermos mudar a largura e a altura de alguma forma, como essa mudança afetará os elementos dentro do contêiner?

Não estou brincando, é realmente difícil para mim imaginar outros designs de API. Se você tem alguma ideia, pode ser um componente adicional para layout, por favor escreva aqui Apenas lembre-se de que estamos lidando com renderização de palco e não com alguma interface gráfica do usuário, o desempenho é um problema real.

Ei @megakoresh , acho que sei o que está causando a confusão aqui. Como o objetivo principal do pixi é renderizar objetos 2D, quase toda a API é voltada para esse fim. Os limites podem ser particularmente confusos.

Em pixi, os limites de um Sprite são definidos pela textura. Ou seja, o tamanho do resultado final do objeto renderizado. Da mesma forma, uma vez que um Container _não é desenhado_ e, portanto, seus limites são definidos pelos filhos que ele contém. Particularmente, pelos limites dessas crianças. Para um objeto Graphics, os limites são definidos pela geometria que você desenha nele. Se você desenhar outro retângulo em um objeto Graphics fora dos limites atuais, os limites se expandirão para incluir a geometria recém-desenhada.

Esperançosamente, isso faz sentido e dá a você um conceito rápido de como os limites são estruturados no Pixi.

Agora, especificamente para o seu exemplo, acredito que seu problema esteja no mal-entendido de como os limites funcionam para um objeto Graphics. Acho que você não percebeu que desenhar sua grade está mudando os limites do objeto Graphics ( desktop1 ) que contém o retângulo verde ( wonderfulRectangle ).

Você pode ver que, após o primeiro desenho, sua grade se estende para além do tamanho da janela de visualização:

image

Isso estende os limites do objeto Graphics pai ( desktop1 ) para incluir a geometria fora da janela de visualização. Isso torna sua largura maior, o que prejudica seu próximo cálculo da grade, e o ciclo continua. Lembre-se de que as linhas têm espessura e, portanto, ocupam largura.

Existem algumas maneiras de consertar isso, a que vem à mente é que, como sua grade preenche todo o tamanho da janela de visualização, apenas use o tamanho da janela de visualização em vez do tamanho de seu pai. Isso significa que se / quando você desenha mais geometria fora da janela de visualização, seus cálculos de grade nunca mudam. Porque a janela de exibição de renderização não muda de tamanho.

Se isso não for uma opção, por exemplo, sua área de grade não é do tamanho da janela de visualização. Você pode apenas fazer os cálculos com base em um "tamanho conhecido" da área da grade. Acho que era isso que Ivan estava tentando dizer sobre o uso de uma instância estática de Rectangle . Basicamente, decida que sua grade é 800x600 e faça cálculos baseados nisso, em vez de executar os limites reais renderizados dos objetos na cena.

Atualizei o codepen para usar o método de janela de visualização que descrevi. Entre em contato se tiver mais perguntas.

http://codepen.io/anon/pen/yarVwm?editors=0010

LOL k. Então, com seus esforços combinados, acho que entendi o cerne da questão: acho que estava pensando que, se a biblioteca costuma ser montada com bibliotecas de telas, presumi que fosse a mesma coisa, o que claramente não é. Acho que cuidar do agrupamento de objetos visuais e coisas como estouro são simples, não estão no escopo (talvez quando eu aprender mais sobre a biblioteca, eu possa fazer um plug-in para isso) e preciso cuidar dessas coisas sozinho, enquanto o próprio PIXI cuida de apenas exibir coisas na tela. Caso encerrado, obrigado.

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

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