LoginSignup
4
5

More than 5 years have passed since last update.

pixi.js (V3) テクスチャの重なり順を入れ替える

Last updated at Posted at 2015-05-07

CSSでDOM要素の重なり順を入れ替えるには、z-indexを使用すると思いますが、
pixiでは、(canvasでは)テクスチャの重なり順を入れ替えるメソッドや、z-indexのようなプロパティは存在しません。

テクスチャの重なり順は、コンテナに追加した順になります。
後から追加したほうが上になるという仕様です。

上記を踏まえ、下記のように処理すれば、重なり順を入れ替えることが可能です。

texturetest.js
       //レンダラの生成
       var renderer = PIXI.autoDetectRenderer(1920,1080,{backgroundColor:0xFFFFFF});
       //DOMにレンダラを追加
       document.getElementById("pixitest").appendChild(renderer.view);

       //コンテナを作成
       var container=new PIXI.Container();
       //テクスチャ(Splite)保持用
     var textures={};
       //画像を読み込み
        PIXI.loader
                .add('1.png','./img/1.png');
                .add('2.png','./img/2.png');
        .load(function(loader,resources){
             //Spriteを生成してコンテナのx=0,y=0に追加していきます
             $.each(resources,function(name,resource){ //(jquery)
                   //Spriteを生成
                   var sprite=new PIXI.Sprite(resource.texture);
                   //x=0,y=0の位置に配置
           sprite.position.x = sprite.position.y = 0;
                   //コンテナに追加
                   container.addChild(sprite);
                   //あとで重なりを入れ替えるために保持しておく
                   textures[name]=sprite;      

             });
             //コンテナを描画。この時点では1.pngが下になります。
             renderer.render(container);  

        });

       //最初に追加した画像を上に表示する
       textureToTop('1.png');

       //指定したテクスチャを一番上に表示する
       function textureToTop(name){
             //作成したテクスチャ(sprite)の取得
             var texture= textures[name];
             //コンテナから削除する
             container.removeChild(texture);
             //コンテナに追加する
             container.addChild(texture);
       //コンテナを描画
             renderer.render(container); 
       }

以上、コンテナから削除、追加しなおしをすれば一番上になるというやり方でした。
ただ、これだと3つ以上の重なりを制御するのが面倒ですかね・・

もっといいやり方をご存じの方はコメントください。

4
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5