【pixi.js】z-indexを使って画像の重なり順を変える

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

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

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

z-indexとは

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

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

pixi.jsでのz-indexの使い方

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

this.sortableChildren = true;

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

player.zIndex = 100;

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

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

this.sortChildren();

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

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

コメントを残す

メールアドレスが公開されることはありません。

ゲームタグ一覧

おすすめゲーム

  • ゲーム「さめがめ」のサムネイル
    さめがめ
    同じ色で複数くっついているタイルをタッチして消すパズルゲーム。一度にたくさん消すと高得点!
  • ゲーム「フリック&チェイン」のサムネイル
    フリック&チェイン
    同色のブロックを4つ以上つなげると消えるパズルゲームです。ランキングはHARDのみ対応
  • ゲーム「コスモファイター」のサムネイル
    コスモファイター
    レトロ風の縦シューティングゲーム。敵が個性的に動き回わるところも懐かしさを感じます。
  • ゲーム「vs.蚊」のサムネイル
    vs.蚊
    部屋に蚊が侵入!その数10匹!何としても奴らを殲滅せねばならぬ!!一匹残らずぶっ潰せ!!
  • ゲーム「うえにいく」のサムネイル
    うえにいく
    障害物を避けながらただただ上を目指すゲーム。シンプルだけど集中力が必要です。