Pixi.js: Objetos de visualización clasificables

Creado en 29 ago. 2013 · 12Comentarios · Fuente: pixijs/pixi.js

algunas veces necesitamos que ese objeto de visualización se represente en un orden determinado para preservar el índice z.

Sería bueno si pudiéramos tener una manera de elegir el orden de los elementos secundarios dibujados, incluso con un método de ordenación o permitiendo un método de lectura por separado para DisplayObjects individuales para que el desarrollador pueda construir su lista ordenada, iterar a través de objetos y representarlos. .

🤔 Question

Fuente

alaa-eddine

Comentario más útil

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 en 25 mar. 2015

👍2 ❤1

Todos 12 comentarios

El orden de los objetos en la matriz children es el orden en que se renderizarán. Eso significa que el último de la matriz se mostrará "en la parte superior".

englercj en 29 ago. 2013

ahora me siento un poco tonto xD
al leer el código fuente, vi una lista vinculada en renderDisplayObject y pensé que la matriz stage.children se había ido en esta versión ...
no importa, está funcionando bien con stage.children sort :)

Por cierto, ¡las actuaciones de la 1.3.0 son simplemente increíbles! Estoy terminando un pequeño código para probar cosas de WebGL en cocoonjs

gracias :)

alaa-eddine en 30 ago. 2013

No hay problema, ¡me alegro de que PIXI esté funcionando para ti!

englercj en 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 en 25 mar. 2015

👍2 ❤1

La matriz de niños es readonly

glebmachine en 9 dic. 2015

@glebmachine no significa que no puedas llamar a "ordenar"

ivanpopelyshev en 1 ene. 2016

@tengotengo ¡ Gracias! Tu solución es simple pero elegante.

aquachris en 16 mar. 2016

¿ Es la solución de

bluefeet en 6 nov. 2016

👍1

@bluefeet Echa un vistazo a https://github.com/pixijs/pixi-display
Creo que te daría la funcionalidad que necesitas.

themoonrat en 6 nov. 2016

👍1

Si está buscando esta función en 2017; se ha implementado en Pixi como zOrder.

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

loadedsith en 30 ene. 2017

👍1

@loadedsith pixi-display se actualiza a la última versión, se reescribe en TS y habrá un parche enorme con muchos ejemplos esta semana.

ivanpopelyshev en 30 ene. 2017

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