[講座]「ガチャ演出」の技術紹介
メリー・プレミアムツクールデー！
https://twitter.com/thiropGames/status/1537450173642616833
ということで、ガチャ演出を作ってみました！
制作時間や演出の負荷など一切自重せずに本気でつくってみましたが、
たまにはこういうのも良いですね🤸♂️
（※演出の負荷は、オプションで動画化したものを流して対応予定）
今回の記事では、ガチャ演出で使っている技術の概要をざっと紹介していきます！
現行で配布されているプラグインで代用できそうな演出は、プラグインの紹介も行っていきますよ！
（※今回の演出はほぼ自作のスクリプトを使用してるので、実際に再現できなかったらゴメンナサイ）
かなり内容が濃いですが、初心者の方はフィルターやパーティクルまわりの使い方に絞って目を通すのがおすすめです。
グリッチ演出
言わずと知れた厨二エフェクト、グリッチ演出ですね！
手軽にかっこいいのでエフェクト初心者が多用して逆に安っぽくなります。
私は初心者なので迷わず使います！
フィルター類はツキミさんが公開している「FilterController」が断然使いやすいですね！
パラメータをアニメーションさせることもできるので、応用も◎！
フィルター効果は「pixi-filters」という(たぶん)準公式ライブラリを使用する場合がほとんどかと思います。
「pixi-filters」で用意されているフィルターは、デモページで確認することができます。
- どんなエフェクトをかけようか
- パラメータを細かく調整したい
という場合は、デモページで実際にエフェクトやパラメータを試してみながらプラグインで設定するのがおすすめです。
グリッチ演出では、入りと終わりで「slices(分割数)」のパラメータを動かして、画面が乱れた演出を作っています。
静止状態でもたまに「slices」を上下させてノイズ感をつくってます。
グリッチ時に画像の切り替え
グリッチと同時に、椅子に座った女の子がドラゴンの画像に切り替わっています。
単純に、切り替えのタイミングでイベントの透明化などで切り替えればOKですね！
同時に画面の色調変更も行って幻を見ているような雰囲気を作ってます。
また、ドラゴンの足元には炎のようなオーラエフェクトを加えてます。
もちろん、拙作の「パーティクルプラグイン」を使用してます！
MV/MZそれぞれに対応したものをBoothで販売しているほか、最近では公式DLCでも販売開始しました！
DLC版には英語マニュアルが付属してますので、英語のほうが得意な方はDLC版がおすすめです！
（※MV版の方が安価ですが、グループエディタが付属しません。サポート外ですが、フル機能のMZ版をMVで使用することも可能です。「TRP_ParticleMZ」のRPGツクールMVでの動作について）
パーティクルはONにしてから徐々に発生します。
画像を切り替えた直後にオーラをマックスの状態にしたいので、「exceed」コマンドを使って表示した直後に時間を進めればOKです。
文字演出
１文字ずつ、ピクチャ画像として表示すればOK！
たしか、MZだとイージングも使えるんでしたよね。
アニメーションは「クソデカ拡大(20倍)+不透明度0」から「等倍+不透明度255」までイーズアウトで表示してます。
勢い・インパクトをつけて登場させたいときには常套のアニメモーションです！
文字のゆれ
入りのアニメーションのあとはランダムに揺らしています。
自分はピクチャ使わずにスクリプトでSpriteを動かしてるのですが、ピクチャだと大変かもですね…
ループコマンド内でスクリプトで手軽に動かすとしたら↓みたいな感じですかね
なお、運が悪いとあらぬ方向へ飛んでいきます(´・ω・｀)
（ちゃんと定位置でシェイクさせるには、定点の座標を保持しておく必要があります）
文字裏のパーティクル
文字裏には、「爪痕のパーティクル」のを表示してます。
（紫のモヤモヤはドラゴンの足元へのパーティクルです。たまたま文字の背景に表示されていい感じになってますね）
パーティクルはスクリプトからSpriteを対象にも表示できますし、
通常のコマンドでピクチャを対象（「picture:ピクチャ番号」）にも表示できます。
また、爪痕の画像はMV形式(使ってるのはVXAのかも)のアニメーション画像を使用してます。
「Ctrl+I」で呼び出せるパーティクル画像はシンプルな画像が多いです。
ちょっと複雑な印象の演出にしたい場合は「Ctrl+A」で呼び出せるアニメーション画像から選ぶのがおすすめです◎
（※MZしか持ってない方は、ぜひぜひ素材集としてMVも買いましょう！セールだと80%オフとかしてるはず！）
実際、この演出もアニメーション画像を適当に切り替えながら良さげなものを選んだだけで、爪痕であることに特に意味はないです。
適当に試していると、思いがけない印象のエフェクトができるのでとってもおすすめ！
ガラスが割れる演出
グリッチ演出が終わるのと合わせて、床のガラスが割れる演出になります。
ガラスパーティクル
ガラス片の画像を用意して、パーティクルとして表示しました。
「img/particles」フォルダに画像を入れるとエディタで選択できるようになります。
画像の加工や制作ができる方は、イメージに合うパーティクル画像がない場合は自分で作っちゃうのがおすすめ！
パラメータの設定はspeed自体は抑えて、accelerationで徐々に舞い上がるようにして浮遊感を出しています。
ガラスの数は、frequency(射出頻度)で調整するのでなく、射出は１回に抑えてparticlesPerWave(射出ごとのパーティクル数)で調整するのが楽です。
また、ガラスのパーティクルに対してサブエミッターを設定し、ランダムにキラッと光りが反射するイメージのエフェクトを足してます。
細かな演出
ガラスが割れるタイミングで開放感を出すために細かい演出を行ってます。
上下の黒帯を消す
背景のブラー(ぼかし)を弱める
こういう、ここぞという時のインパクトのために、それまではあえて演出を抑えるような手法が自分は好きです。
（ブラーはフィルタープラグインでかけられます。）
落下演出
空を落下する演出。
（手軽にダイナミックな画面が作れるので個人的に多用しがち…）
自分はTilingSpriteで背景画像を表示して上下ループさせてます。
遠景表示に関しては、公開されてるプラグインでは砂川赳さんの遠景プラグインが多機能で使い勝手が良さそうです。
https://twitter.com/NewRPGProject/status/1530480448568053760
プラグインを使わずとも理論的には、
- 上下に並べた２つのピクチャを並べる
- 並べたまま上に移動
- 下端が見切れるタイミングで元の位置に戻す
という手順でも上下ループを実現できます。
遠景の切り替え(上級)
空の遠景は「青空」→「夕空」→「夜空」と切り替わっています。
自分はSpriteに対してmaskを設定し、マスクを上方向に動かすことで画面下から徐々に透明にして次の遠景へと切り替えています。
マスクの設定は
- マスク用のスプライトをマスク対象と同じ親に対してaddChild
- 対象のスプライトに対してsprite.mask = maskSprite
といった感じでできます。若干直感的でなくて戸惑いやすいですね。
ピクチャで実現するには、ツキミさんの「GradientWipe」プラグインで再現できそうです。
https://twitter.com/sm3girls/status/958627400476061696
あと、別に単純に徐々に透明にして次の背景に遷移させるのも全然アリですね！
（元も子もなし！）
モーションブラー
空背景へと画面が切り替わるタイミングで「モーションブラー」を入れてます。
画面に勢いが出るのと、画面切り替わり時の不自然さを緩和できます！
- モーションブラー無しとあり
また、画面切り替わりの位置に雲の画像を帯のように表示してごまかしてます。
雲とガラス片の視差パーティクル
落下中の空には、「雲パーティクル」と「細かなガラス片」を背景として表示しています。
（※大きいガラス片はSprite表示）
スクロールに連動させるために、対象を「weather（天候）」として表示しています。
さらに、スクロール速度を微妙にずらして近景・遠景的に視差を作っています。
パーティクルプラグインのわりと最近のアップデートで追加した機能で実現可能です。
対象を「weather」の代わりに「weather:x方向の連動率,y方向の連動率」で指定します。
「weather:1,0.5」とすると、y方向のスクロールに対して50％のみ付随して、ゆっくり・遠景のように見えます。
逆に「weather:1,1.5」とすると、150％の速度で付随して、早く・近景のように見えます。
パーティクルをフェードアウト
ここで表示しているパーティクルは夜の背景になったタイミングで全てフェードアウトさせてます。
「clear」コマンドを使えば、
- 「射出を止める」か
- 「即座に全てのパーティクルを消す」
ことができますが、徐々にフェードアウトさせることはできません。
拡張パッチとして配布している「ExMove」プラグインを使うことで、管理IDごとのパーティクル全体(コンテナ)を操作することが可能です。
天候を自然に切り替える際などに使える機能なので、入れておいても○
ガラス片に動画を写す(上級)
大きめのガラス片に動画が写っています！
が、時間的に短いのとガラス片の画像のクオリティが低くてよう分からんですね。
（大きい画像は絵心の無さをごまかせずにつらい……)
実は、videoエレメントはbitmapに普通に書き出せるのです！
bitmap._context.drawImage(video,0,0,width,height)
みたいな感じですね。
毎フレーム、bitmapへの書き込みを行えば普通のSpriteとして表示できちゃいます。
bitmapを使い回せば、複数のspriteで同じ動画の表示もできます！
┌→ sprite
video → bitmap ─→ sprite
└→ sprite
ガラス片に写すのには、動画Spriteに対してガラス片のシルエットの画像でマスクを設定すればOKですね。
技術的には面白いので、もっと映える場面で使ってみたいです。
光が主人公に集まってくる演出
割れたガラスから解き放たれた光が、画面上方から降ってきて主人公に集まります。
ちなみに、色の違う光はレア確定演出です……地味！
これは……自分用に用意したパーティクルプラグインの拡張機能を使ってます。
（要望があるようなら配布する……かもです）
クライマックス
覚醒的な何かがあって主人公君は力を得たみたいです。
ここまで来たら、あとは感覚のままにエフェクトを足しまくるのみ！
やりたい放題ですが負荷は大丈夫なんでしょうか。自分にもわかりません！
背景にうっすら表示している六芒星的なエフェクトがお気にいり。
これも、VXAのアニメーション画像素材ですね！
パーティクルは基本、ブレンドモード「加算」で表示することが多いと思います。
なので、明るい画面よりも暗い画面の方が基本、映えます。
つまり、暗闇がもっともパーティクル演出が映えるわけですね。合理的！
みんなも、パーティクルを盛るときは画面の色調変更でちょっとだけ暗めにするのがおすすめです！
Z値を「spriteset」にすれば、色調変更の影響を受けずに一番手前に表示できるので合わせて使いましょう！
ズームブラー
フラッシュするタイミングでズームブラーもかけてます。
ある一点を中心に放射状にブラーをかけるフィルターで、汎用性が高いです！
戦闘のスキルモーションにも、イベント演出にも使える万能エフェクト！
フィルタープラグインで触ってみて、使い方を覚えましょう！
いきなり最大値でフィルターをかけて、徐々に「strength」を0に近づければOK。
（反対の動きにすると、徐々に集中感が増していくような演出に使えます！）
ブルームフィルター
最後に画面が白く明転しますが、色調変更に加えてブルームフィルターをかけています。
色調だけだと画面全体が白ずむ感じになりますが、ブルームフィルター（正確にはAdvancedBloomFIlter）も併用すれば、光が強まっていく感じを自然に出せます！
断然、かっこいいのでこのフィルターも使い方を覚えるのがおすすめ！
というわけで、ガチャ演出で使っている演出まわりの技術をざっと紹介してみました！
なんというか、久しぶりに自分の全力を出し尽くしてやりきった感ですね！
絵心がなくてイラストやデザイン的な見栄えを作れないので、モーションやエフェクト回りを頑張って来ましたが、まずまず満足できるとこまで来れたなぁと。
とはいえ、やはりイラストパワーは正義なので、用意してもらった素材をもっと活かせるように精進したいですね。
……今回の記事で、「いいね」と思った方はプレツクツイートの方も是非、いいね・RTをよろしくです！！
https://twitter.com/thiropGames/status/1537450173642616833
あと、パーティクルプラグインもついでによろしくです！
最後までお読みくださりどうもでした！
それでは、またノシ
