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

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

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

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

同カテゴリー記事

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

enchant.jsでこんなのもできるのか?と試したテストゲーム。
短時間でたくさん計算問題を解くゲームです。掛け算割り算なのでかなり難しい。
レトロ風の縦シューティングゲーム。敵が個性的に動き回わるところも懐かしさを感じます。
街を守りながら敵を撃つシューティングゲーム。一人で2つを同時に操作するのでむずかしい。

記事の感想・コメント

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

コメントを残す

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

ゲームジャンルタグ

新着技術ブログ記事

新着開発日記