[進捗]ダイスプラグイン紹介PV制作/[講座]Spriteで遊ぶ④(親子関係)
一言進捗
ダイスプラグインのヘルプページ整備がようやく終わり、
週末から紹介PVを作ってました。
クオリティよりスピード重視で作業を進めてみましたが、
パーツの使い回しなどを覚えてだいぶAEの操作にも慣れてきた感があります！
AEチュートリアル動画見ながら少しずつパーツを増やしていこうと思いました！
↓[音量注意]いい感じにできた破裂モーションとローワーサード
いつか講座になるかもしれない何か
Spriteで遊ぶ④(親子関係）
前回のつづきです。
前回は２つのスプライトを表示して、addChild(),addChildAt()関数を使って重ね順の操作をしました。
今回は、あるスプライトに別のスプライトをaddChildで子要素として追加した場合の親子関係についてみてみます。
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);
//spriteに貼り付けて位置とスケールを調整
sprite.addChild(sprite2);
sprite2.x = 0;
sprite2.y = 0;
sprite2.scale.set(1,1);
};
前回のコードと違う部分は、sprite2をspriteに対してaddChildで追加してる点と、
sprite2のx,yを0、scaleも等倍の1のままにしている点です。
さて、表示結果は↓
１つしか表示されていない……のではなく、sprite2が１つめのspriteとぴったり重なっています！
sprite2は親であるスプライトであるspriteと全く同じ位置にあり、
sprite2のx、yともに0としているので、つまりsprite2は親の位置が基準となっているということです。
見やすいようにsprite2.x = 32;としてアイコン１つ分だけ右にずらしておきます。
さて、次に親であるspriteの位置と大きさを変化させてみます。
まずは、sprite.x+=32;を最後に加えてxをアイコン１つぶん右にずらしてみます。
キャラとのずれで分かると思いますが、spriteとsprite2が両方とも右にずれたのが分かると思います。
このように、addChildで子要素として追加したスプライト(sprite2)は親スプライトと連動して動きます。
スプライトの位置を戻してsprite.scale.set(2,2);とスケールを２倍にすると……
やはり子要素であるsprite2も一緒に２倍に拡大されました！
このように、複数のスプライトを親子関係で配置すると、
まとまって位置や大きさを調整することができて便利！
……という話でした！
これでSpriteの基本については終わりです。
いろいろとやってきましたが、
「スクリプトでわざわざやらなくてもピクチャでいいじゃん」
と思われるかもしれません……
「まったくそのとおりです！！」
おい！……と思われるかもしれませんが、実際ツクールのピクチャは優秀です。
さらに、今まで表示させてきたアイコンのスプライトですが、
メニューを開いて閉じると綺麗に消えてしまいます……無慈悲💧
シーンが変わったり、セーブ＆ロードをしてもスプライトを表示させ続けるにはシーン開始時にスプライトの状態(表示してる画像や位置など）を復元しなければなりません。
そして、復元させるにはどこかでスプライトの状態をデータとして保持する必要があります。もちろんシーンが変わっても残り続ける形で。
その点、ピクチャはコマンドで１度表示すればシーンが変わってもセーブ＆ロードを行ってもちゃんと表示されるように設計されています。
このようにピクチャは手軽で優秀なのですが、ピクチャで自作システムを作ったことがある方は分かると思いますが、ピクチャ番号を管理するのが大変です・・・。
今回紹介した親子関係というのもピクチャには無い概念ですが、
複数の画像を同時にアニメーションさせたりする際には非常に有効。
↓UI画像は全てスクリプトでSpriteを生成して管理してます。フィールド画面でUIパーツのSpriteは40以上……
Sprite周りの講座はしばらく続けてみようと思いますので、「自作UIを作ってみたい！」という方は一緒にSpriteの使い方を学んでみてはいかがでしょうか？
（といいつつ、しばらくダイスプラグインの使い方紹介記事を書くと思うので、講座は少しの間お休みになるとオモイマス……m(_ _)m）