Pixi.js: Сортируемые дисплеи

Созданный на 29 авг. 2013 · 12Комментарии · Источник: pixijs/pixi.js

Иногда нам нужно, чтобы этот экранный объект отображался в определенном порядке, чтобы сохранить z-index.

было бы хорошо, если бы у нас был способ выбрать порядок рисованных дочерних элементов, даже с помощью метода сортировки или путем разрешения отдельного метода повторения для отдельных объектов DisplayObject, чтобы разработчик мог создавать упорядоченный список, перебирать объекты и отображать их .

🤔 Question

Источник

alaa-eddine

Самый полезный комментарий

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 25 мар. 2015

👍2 ❤1

Все 12 Комментарий

Порядок объектов в массиве children - это порядок, в котором они будут отображаться. Это означает, что последний в массиве будет отображаться «сверху».

englercj 29 авг. 2013

теперь чувствую себя немножко тупым xD
при чтении исходного кода я увидел связанный список в renderDisplayObject и подумал, что в этом выпуске нет массива stage.children ....
неважно, он отлично работает с stage.children sort :)

кстати, производительность 1.3.0 просто потрясающая! Я заканчиваю небольшой код для тестирования материалов WebGL на cocoonjs

благодарю вас :)

alaa-eddine 30 авг. 2013

Не проблема, рад, что PIXI работает для вас!

englercj 30 авг. 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 25 мар. 2015

👍2 ❤1

Дочерний массив: readonly

glebmachine 9 дек. 2015

@glebmachine не означает, что вы не можете вызвать "сортировку"

ivanpopelyshev 1 янв. 2016

@tengotengo Спасибо! Ваше решение простое, но элегантное.

aquachris 16 мар. 2016

Действительно ли решение @tengotengo является окончательным решением для этого? Мне кажется, что возможность изменить z-index является основной функцией. Представьте себе, что в изометрической игре, где в зависимости от вашей оси Y один спрайт может рассматриваться позади или перед другим спрайтом. Выполнение z-index - традиционный способ справиться с этим, и в этом случае вы просто сопоставите нижнюю позицию y спрайтов с их z-index и готово. Сейчас я сделаю хак сортировки, но, похоже, у этого должно быть официальное решение.

bluefeet 6 нояб. 2016

👍1

@bluefeet Взгляните на https://github.com/pixijs/pixi-display
Я думаю, это даст вам необходимую функциональность

themoonrat 6 нояб. 2016

👍1

Если вы ищете эту функцию в 2017 году; в Pixi это реализовано как zOrder.

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

loadedsith 30 янв. 2017

👍1

@loadedsith pixi-display обновлен до последней версии, переписан на TS, и на этой неделе выйдет огромный патч с множеством примеров.

ivanpopelyshev 30 янв. 2017

Этот поток был автоматически заблокирован, поскольку после его закрытия в последнее время не было никаких действий. Пожалуйста, откройте новую проблему для связанных ошибок.