Pixi.js: Sortierbare Anzeigeobjekte

Die Reihenfolge der Objekte im Array children der Reihenfolge, in der sie gerendert werden. Das bedeutet, dass der letzte im Array "oben" gerendert wird.

jetzt fühle ich mich ein wenig dumm xD
Beim Lesen des Quellcodes sah ich eine verknüpfte Liste in renderDisplayObject und dachte, dass das Array stage.children in dieser Version nicht mehr vorhanden ist.
egal, es funktioniert gut mit stage.children sort :)

Übrigens sind die 1.3.0-Leistungen einfach großartig! Ich beende einen kleinen Code, um WebGL-Inhalte auf Cocoonjs zu testen

Dankeschön :)

Kein Problem, froh, dass PIXI für Sie arbeitet!

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();

Kinderarray sind readonly

@glebmachine bedeutet nicht, dass Sie nicht "sort" nennen können

@tengotengo Danke! Ihre Lösung ist einfach und doch elegant.

Ist die Lösung von @tengotengo wirklich die endgültige Lösung dafür? Die Möglichkeit, den Z-Index zu ändern, scheint mir ein Hauptmerkmal zu sein. Stellen Sie sich in einem isometrischen Spiel vor, in dem abhängig von Ihrer y-Achse ein Sprite hinter oder vor einem anderen Sprite betrachtet werden könnte. Das Ausführen des Z-Index ist die traditionelle Methode, um dies zu handhaben. In diesem Fall ordnen Sie einfach die untere y-Position der Sprites ihrem Z-Index zu und fertig. Im Moment mache ich den Sort-Hack, aber es scheint, dass dies eine offizielle Lösung haben sollte.

@bluefeet Schauen Sie sich https://github.com/pixijs/pixi-display an
Ich denke, es würde Ihnen die Funktionalität geben, die Sie benötigen

Wenn Sie 2017 nach dieser Funktion suchen; Es wurde in Pixi als zOrder implementiert.

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

@loadedsith pixi -display wurde auf die neueste Version aktualisiert, auf TS umgeschrieben und diese Woche wird es einen riesigen Patch mit vielen Beispielen geben.

Dieser Thread wurde automatisch gesperrt, da nach dem Schließen keine aktuellen Aktivitäten stattgefunden haben. Bitte öffnen Sie eine neue Ausgabe für verwandte Fehler.