【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();

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

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

※このゲームで使ってます

同カテゴリー記事

記事の感想・コメント

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

技術ブログ記事

ブラウザゲームサイト用のwordpressテーマをBOOTHにて1...

レトロ風なゲームを作ろうと思った場合レトロ風な音楽も必要になります...

実はブラウザ上で動くブラウザゲームでもXboxなどのPC用コントロ...

スマホのアプリだと割と審査の条件が緩くあっさりとGoogleの広告...

ゲームでは基本的に最初にaddChildされたものから順に画面に描...