前回に引き続き、今回も PIXI.js に関するお話です。
今回はバージョン 1.5.1 の pixi.dev.js に対して、レイヤを扱うための改造方法をご紹介します。

PIXI.js ではモノの位置を position で管理します。
二次元なので position.x と position.y で位置を表します。
そこに position.z を加えて前後関係を表すことにします。

そのためには以下のように書かれている行を探して
※バーション 1.5.1 では 1410行目


PIXI.DisplayObjectContainer.prototype._renderWebGL = function(renderSession)
{


以下のように書き換えて下さい。


PIXI.DisplayObjectContainer.prototype._renderWebGL = function(renderSession)
{
this.children.sort(
function(a,b){
var aZ = a.position.z;
var bZ = b.position.z;
if( aZ < bZ ) return -1; if( aZ > bZ ) return 1;
}
);


これで、position.z に基づいて表示順序を変更できます。

ただし、position.z が同じ値のモノが重なると、お互いの表示順序が1フレームごとに入れ替わって、チカチカとフリッカーを起こしてしまいます。
もしも、position.z が同じ値になる可能性があるならば、以下のように書き換えて下さい。


PIXI.DisplayObjectContainer.prototype._renderWebGL = function(renderSession)
{
this.children.sort(
function(a,b){
var aZ = a.position.z;
var bZ = b.position.z;
if( aZ < bZ ) return -1; if( aZ > bZ ) return 1;

if (aZ == bZ) {
var aY = a.position.y;
var bY = b.position.y;
if( aY < bY ) return 1; if( aY > bY ) return -1;
if (aY == aY) {
var aX = a.position.x;
var bX = b.position.x;
if( aX < bX ) return 1; if( aX > bX ) return -1;
return 0;
}
}
}
);


position.z の値が同じ場合には position.x や position.y で表示の優先度を決めます。
これで大抵の場合はチカチカすることはありません。

以上、ウェブサイトにアニメーションを組み込む際のお役に立てば幸いです。

お問い合わせについて

業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
※ご契約前のコメントやメールでのやりとりは無料です。