Pixi.js: Objek tampilan yang dapat diurutkan

Dibuat pada 29 Agu 2013 · 12Komentar · Sumber: pixijs/pixi.js

beberapa kali kita membutuhkan objek tampilan itu untuk dirender dalam urutan tertentu untuk mempertahankan indeks-z.

akan lebih baik jika kita dapat memiliki cara untuk memilih urutan dari anak-anak yang digambar, bahkan dengan metode pengurutan atau dengan mengizinkan metode reder terpisah untuk masing-masing DisplayObjects sehingga pengembang dapat membangun daftar yang diurutkan, mengulangi objek dan merendernya .

🤔 Question

Sumber

alaa-eddine

Komentar yang paling membantu

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 pada 25 Mar 2015

👍2 ❤1

Semua 12 komentar

Urutan objek dalam array children adalah urutan mereka akan dirender. Itu berarti yang terakhir dalam array akan dirender "di atas"

englercj pada 29 Agu 2013

sekarang saya merasa xD sedikit bodoh
ketika membaca kode sumber saya melihat daftar tertaut di renderDisplayObject dan berpikir bahwa array stage.children telah hilang dalam rilis ini ....
Tidak masalah, itu bekerja dengan baik dengan stage.children sort :)

btw pertunjukan 1.3.0 luar biasa! Saya menyelesaikan kode kecil untuk menguji hal-hal WebGL di cocoonjs

Terima kasih :)

alaa-eddine pada 30 Agu 2013

Tidak masalah, senang PIXI bekerja untuk Anda!

englercj pada 30 Agu 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 pada 25 Mar 2015

👍2 ❤1

Array anak-anak adalah readonly

glebmachine pada 9 Des 2015

@glebmachine tidak berarti Anda tidak dapat memanggil "sort"

ivanpopelyshev pada 1 Jan 2016

@tengotengo Terima kasih! Solusi Anda sederhana namun elegan.

aquachris pada 16 Mar 2016

Apakah solusi @tengotengo benar-benar solusi akhir untuk ini? Mampu mengubah z-index tampaknya menjadi fitur utama bagi saya. Bayangkan, dalam permainan isometrik di mana tergantung pada sumbu y Anda, satu sprite dapat dipertimbangkan di belakang atau di depan sprite lain. Melakukan z-index adalah cara tradisional untuk menangani ini, dan dalam hal ini Anda hanya akan memetakan posisi y bawah sprite ke z-index dan selesai. Untuk saat ini saya akan melakukan semacam peretasan, tetapi tampaknya ini harus memiliki solusi resmi.