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つ以上の重なりを制御するのが面倒ですかね・・
もっといいやり方をご存じの方はコメントください。