[一言進捗]/[講座?]Spriteで遊ぶ③（重なり順について）
一言進捗
今週は、サボってた訳じゃないですが目に見える進捗が少なかったです…。
https://twitter.com/thiropGames/status/1215945464480092160
というより、ダイスプラグインの整備がですね……
たぶん立ち絵プラグイン（TRP_Skit）の半分くらいの値段で出す予定なんですが、チートシートに乗せるプラグインコマンド数とかヘルプのページ数とかも立ち絵プラグインのときを超えちゃってます……
うーん、もうちょっと作業量とかもろもろを考えて仕様考えるべきでしたね😰
まぁ、次回からの課題ということで！
というわけで、もう少ししたらダイスプラグインのヘルプページを大量に投稿すると思います。うるさいかもしれませんがご容赦をm(_ _)m
（本当はブログとかに用意すればよいのだけどci-enで記事書くのが圧倒的に楽！）
いつか講座になるかもしれない何か
Spriteで遊ぶ③（重なり順について）
前回の続きです。
少し間が空いちゃいましたが、function iconSprite(iconId)という関数を作ってアイコンIDを指定してスプライトを用意できるようになりましたね！
次のスプライトのパラメータを説明するためにと大それた準備をしましたが、特に大したことは解説はしませんのでサクッと進めてきます！
Spriteの重なり順
前回用意したiconSprite関数を活用してアイコンIDが50と20のスプライトを２つ用意してみます。
Game_Interpreter.prototype.spriteTest = function(){
/* １つ目のスプライト(アイコンID50)を生成
===================================*/
var iconId = 50;
var sprite = iconSprite(iconId);
//シーンに貼り付けて位置とスケールを調整
SceneManager._scene.addChild(sprite);
sprite.x = Graphics.boxWidth/2;
sprite.y = Graphics.boxHeight/2;
sprite.scale.set(1,1);
/* ２つ目のスプライト(アイコンID20)を生成
===================================*/
iconId = 20;
var sprite2 = iconSprite(iconId);
//シーンに貼り付けて位置とスケールを調整
SceneManager._scene.addChild(sprite2);
sprite2.x = Graphics.boxWidth/2;
sprite2.y = Graphics.boxHeight/2;
sprite2.scale.set(1.5,1.5);
};
１つ目のスプライトはスケールを1にセットしており、２つ目のスプライトは1.5にセットしています。
さぁ、どう表示されるでしょうか？
↓
アイコンが１つしか見えませんね！
つまり、スケールが大きい２つ目のアイコンが手前に来てしまって、１つ目の小さいスプライトが裏に隠れてしまっているというわけです。
スプライトの重なり順は、後にaddChildされるほど上に表示されます。
ですので、１つ目のスプライトをシーンに追加したSceneManager._scene.addChild(sprite);のコードを一番最後の行に追加してみると？
ちゃんと１つ目の小さなスプライトが上に重なって表示されましたね！
このように、すでにaddChildしているスプライトを再度addChildしてもエラーになったりはしないので雑に重ね順を調整できます。
ただ、一番上ではなくてあるスプライトとあるスプライトの間に表示したい、といったニッチな状況があるかもしれません。
その場合は、addChildAt()という関数を使った少しだけ面倒な処理となります。
といっても、やり方を分かっていれば簡単です！
今回は１つ目のスプライトを２つ目のスプライトのすぐ上の順番に表示したいとします。
正解のコードは↓
var parent = sprite2.parent;
var index = parent.children.indexOf(sprite2)+1;
parent.addChildAt(sprite,index);
１行目でスプライト２の親(parent)を取得しています。SceneManager._sceneにaddChildしているので、これが親になります。
.parentでアクセスすると親が分からなくても良いので便利です。
addChildされたスプライトは親(parent)のchildrenという配列に順番に追加されます。
この配列に対してindexOf(対象の子要素)という関数を用いることで、sprite2がchildren配列の何番目であるかというインデックスを取得しています。
さらに、後に追加されるほど=配列の後ろにあるほど手前に表示されるので、今回はsprite2の１つ手前=配列内の1つ後ろの位置に追加するために+1としています。
そして最後にaddChildAt関数で１つ目のスプライトを計算したindexの位置に追加しています！
……うーん、書いてみて思ったけど、今回の内容はちょっとニッチだったかも？
ただ、次回はスプライトの親子関係について書く予定で、
その時に今回の知識があればちょっとだけ理解が楽かも？
それではまた！