Pixi.js: Objets d'affichage triables

Créé le 29 août 2013 · 12Commentaires · Source: pixijs/pixi.js

parfois, nous avons besoin que cet objet d'affichage soit rendu dans un certain ordre pour préserver l'index z.

ce serait bien si nous pouvions avoir un moyen de choisir l'ordre des enfants dessinés, même avec une méthode de tri ou en autorisant une méthode plus rouge distincte pour les DisplayObjects individuels afin que le développeur puisse construire sa liste ordonnée, parcourir les objets et les rendre .

🤔 Question

Source

alaa-eddine

Commentaire le plus utile

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 le 25 mars 2015

👍2 ❤1

Tous les 12 commentaires

L'ordre des objets dans le tableau children est l'ordre dans lequel ils seront rendus. Cela signifie que le dernier du tableau sera rendu "en haut"

englercj le 29 août 2013

maintenant je me sens un peu stupide xD
en lisant le code source, j'ai vu une liste liée dans renderDisplayObject et j'ai pensé que le tableau stage.children avait disparu dans cette version ...
tant pis, ça marche très bien avec stage.children sort :)

btw les performances 1.3.0 sont tout simplement géniales! Je termine un petit code pour tester des trucs WebGL sur cocoonjs

Je vous remercie :)

alaa-eddine le 30 août 2013

Pas de problème, heureux que PIXI travaille pour vous!

englercj le 30 août 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 le 25 mars 2015

👍2 ❤1

Le tableau des enfants est readonly

glebmachine le 9 déc. 2015

@glebmachine ne signifie pas que vous ne pouvez pas appeler "sort"

ivanpopelyshev le 1 janv. 2016

@tengotengo Merci! Votre solution est simple mais élégante.

aquachris le 16 mars 2016

La solution de elle vraiment la solution finale pour cela? Pouvoir changer le z-index me semble être une caractéristique principale. Imaginez, dans un jeu isométrique où, en fonction de votre axe y, un sprite pourrait être considéré derrière ou devant un autre sprite. Faire z-index est la manière traditionnelle de gérer cela, et dans ce cas, vous ne feriez que mapper la position y inférieure des sprites à leur z-index et c'est fait. Pour l'instant, je vais faire le tri hack, mais il semble que cela devrait avoir une solution officielle.

bluefeet le 6 nov. 2016

👍1

@bluefeet Jetez un œil à https://github.com/pixijs/pixi-display
Je pense que cela vous donnerait les fonctionnalités dont vous avez besoin

themoonrat le 6 nov. 2016

👍1

Si vous êtes ici à la recherche de cette fonctionnalité en 2017; il a été implémenté dans Pixi en tant que zOrder.

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

loadedsith le 30 janv. 2017

👍1

@loadedsith pixi-display est mis à jour vers la dernière version, réécrit sur TS et il y aura un énorme patch avec beaucoup d'exemples cette semaine.

ivanpopelyshev le 30 janv. 2017

Ce thread a été automatiquement verrouillé car il n'y a eu aucune activité récente après sa fermeture. Veuillez ouvrir un nouveau numéro pour les bogues associés.