Pixi.js: كائنات عرض قابلة للفرز

تم إنشاؤها على ٢٩ أغسطس ٢٠١٣ · 12تعليقات · مصدر: pixijs/pixi.js

في بعض الأحيان نحتاج إلى تقديم كائن العرض بترتيب معين للحفاظ على مؤشر z.

سيكون من الجيد أن يكون لدينا طريقة لاختيار ترتيب الأطفال المرسومين ، حتى باستخدام طريقة الفرز أو عن طريق السماح بطريقة reder منفصلة لكائنات 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 في ٢٥ مارس ٢٠١٥

👍2 ❤1

ال 12 كومينتر

ترتيب العناصر في المصفوفة children هو الترتيب الذي سيتم عرضها به. هذا يعني أن آخر واحد في المصفوفة سيتم عرضه "في الأعلى"

englercj في ٢٩ أغسطس ٢٠١٣

الآن أشعر بقليل من xD البكم
عند قراءة الكود المصدري رأيت قائمة مرتبطة في RenderDisplayObject واعتقدت أن مجموعة stage.children قد اختفت في هذا الإصدار ...
لا داعي للقلق ، إنها تعمل بشكل جيد مع stage.children Sort :)

راجع للشغل 1.3.0 العروض رائعة فقط! أنا أنهي رمزًا صغيرًا لاختبار عناصر WebGL على cocoonjs

شكرا لك :)

alaa-eddine في ٣٠ أغسطس ٢٠١٣

ليست مشكلة ، سعيد أن PIXI تعمل من أجلك!

englercj في ٣٠ أغسطس ٢٠١٣

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 في ٢٥ مارس ٢٠١٥

👍2 ❤1

مجموعة الأطفال هي readonly

glebmachine في ٩ ديسمبر ٢٠١٥

glebmachine لا يعني أنك لا تستطيع استدعاء "فرز"

ivanpopelyshev في ١ يناير ٢٠١٦

tengotengo شكرا لك! الحل الخاص بك بسيط ولكنه أنيق.

aquachris في ١٦ مارس ٢٠١٦

هل حل tengotengo حقاً هو الحل النهائي لهذا؟ يبدو أن القدرة على تغيير z-index هي ميزة أساسية بالنسبة لي. تخيل ، في لعبة متساوية القياس حيث اعتمادًا على المحور y الخاص بك ، يمكن اعتبار كائن واحد خلف أو أمام كائن آخر. يعد القيام بفهرس z هو الطريقة التقليدية للتعامل مع هذا الأمر ، وفي هذه الحالة ، ستقوم فقط بتعيين موضع العفاريت السفلية y لمؤشر z الخاص بهم ويتم القيام بذلك. في الوقت الحالي سأفعل الاختراق الفردي ، لكن يبدو أن هذا يجب أن يكون له حل رسمي.