Pixi.js: Objetos de exibição classificáveis

Criado em 29 ago. 2013 · 12Comentários · Fonte: pixijs/pixi.js

às vezes, precisamos que o objeto de exibição seja renderizado em uma determinada ordem para preservar o z-index.

seria bom se pudéssemos ter uma maneira de escolher a ordem dos filhos desenhados, mesmo com um método de classificação ou permitindo um método reder separado para DisplayObjects individuais para que o desenvolvedor possa construir sua lista ordenada, iterar por meio de objetos e renderizá-los .

🤔 Question

Fonte

alaa-eddine

Comentários muito úteis

var mapContainer = new PIXI.DisplayObjectContainer(),
    unitsContainer = new PIXI.DisplayObjectContainer(),
    menuContainer = new PIXI.DisplayObjectContainer();

mapContainer.zIndex = 5;
unitsContainer.zIndex = 10;
menuContainer.zIndex = 20;

/* adding children, no matter in which order */
stage.addChild(mapContainer);
stage.addChild(menuContainer);
stage.addChild(unitsContainer);

/* call this function whenever you added a new layer/container */
stage.updateLayersOrder = function () {
    stage.children.sort(function(a,b) {
        a.zIndex = a.zIndex || 0;
        b.zIndex = b.zIndex || 0;
        return b.zIndex - a.zIndex
    });
};

stage.updateLayersOrder();

tengotengo em 25 mar. 2015

👍2 ❤1

Todos 12 comentários

A ordem dos objetos no array children é a ordem em que serão renderizados. Isso significa que o último na matriz será renderizado "por cima"

englercj em 29 ago. 2013

agora me sinto um pouco bobo xD
ao ler o código-fonte, vi uma lista vinculada em renderDisplayObject e pensei que a matriz stage.children havia desaparecido nesta versão ....
deixa pra lá, está funcionando bem com stage.children sort :)

btw as performances 1.3.0 são simplesmente fantásticas! Estou terminando um pequeno código para testar coisas WebGL em cocoonjs

obrigado :)

alaa-eddine em 30 ago. 2013

Sem problemas, fico feliz que o PIXI esteja funcionando para você!

englercj em 30 ago. 2013

var mapContainer = new PIXI.DisplayObjectContainer(),
    unitsContainer = new PIXI.DisplayObjectContainer(),
    menuContainer = new PIXI.DisplayObjectContainer();

mapContainer.zIndex = 5;
unitsContainer.zIndex = 10;
menuContainer.zIndex = 20;

/* adding children, no matter in which order */
stage.addChild(mapContainer);
stage.addChild(menuContainer);
stage.addChild(unitsContainer);

/* call this function whenever you added a new layer/container */
stage.updateLayersOrder = function () {
    stage.children.sort(function(a,b) {
        a.zIndex = a.zIndex || 0;
        b.zIndex = b.zIndex || 0;
        return b.zIndex - a.zIndex
    });
};

stage.updateLayersOrder();

tengotengo em 25 mar. 2015

👍2 ❤1

A matriz de filhos é readonly

glebmachine em 9 dez. 2015

@glebmachine não significa que você não pode chamar "sort"

ivanpopelyshev em 1 jan. 2016

@tengotengo Obrigado! Sua solução é simples, mas elegante.

aquachris em 16 mar. 2016

A solução de @tengotengo é realmente a solução final para isso? Ser capaz de alterar o Z-index parece ser um recurso fundamental para mim. Imagine, em um jogo isométrico, onde dependendo do eixo y, um sprite pode ser considerado atrás ou na frente de outro sprite. Fazer z-index é a maneira tradicional de lidar com isso e, nesse caso, você apenas mapearia a posição y inferior dos sprites para seu z-index e pronto. Por enquanto, vou fazer o tipo de hack, mas parece que isso deve ter uma solução oficial.

bluefeet em 6 nov. 2016

👍1

@bluefeet Dê uma olhada em https://github.com/pixijs/pixi-display
Acho que daria a você a funcionalidade de que você precisa

themoonrat em 6 nov. 2016

👍1

Se você está aqui procurando por esse recurso em 2017; foi implementado no Pixi como zOrder.

https://pixijs.github.io/examples/#/display/zorder.js

loadedsith em 30 jan. 2017

👍1

@loadedsith pixi-display foi atualizado para a última versão, reescrito no TS e haverá um grande patch com muitos exemplos esta semana.

ivanpopelyshev em 30 jan. 2017

Este tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente depois que foi fechado. Abra uma nova edição para bugs relacionados.