本篇說明的是官方範例

仍然要用

這個範例我看到快放棄...還好還是勉強懂了 燈愣,不過本篇講的時候會簡化很多~~~

數量剩下這樣

z-order用來像是CSS z-index的概念(不用講也知道),但他不是用在單個物件上,而是以群組的概念在做,而單個物件本身也有zOrder這個參數可以做單層控制

這個範例結合分層的方式和單個物件來做

一開始先定義了三個不同層級的display.Group,greenGroup是最底層設為0,dragGroup設為2
new PIXI.display.Group(zOrder, enableSort)
enableSort為true可啟用組排序

var greenGroup = new PIXI.display.Group(0, true); 
var dragGroup = new PIXI.display.Group(2);

監聽排序sort,將物件的zOrder,設為-y的值,也就是放在越上面,層級會越後面

greenGroup.on('sort', function (sprite) {
    sprite.zOrder = -sprite.y;
});

將stage也轉成PIXI.display.Stage
並將剛剛兩個group加入stage

app.stage = new PIXI.display.Stage();
app.stage.addChild(new PIXI.display.Layer(greenGroup));
app.stage.addChild(new PIXI.display.Layer(dragGroup));

再來就是把圖片載入,和之前方式差不多,這裡就不贅述
唯一不同的是要設定parentGroup,將之前建立的greenGroup指定給他,並且設定監聽drag事件,

bunny.parentGroup = greenGroup;

drag的內容在之前的篇章有提到過,這邊就只有補充將parentGroup,轉為dragGroup,前面設定dragGroup是2,所以在drag的狀態下,物件的顯示就會在最高的位置

function onDragStart(event) {
    if (!this.dragging) {
        this.data = event.data;
        this.oldGroup = this.parentGroup;
        this.parentGroup = dragGroup;
        this.dragging = true;
        this.dragPoint = event.data.getLocalPosition(this.parent);
        this.dragPoint.x -= this.x;
        this.dragPoint.y -= this.y;
    }
}

drag放掉之後,再把他設回greenGroup,他就會回到原本的層級去做排序