pixijs设置层级的方法

pixijs设置层级的方法

第一种写法(一般用于父元素的层级处理)

<script src="/pixijsdemo/pixi-plugins/pixi-layers.js" type="text/javascript">
    </script>    
    <script type="text/javascript">
            const app = new PIXI.Application({  750, height: 1206 });
    document.body.appendChild(app.view);

app.stage = new PIXI.display.Stage();
app.stage.sortableChildren = true;

PIXI.Loader.shared .add('/moban/images/closebtn1.png') .add('/moban/images/share.jpg') .load(onAssetsLoaded); function onAssetsLoaded(loader, res) { // z-index = 0, sorting = true; const closebtn1Group = new PIXI.display.Group(0, true); const shareGroup = new PIXI.display.Group(1, true);  app.stage.addChild(new PIXI.display.Layer(closebtn1Group)); app.stage.addChild(new PIXI.display.Layer(shareGroup)); var bunny1 = PIXI.Sprite.from('/moban/images/share.jpg'); bunny1.width=330; bunny1.height=360; bunny1.x=192; bunny1.y=22; bunny1.parentGroup = shareGroup; app.stage.addChild(bunny1);  var bunny = PIXI.Sprite.from('/moban/images/closebtn1.png'); bunny.width=140; bunny.height=140; bunny.x=500; bunny.y=300; bunny.parentGroup = closebtn1Group; // bunny.anchor.set(0.5,0.5);  app.stage.addChild(bunny); } </script>

第二种写法(子元素层级的处理)

 每个精灵用同1个parentGroup 

然后给精灵设置zOrder就行了

ps:新添加的精灵层级默认都是1 

         const app = new PIXI.Application({  750, height: 1206 });
    document.body.appendChild(app.view);
            PIXI.Loader.shared
        .add('/moban/images/closebtn1.png')
        .add('/moban/images/share.jpg')
        .load(onAssetsLoaded);
         function onAssetsLoaded(loader, res) {
// z-index = 0, sorting = true;
var closebtn1Group = new PIXI.display.Group(1, true);


var shareGroup = new PIXI.display.Group(2, true);

app.stage = new PIXI.display.Stage();
app.stage.sortableChildren = true;
app.stage.addChild(new PIXI.display.Layer(closebtn1Group));
app.stage.addChild(new PIXI.display.Layer(shareGroup));
         



      
       var bunny1 = PIXI.Sprite.from('/moban/images/share.jpg');
    bunny1.width=330;
    bunny1.height=360;
    bunny1.name='sharejpg';
    bunny1.x=192;
    bunny1.y=22;
     bunny1.parentGroup = shareGroup;
 app.stage.addChild(bunny1);


 
                var bunny = PIXI.Sprite.from('/moban/images/closebtn1.png');
  
    bunny.width=140;
    bunny.height=140;
        bunny.name='closebtn1';
            bunny.x=500;
          bunny.y=300;
                  bunny.zOrder=7;
    bunny.parentGroup = closebtn1Group;
   // bunny.anchor.set(0.5,0.5);
          app.stage.addChild(bunny);

                var wefcf = PIXI.Sprite.from('/moban/images/wefcf.png');
  
    wefcf.width=140;
    wefcf.height=140;
        wefcf.name='wefcf';
            wefcf.x=440;
          wefcf.y=340;
          wefcf.zOrder=6;
    wefcf.parentGroup = closebtn1Group;
   // bunny.anchor.set(0.5,0.5);
          app.stage.addChild(wefcf);
 

         }

下面是2个方法结合在一起了