【PixiJS】zIndexで画像の重なり順を変える #pixi.js

pixi.jsでは基本的に最初にaddChildされたものから順に画面に描画されるようになるので重なった場合には後にaddChildされたものほど上に表示されるようになります。

基本的にはそれを考慮してゲームを作っていくのですが、ときどきゲーム中にどうしても重なり順の変更が必要になる場合があります。

そのような場合に使われる要素にzIndexというものがあります。

zIndexとは

サイトのデザインを決めるcssというもので使われているブロック要素の重なり順を指定するプロパティにz-indexというものがあります。このプロパティの数値が大きいほど上に小さいほど下に重なり順が入れ替わって表示されるようになります。

このcssのz-indexと同じようなものがpixi.jsにも用意されていてそれがzIndexです。

まずはzIndexで並び替えをしたいスプライトなどのディスプレイオブジェクトをaddChildしている親となっているContainerのsortableChildrenというプロパティーをtrueにします。

this.sortableChildren = true;

これでzIndexが使えるようになります。そしてスプライトなどのzIndexプロパティーに値を設定します。

player.zIndex = 100;

これだけでzIndexの値が大きい要素ほど上に表示されるようになります。

ただ、ときどきうまくいかないことがあって(理由はわかりません)、その時は親となっているContainerで

this.sortChildren();

というメソッドを使ってやると強制的に順序がソートされます。

たったこれだけで重なりを自由に変えられるのでとても便利です。