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

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

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

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

当サイトのオリジナルゲーム(ランダム表示)

ボタンを押して決められたパターンに電気をつけるパズルゲーム
哀れな魂を愛に導くゲーム。壁に当たるまでまっすぐにしか進めません。全10ステージ。
同色のブロックを4つ以上つなげると消える落ちもの系パズルゲームです。連鎖で高得点を狙おう!
未完成の失敗作。なんで公開してるんだとか言わないでくれ。。

記事の感想・コメント

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

コメントを残す

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

おすすめメニュー

ゲーム一覧ページへのリンク画像
ゲーム開発技術ブログへのリンク画像
pixi.jsでのゲーム開発へのリンク画像
enchant.jsでのゲーム開発へのリンク画像
グッズページへのリンク画像

ゲームタグ一覧